Trigger CSS Animation on Scroll – ScrollTrigger

Category: Animation | September 4, 2018
trigger css animation on scroll
Author: terwanerik
Official Page: Go to Website
Last Update:March 28, 2019
License:MIT

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;
}

 

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.