jQuery Plugin For Scrolling Animated Rendering Triggered In Viewport

RisingSun is a jQuery plugin that can start some kind of animation when entering a viewport.

animate on scroll jquery plugin, animate when scrolled into view jquery, one page scroll animation jquery, scrollmagic animate on scroll, scroll based animation

Object Detection in Viewport and Smooth Scrolling With Parallax Effects | Locomotive Scroll

How to make use of it:

1. Load the jQuery plugin risingsun after you have the jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/lib/jquery.risingSun.js"></script>

2. Download the jQuery thinning plugin for additional mitigation effects.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Call the plugin on the element and set up the animation to play.

$("#ELEMENT").RisingSun({
  // OPTIONS HERE
});

4. All default options and callback functions.

// animation speed
duration: 500,

// Animation will start after this value (ms)
timer: false, 

// starting position at Viewport(top 0.0- bottom 1.0)
startPosition: 0.5,

// starting position X(diff) for moving Animation
x: 0 

// starting position Y(diff) for moving Animation
y: 0, //

// starting scale for scaling Animation
scale: 1, //	is  [Default 1.0]

// easing options
ease: 'linear' ,

// wipe animation("TB" or "LR")
wipe: false , 

// start opacity
fadeStart: 0,

// end opacity
fadeEnd: 1, 

// Pop Up Animation ('true/false' or scaling factor)
popanime: false,

// replays animation
replay: true, 

// function called when animation is sarted
onWakeup: function(){}, 

// functioni called when animation is finished
onComplete: function(){},

// function called when replay
onReplay:  function(){}

Viewport Triggered Scroll Animations, RisingSun jQuery PlugIn/Github