JS Scroll Animator

Overview

The js-scroll-animator module is used to trigger CSS transitions and/or CSS animations once the user scrolls within a certain distance of an element.

Specifically, an element with the class js-scroll-animator will be given the styling support class is-animated once the element enters the top 80% of the screen height, or any proportion of the screen height as defined by the data-scroll-animator-triggerhook attribute.

This module relies on the ScrollMagic library, so you'll need to have it loaded in before js-scroll-animator is initialized. Specifically, you'll need the following files, loaded in this order:

  • ScrollMagic.min.js
  • jquery.ScrollMagic.min.js
  • debug.addIndicators.min.js

Use of the is-animated Class

If using a CSS transition, the modified style rules should be written inside a &:not(.is-animated) selector, while the transition property itself should be written on the element, like so:

Alternatively, if using a CSS animation, the animation property should be written inside a &.is-animated selector, like so:

Settings

data-scroll-animator-triggerhook

This value controlls the triggerHook* for the ScrollMagic scene that adds the is-animated class. Default is 0.8.

*In ScrollMagic, the triggerHook is the proportion of the screen height that is above the trigger for a scroll Scene. Use 0 if you want to trigger a Scene when its triggerElement reaches the top of the screen. Use 1 if you want to trigger a Scene when its triggerElementreaches the bottom of the screen. Use 0.5 for the middle of the screen, et cetera.

Examples

Basic Fade In

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Custom triggerHook

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.