Skip to content
Javascript plugin for smooth scroll-controlled animations
JavaScript
Branch: master
Clone or download
Latest commit 4100062 Jan 19, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist src and dist filders Jan 16, 2017
src src and dist filders Jan 16, 2017
test src and dist filders Jan 16, 2017
.eslintignore ES2015 Feb 13, 2016
.eslintrc.js xo-codestyle Jan 16, 2017
.gitignore ES2015 Feb 13, 2016
.npmignore published to npm Jan 19, 2017
.travis.yml – Bower Feb 13, 2016
README.md published to npm Jan 19, 2017
gulpfile.js src and dist filders Jan 16, 2017
package.json 0.7.0 Jan 19, 2017

README.md

Scrollissimo

Build Status

Javascript plugin for smooth scroll-controlled animations

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

Comparing Scrollissimo and another usual plugins here.

Get started

Download

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

npm 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>

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.

TweenLite.to(element:object, durationInPixels: number, params: object);

more in Greensock`s documentation

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 value of changing scrollTop.

scrollissimo.add(divyTween, 0, 25);

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

Animating timelines is similar to tween`s animating.

You can’t perform that action at this time.