Before / After

  • 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.

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)
MINIMUM SETTINGS VERSION:

ALL POSSIBLE OPTIONS VERSION:

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: https://greensock.com/ease-visualizer
  • 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: https://greensock.com/ease-visualizer
  • 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