jQuery Plugin To Animate Elements While Scrolling - Animate Scroll

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

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='{  
  "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.