Before / After

    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.

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

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


Next, setup your Slides with your Before/After settings and images:
  • movetoPosition to move the line when the slide first loads. Written in responsive format. % or px accepted
  • bgColorThe slide's main background color for the "after" side, written as a hex, rgba or css gradient.
  • imageThe background style for the "after" side. Options are "solid" or "image"
  • bgImageThe background image url for the "after" side
  • bgFitThe CSS background-size value for the main bg image on the "after" side
  • bgPosThe CSS background-position value for the main bg image on the "after" side
  • bgRepeatThe 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
  • easingThe initial reveal animation's transition type:
  • delayOptional delay in milliseconds for the initial reveal
  • timeThe initial reveal's animation time
  • out"fade" "collapse"
    Choose how the "After" content should animate out when the slide changes
  • carouseltrue false
    If the slider is a carousel or not
  • bounceArrowsnone initial infinite once
    Teaser animation for the drag arrows
  • bounceTyperepel attract
    If arrows should move away or toward each other
  • bounceAmountThe distance in pixels the arrows should bounce
  • bounceSpeedThe animation time in milliseconds for each bounce sequence
  • bounceEasingThe bounce animation's transition type:
  • bounceDelayOptional delay in milliseconds before the arrows start to bounce
  • shiftOffsetThe initial offset for the arrows
  • shiftTimingThe transition time in milliseconds
  • shiftEasingThe animation's transition type
  • shiftDelayOptional delay in milliseconds for the transition

Finally, setup your Slides with your Before/After Layers:
  • data-beforeafter"before" "after"
    Set the layer to appear in the before or after view