Apply Animation Class To Elements On Scroll - scrollAnimations

Yet another jQuery plugin for scroll triggered animations that automatically apply an animation class to elements when scrolled into the viewport.

How to use it:

1. Insert the minified version of the jQuery scrollAnimations plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jquery.scrollAnimations.min.js"></script>

2. I recommend you to use Animate.css for the scroll animations.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

3. Specify the animation class in the data-animation attribute:

<h1 data-animation="fadeInUp">
    Element to scroll on scroll
</h1>

4. Add a delay to the animation (OPTIONAL).

<h1 data-animation="fadeInUp"
    data-animation-delay="10ms">
    Element to scroll on scroll
</h1>

5. Hide the element on init and show the element when scrolled into view.

[data-animation] {
  opacity: 0;
}

[data-animation].animated {
  opacity: 1;
}

6. You're also allowed to apply the scroll animation to a set of elements within a container.

<div data-animation-container>

  <h1 data-animation="fadeIn" data-animation-child>
    An animation set!
  </h1>

  <div data-animation-child data-animation="fadeInUp" data-animation-delay="500ms">
    Element 1
  </div>
  <div data-animation-child data-animation="fadeInUp" data-animation-delay="1500ms">
    Element 2
  </div>
  <div data-animation-child data-animation="fadeInUp" data-animation-delay="2500ms">
    Element 3
  </div>

</div>

var $containers = $('[data-animation]:not([data-animation-child]), [data-animation-container]');
$containers.scrollAnimations();

7. Set the distance from top of viewport the scroll animation will be triggered.

$containers.scrollAnimations({
  offset: .5 // default .8
});

Changelog:

2018-11-08

• updating with better raf call

---

This awesome jQuery plugin is developed by mindgruve. For more Advanced Usages, please check the demo page or visit the official website.