Download Demo
Scrollissimo is a javascript plugin for smooth scroll-controlled animations.
Scrollissimo animates Greensock’s tweens and timelines on user’s scroll.
1. INCLUDE JS FILES
2. JAVASCRIPT
3. ANIMATE SOMETHING
Let we have a div called Divy:
Now we will animate Divy’s width. At the begining of page its width
will be equal to 50px. And as we scroll its width will be grow up to
300px after we have scrolled for 1000 pixels. The first let’s create
Grensock’s tween.
TweenLite.to(element:object, durationInPixels: number, params: object);
NOTE: As you see it`s usual Greensock`s Tween except of duration of animation ***must be specified in pixels not in seconds.
Then we need to add this tween to Scrollissimo.
The second argument is start scroll value in pixels. The third
argument is a maximal speed of this animation. 1 approximately equal to
6% of tween’s length per second. You must find your own value for each
animation.
That is all you need to do to make a simple animation.
<script src="scrollissimo/dist/scrollissimo.min.js"></script><script src="scrollissimo/dist/scrollissimo.touch.min.js"></script> |
$(document).ready(function(){ $(window).scroll(function(){ Scrollissimo.knock(); });}); |
Let we have a div called Divy:
<div id="Divy"></div>
#Divy{
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
background: red;
}
TweenLite.to(element:object, durationInPixels: number, params: object);
var divyTween = TweenLite.to(document.getElementById('divy'), 1000, { width: 300 });
Then we need to add this tween to Scrollissimo.
Scrollissimo.add(<Tween|Timeline>, <StartPixels>, <MaxSpeed>); |
Scrollissimo.add(divyTween, 0, 6);
