Creating Scroll Based Animations With Pure JavaScript – ScrollTrigger

Category: Animation , Javascript , Recommended | July 4, 2016
Author: terwanerik
Views Total: 4,078
Official Page: Go to website
Last Update: July 4, 2016
License: MIT

Preview:

Creating Scroll Based Animations With Pure JavaScript – ScrollTrigger

Description:

ScrollTrigger is a really small (~2kb minified) JavaScript library which lets you apply scroll-triggered animations to any elements.

The goal is to add certain CSS classes to elements when they’re scrolled into view. So that you can create CSS3 powered animations whatever you like.

How to use it:

Download and include the ScrollTrigger.js on the webpage and you’re ready to go.

<script src="ScrollTrigger.min.js"></script>

Initialize the ScrollTrigger and we’re ready to go.

document.addEventListener('DOMContentLoaded', function(){
  ScrollTrigger.init();
});

Set the animations (CSS styles) and other options to the element you want to animate.

  • 200: triggers the animation at a specified scroll position (200px).
  • animateIn: CSS classed to be applied when the element is scrolled into view.
  • animateOut: CSS classes to be applied when the elements is scrolled out of view.
  • addHeight: adds the element’s height to the scroll offset.
  • once: makes sure the animation only happens once.
<div data-scroll="200 animateIn animateOut addHeight once"></div>

You Might Be Interested In:


Leave a Reply