Apply Animation Class To Elements On Scroll - scrollAnimations

File Size: 10.1 KB
Views Total: 2245
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<script src="jquery.scrollAnimations.min.js"></script>

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

<link rel="stylesheet" href="">

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

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

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

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

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!

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

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

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

  offset: .5 // default .8



  • 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.