Scrollissimo – Smooth scroll-controlled animations

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

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script src="scrollissimo/dist/scrollissimo.min.js"></script> <script src="scrollissimo/dist/scrollissimo.touch.min.js"></script>

2. JAVASCRIPT

$(document).ready(function(){         $(window).scroll(function(){             Scrollissimo.knock();         }); });

3. ANIMATE SOMETHING
Let we have a div called Divy:

<div id="Divy"></div>

#Divy{
    position: fixed;
    top: 0;
    left: 0;

    height: 50px;
    width: 50px;

    background: red;
}

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);

var divyTween = TweenLite.to(document.getElementById('divy'), 1000, { width: 300 });

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.

Scrollissimo.add(<Tween|Timeline>, <StartPixels>, <MaxSpeed>);

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.

Scrollissimo.add(divyTween, 0, 6);

That is all you need to do to make a simple animation.

Expanding Panel with jQuery and CSS3

Download Demo
A combination of very basic HTML, CSS and a little bit of jQuery you can achieve a pretty nifty, clean expanding tile. Feel free to use this concept to create your own Expanding CSS3/jQuery Panels.