Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

QUICK TIP:

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the Before/After Add-On, first add the "revolutions-addons" folder into your production site:

Next, add the Before/After stylesheet and script. The script should placed below all other scripts on the page.


<!-- BEFORE/AFTER STYLESHEET -->
<link type="text/css" href="revolution-addons/beforeafter/css/revolution.addon.beforeafter.css" />


<!-- BEFORE/AFTER SCRIPT -->
<script type="text/javascript" src="revolution-addons/beforeafter/js/revolution.addon.beforeafter.min.js"></script>

Next, assign a variable to your slider's main settings script as shown in the following example.


var slider = jQuery('#rev_slider_1').show().revolution({

/* ******************** */
/* SLIDER SETTINGS HERE */
/* ******************** */

});

Then initialize the BeforeAfter Addon directly after the slider settings (shown above)


RevSliderBeforeAfter(tpj, revapi265, {

/*
default CSS cursor when hovering over the drag-arrows
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
*/
cursor: "move",

/*
set to "true" if the slider is a carousel:
https://www.themepunch.com/revsliderjquery-doc/carousels/
*/
carousel: false,

arrowStyles: {
leftIcon: "fa-icon-caret-left", /* left arrow icon class */
rightIcon: "fa-icon-caret-right", /* right arrow icon class */
topIcon: "fa-icon-caret-up", /* top arrow icon class */
bottomIcon: "fa-icon-caret-down", /* bottom arrow icon class */
size: "35", /* arrow icon font size */
color: "#ffffff", /* arrow icon color */
spacing: "10", /* the spacing in pixels between the icons */
bgColor: "transparent", /* arrows container background color */
padding: "0", /* arrows container padding */
borderRadius: "0" /* arrows container border-radius value */
},

dividerStyles: {
width: "1", /* the divider-line size in pixels */
color: "rgba(255, 255, 255, 0.5)" /* the divider-line's color */
}

});


RevSliderBeforeAfter(tpj, revapi265, {

/*
default CSS cursor when hovering over the drag-arrows
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
*/
cursor: "move",

/*
set to "true" if the slider is a carousel:
https://www.themepunch.com/revsliderjquery-doc/carousels/
*/
carousel: false,

arrowStyles: {
leftIcon: "fa-icon-caret-left", /* left arrow icon class */
rightIcon: "fa-icon-caret-right", /* right arrow icon class */
topIcon: "fa-icon-caret-up", /* top arrow icon class */
bottomIcon: "fa-icon-caret-down", /* bottom arrow icon class */
size: "35", /* arrow icon font size */
color: "#ffffff", /* arrow icon color */
spacing: "10", /* the spacing in pixels between the icons */
bgColor: "transparent", /* arrows container background color */
padding: "0", /* arrows container padding */
borderRadius: "0" /* arrows container border-radius value */
},

dividerStyles: {
width: "1", /* the divider-line size in pixels */
color: "rgba(255, 255, 255, 0.5)" /* the divider-line's color */
},

/*
**************************************************************
All sections below are optional. Uncomment a section to use it
**************************************************************
*/

/* animate the before/after point when the slider is clicked */
/*
onClick: {
time: "500", // the animation's duration in milliseconds
easing: "Power2.easeOut", // the TweenLite easing value: https://greensock.com/ease-visualizer
},
*/

/* add a text-shadow to the arrow icons */
/*
arrowShadow: {
color: "rgba(0, 0, 0, 0.35)",
blur: "10"
},
*/
/* add a box-shadow to the arrow icons container */
/*
boxShadow: {
strength: "3",
color: "rgba(0, 0, 0, 0.35)",
blur: "10"
},
*/

/* add a border to the arrow icons container */
/*
arrowBorder: {
size: "1",
color: "#000000"
},
*/

/* add a box-shadow to the divider-line */
/*
dividerShadow: {
strength: "3",
color: "rgba(0, 0, 0, 0.35)",
blur: "10"
},
*/
});

Next, setup your Slides with your Before/After settings and images:

moveto
    Position to move the line when the slide first loads. Written in responsive format. % or px accepted
    bgColor
      The slide's main background color for the "after" side, written as a hex, rgba or css gradient.
      image
        The background style for the "after" side. Options are "solid" or "image"
        bgImage
          The background image url for the "after" side
          bgFit
            The CSS background-size value for the main bg image on the "after" side
            bgPos
              The CSS background-position value for the main bg image on the "after" side
              bgRepeat
                The CSS background-repeast value for the main bg image on the "after" side
                direction
                • "horizontal"
                • "vertical"
                Reveal content from left to right or top to bottom
                easing
                  The initial reveal animation's transition type: https://greensock.com/ease-visualizer
                  delay
                    Optional delay in milliseconds for the initial reveal
                    time
                      The initial reveal's animation time
                      out
                      • "fade"
                      • "collapse"
                      Choose how the "After" content should animate out when the slide changes
                      carousel
                      • true
                      • false
                      If the slider is a carousel or not
                      bounceArrows
                      • none
                      • initial
                      • infinite
                      • once
                      Teaser animation for the drag arrows
                      bounceType
                      • repel
                      • attract
                      If arrows should move away or toward each other
                      bounceAmount
                        The distance in pixels the arrows should bounce
                        bounceSpeed
                          The animation time in milliseconds for each bounce sequence
                          bounceEasing
                            The bounce animation's transition type: https://greensock.com/ease-visualizer
                            bounceDelay
                              Optional delay in milliseconds before the arrows start to bounce
                              shiftOffset
                                The initial offset for the arrows
                                shiftTiming
                                  The transition time in milliseconds
                                  shiftEasing
                                    The animation's transition type
                                    shiftDelay
                                      Optional delay in milliseconds for the transition


                                      <!-- BEGIN BEFORE/AFTER SLIDE -->
                                      <li data-transition="fade"

                                      <!-- before/after settings and image urls -->
                                      data-beforeafter='{

                                      "moveto":"50%|50%|50%|50%",
                                      "bgColor":"#e7e7e7",
                                      "image":"solid",
                                      "bgImage":"assets/images/day.jpg",
                                      "bgFit":"cover",
                                      "bgPos":"center center",
                                      "bgRepeat":"no-repeat",
                                      "direction":"horizontal",
                                      "easing":"Power2.easeInOut",
                                      "delay":"500",
                                      "time":"750",
                                      "out":"fade",
                                      "carousel":false,
                                      "bounceArrows":"infinite",
                                      "bounceType":"repel",
                                      "bounceAmount":"5",
                                      "bounceSpeed":"1500",
                                      "bounceEasing":"ease-in-out",
                                      "bounceDelay":"750",
                                      "shiftOffset":"10",
                                      "shiftTiming":"300",
                                      "shiftEasing":"ease",
                                      "shiftDelay":"250"
                                      }'>

                                      <!-- The "before" image for the slide's main background -->
                                      <img src="assets/images/night.jpg" class="rev-slidebg">

                                      <!-- ***************** -->
                                      <!-- SLIDE LAYERS HERE -->
                                      <!-- ***************** -->

                                      </li><!-- END BEFORE/AFTER SLIDE -->

                                      Finally, setup your Slides with your Before/After Layers:

                                      data-beforeafter
                                      • "before"
                                      • "after"
                                      Set the layer to appear in the before or after view


                                      <!-- BEGIN BEFORE/AFTER LAYER -->
                                      <div class="tp-caption tp-resizeme"

                                      data-beforeafter="before"
                                      data-frames='[{"delay": 0, "speed": 300, "from": "opacity: 0", "to": "opacity: 1"}, {"delay": "wait", "speed": 300, "to": "opacity: 0"}

                                      ]'></div><!-- END BEFORE/AFTER LAYER -->

                                      Popular Solutions

                                      [ess_grid alias="wp-popular-solutions"]
                                      Impressum | Datenschutz