Apply Animation Class To Elements On Scroll - scrollAnimations

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.

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

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

  • Publication date: 14.08.2018
  • Source