Javascript Library For Animation Scroll Interactions – ScrollAnimate

Preview:

Description:

ScrollAnimate is a JavaScript library for animation scroll interactions. Dual licensed under MIT license and GPL.

The library makes uses of Animate.css to animate any HTML elements as you scroll the webpage.

More features:

• Supports both horizontal and vertical directions.
• Allows to disable the scroll interactions on certain devices.

How to use it:

Include both Animate.css and ScrollAnimate.js on the webpage.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>
<script src="js/scrollAnimate.js"></script>

Apply the ScrollAnimate to the target elements and specify the animation type you want to use.

ScrollAnimate.add({
  // target elements
  selector: '.animated',
  // animation class
  animationClassName: 'fadeInUp',
  // offset
  offset: '10%',
  // or 'horizontal'
  scroll: 'vertical',
  // only trigger once
  triggerOnce: false,
  // disable on tablet and mobile
  disabled: ['tablet', 'mobile'],
  // delay in ms
  delay: 0,
  // duration in ms
  duration: '1000',
  // iteration count
  iterationCount: '1'
  
})