Trigger CSS Animation on Scroll – ScrollTrigger

The ScrollTrigger is a library which triggers the element on the scroll. It is built with CSS which provide smooth animation which can be applied to text or images. It is a lightweight plugin and the classes on HTML elements based on the scroll position.

It is best to use the requestAnimationFrame so it should not jack the users scroll. It allows the user/browser to keeps their original scrolling behavior.

Add Trigger Animation While Scrolling Page

It is easy to implement on the webpage. You simply need to add the ScrollTrigger.min.js file to your HTML page. Next, you need to construct a new ScrollTrigger instance when the page has loaded. Like so:

<script src="ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger();
});
</script>

It provides more advanced functions which can be used to enhance the functionality.

document.addEventListener('DOMContentLoaded', function(){
  var trigger = new ScrollTrigger({
    toggle: {
      visible: 'visibleClass',
      hidden: 'hiddenClass'
    },
    offset: {
      x: 0,
      y: 20
    },
    addHeight: true,
    once: true
  }, document.body, window);
});

To implement on HTML element, you can simply apply data-scroll an  attribute to animate:

<div data-scroll></div>

Let’s have a look at the HTML example of animated heading. You can add two different animations, one for scroll down and the second one for scroll up.

<h1 data-scroll="toggle(.fromTopIn, .fromTopOut)">Animations Content</h1>
<h2 data-scroll="toggle(.fromBottomIn, .fromBottomOut)">Power Of Animation</h2>

When the user scrolls the page down, the element is visible in the viewport and it will add the class visible. If the user out of the viewport the class invisible will be added.

.invisible {
  transition: opacity 0.5s ease;
  opacity: 0.0;
}

.visible {
  transition: opacity 0.5s ease;
  opacity: 1.0;
}