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:

• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic
• jQuery Plugin To Animate Content As User Scrolls - scrollex
• jQuery Plugin To Animate Elements When They Scroll Into View - inview
• Simple jQuery Plugin To Animate Html Elements On Scroll - jScrollability
• Revealing Elements on Scroll with jQuery - scrollReveal

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='{  
  "y":"50", 
  "duration": 
  "1.75",
  "scaleX": "0",
  "scaleY": "0"
  }'>
  Element
</div>

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
scaleY:,  

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

$(document).animateScroll();  

6. Events.

// play  
$('.my-animated-element').trigger('play');

// reverse 
$('.my-animated-element').trigger('reverse');

// check 
$('.my-animated-element').trigger('check');

Change log:

2016-03-13

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