jQuery Plugin To Animate Elements While Scrolling - Animate Scroll

File Size: 13.1 KB
Views Total: 5035
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Animate Elements While Scrolling - Animate Scroll

Yet another viewport triggered animation plugin that let you apply cool modern Greensock powered animations to Html elements on view while scrolling.

See also:

How to use it:

1. Load jQuery library and other required resources in the document.

<script src="js/jquery.min.js"></script>
<script src="js/vendor/TweenMax.min.js"></script>
<script src="js/vendor/EasePack.min.js"></script>

2. Load the jQuery Animate Scroll plugin after jQuery library.

<script src="js/animate-scroll.js"></script>

3. Add viewport triggered animations to elements using data-animate-scroll attribute as follow.

<div data-animate-scroll='{  
  "scaleX": "0",
  "scaleY": "0"

4. All the animation options.

// Parent transform perspective
transformPerspective: 1000,

// Lazy load images (experimental)
lazyLoad: false, 

// Animate elements outside of viewport?
reverse: true,

// Animate elements outside of viewport?
animateAll: false, 

// Transform origin X/Y position
transformOrigin: '50% 50%', 

// Horizontal offset in px
x: 0, 

// Vertical offset in px
y: 0, 

// Scale X position
scaleX: 1, 

// Scale Y position

// Rotation in degrees
rotation: 0, 

// Rotation X position
rotationX: 0, 

// Rotation X position
rotationY: 0, 

// Opacity from 0.0-1
alpha: 0.9, 

// Animation delay
delay: 0, 

// Z position
z: 0.1, 

// Force 3D hardware
force3D: true, 

// Animation easing type
easingType: 'Back.easeInOut',  

// Animation diration in seconds
duration: 0.3

5. Initialize the plugin.


6. Events.

// play  

// reverse 

// check 

Change log:


  • added disable reverse animation toggle

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