AlexanderPi / scrollissimo

Javascript plugin for smooth scroll-controlled animations

Javascript plugin for smooth scroll-controlled animations

Scrollissimo animates Greensock's tweens and timelines on user's scroll.

Comparing Scrollissimo and another default plugins here.

Get started

Download

Scrollissimo is available for downloading from repository. Also bower users can install Scrollissimo by command:

bower install scrollissimo

Connect

The first step you need is to include Greensock:

    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>

... or just:

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

... and Scrollissimo of course:

    <script src="scrollissimo/dist/scrollissimo.min.js"></script>

To support touch devices you also need to include touch adapter:

    <script src="scrollissimo/dist/scrollissimo.touch.min.js"></script>

Next we will trigger Scrollissimo on each scroll event:

<script>
    $(document).ready(function(){
        $(window).scroll(function(){
            Scrollissimo.knock();
        });
    });
</script>

NOTE: for touch devices support you must also attach scrollissimo.touch.min.js.

Now lets 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.

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

Then we need to add this tween to Scrollissimo.

Scrollissimo.add(divyTween, 0, 6);

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. Result you may see here.

Animating timelines is similar to tween`s animating.