Scroll Animations

Unique Scrolling Animations in an easy-to-use format. The animations include a variety of settings, and the implementation comes with some powerful features like Scroll Direction, so you can choose which direction(s) the animation gets applied, the ability to pin elements of your choosing during the animation, and more.

Scrolling Animation

• Animation Type: The animation type
• Style: The variation of the chosen animation type
• Direction: The direction of the effect
• Scroll Direction: The scroll direction(s) when the animation will play
• Trigger Element: The element to use as a trigger for the animation
• Trigger Selector: A valid CSS selector. Only for a Trigger Element of type Custom
• Trigger Location:  The viewport location when the animation triggers. Defined as a percentage where the bottom of the screen is 0 and the top of the screen is 100.
• Enable Pining: Pin ( lock it into position) an Element for the duration of the animation
• Element to Pin: The element that will be pinned
• Advanced: Advanced settings
  • Disable Pin Spacing: Pining adds some temporary padding to push other elements down accordingly, so they catch up when the element gets unpinned. This option will disable the additional temporary padding.
  • Scrub: A smoothing factor for the scroll animation. Think of this as a delay for the animation relative to the scrolling, as in how many milliseconds will it take for the animation to reflect the current scroll position.
  • Ease: The type of easing to use
  • Disable At: Disable the animation at the given breakpoint and below
  • Debug Marker: Enable debug markers for the Trigger Location.