Scrollissimo - plugin for smooth scrolling animation

Recently, animations are gaining more and more popularity, played as the page scrolls. However, I noticed that the vast majority of browsers are not designed for such animations. Scrolling pages with the mouse in them does not occur smoothly (as in Firefox), but in steps. As a result, the scrolling animation on the pages is played in jerks too. In my opinion, the problem here is not at all in browsers, but in the plugins that are used to create these animations. Because they allow sharp jumps. I believe that for any animation there should be some kind of maximum playback speed at which the animation will be smooth, and the user will be able to understand what happened on the page. If you agree with me, then smoothly and without jerks move under cat.

This article will focus on the plugin for creating animations controlled by a scroll, which I called Scrollissimo. Its closest analogue is the ScrollMagic plugin. They have in common - their purpose and the fact that Greensock is chosen as the animation engine. If you are not familiar with it for some reason, then, perhaps, to fully understand everything that is happening, you should read the articles about Greensock, which have already appeared on Habré. For example this one .
')
In addition to the common features of these plug-ins, there are differences. But especially I would like to highlight the main thing - smooth animation. So that it does not sound unfounded here's proof to you. The ScrollMagic homepage also confirms my words.

How to use it?

We connect

In order to start using Scrollissimo you need to do two things. First, connect the Greensock. You can connect only the minimum required libraries (TweenLite, TimelineLite and CSS):

<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, connect one library containing all of the above:

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

And secondly, we connect Scrollissimo itself. The library is available from the repository. And for bower users, there is also the option to install with the command

 bower install scrollissimo 

Download, now connect:

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

Optionally, you can (but not necessarily) connect jQuery for your own convenience. Further in the article I will write code with its use for greater readability.

I provided the ability to trigger Scrollissimo not only to scroll the entire page, but also to any other event, but in most situations you need to subscribe to the page scrolling event:

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

Now, with each occurrence of the scroll event, Scrollissimo will calculate the current progress of the animations and play it.

NOTE: If you do not need the plugin to read the page itself, you can pass your scrollTop property value to the knock () method. For example, Scrollissimo.knock (1000) will tell the plugin that you have squandered 1000 pixels .

NOTE: To support tachovyh devices there is a touch-adapter scrollissimo.touch.js, which fights with the "freezing" of the page while scrolling.

Everything, now it is possible to animate directly! Scrollissimo can animate tweens (single animations) and timelines (a queue of single animations). Let's start with the twins.

Simplest animation

Let us have a beautiful red div called Divy. He really wants to grow, but for now he is only 50 pixels wide and high.

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

 #Divy{ position: fixed; top: 0; left: 0; height: 50px; width: 50px; background: red; } 

Let's make it so that after 1000 pixels from the beginning of the page it becomes 300 pixels wide. To do this, we first create the corresponding twin, as if we were doing a normal animation using Greensock:

 var divyTween = new TweenLite($('#Divy'), 1000, { width: 300 }); 

NOTE: As you noticed, the only difference from the standard animation on Greensock is that we specify the duration of the animation not in seconds, but in pixels (in our case, 1000).

Fine! It remains only to give this twin to be eaten by Scrollissimo:

 Scrollissimo.add(divyTween, 0, 6); 

Now let's slow down and analyze this line. The first argument is the same twin we created. The second argument is where to start the animation. In our case, this is the beginning of the page (0 pixels). There is a third argument. This is where we get to the main feature that distinguishes Scrollissimo from ordinary plug-ins. The third argument is the maximum animation playback speed. This speed is measured in abstract dimensionless units and is chosen "by eye". Immediately answer the question "What will happen if you do not specify the third parameter?" If you do not specify the maximum speed, then it will not be. This animation will play as well as it would play with regular plugins.

Well, our first example is ready! If you didn’t do it with me, you can see an example on jsFiddle .

Timelines

So, Divy has grown in width. How can we help him grow tall? Here we will be helped by chains of animations or, to put it in terms of Greensock, timelines. If you used them before to build animations, then there is nothing new for you here. Just as we did with the twin, we act with the timeline. jsFiddle

 var divyTimeline = new TimelineLite(); divyTimeline.to($('#Divy'),1000 { width: 300 }); divyTimeline.to($('#Divy'), 1000, { height: 300 }); Scrollissimo.add(divyTimeline, 0, 6); 

Conclusion

This is all that is needed to successfully create scroll animations using Scrollissimo. On this, perhaps, finish the article. In conclusion, I will say that the plugin is in the stage of active development, it has room to grow and to improve. Therefore, I will be glad to any questions, advice and feature quest.

Repository: https://github.com/Promo/scrollissimo

Plugin page
Greensock

Make up, animate!