How to spice up your site: 5 instruments for the animation in the modern WEB

Animation - one of the major trends in today's site building. Elements of animation interfaces render their usability to a new level, making them intuitive and accessible to regular users. On the Landing or, for example, corporate sites it helps to more clearly tell visitors about your product or show its advantages.

We made a selection of 5 libraries to create animations on web-sites, telling about their advantages, disadvantages and applications.

GreenSock Animation Platform

GreenSock Animation Platform  or GSAP  - this is probably one of the most functional javascript-library to animate. They say its creators, is "a new standard for HTML5 animations."It has a low barrier to entry, detailed documentation, performance, flexibility and compatibility with older browsers. An important advantage of GSAP is the fact that the library is able to "animate" not only CSS or Canvas, and any numeric variable any javascript-object.

Example code GSAP:

1 2	// увеличивает высоту и ширину картинки (html элемента) TweenLite.fromTo(photo, 1.5, {width:0, height:0}, {width:100, height:200};

On the other hand, GSAP is relatively heavy, so to create a small animation of HTML element (disappearance, appearance, Flip, etc.) is better to use more lightweight counterparts.

Tween.js

Tween.js is in addition to easel.js - one of the most popular javascript-frameworks for a comfortable and easy to work with canvas. However, tween has no dependencies and can be used together or separately from the easel.

As you probably already guessed, the main task of the library tween.js - this animation in Canvas. And it perfectly copes with it, making for you and simplify many things. For example, the code that "rides" on screen circle, changing thus its transparency:

1 2 3 4 5 6

createjs.Tween.get(circle, { loop: true })   .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))   .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))   .to({ alpha: 0, y: 225 }, 100)   .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))   .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));

But it is to animate HTML elements tween.js totally inappropriate - to deal with it the following two tools.

Move.js

Move.js - javascript-library that allows to do everything the same as tween.js, using only CSS3 and HTML5 instead of Canvas. It is not very easy (for JS), but one of the most popular. A set of pre-canned animation types (pan, tilt, rotation, and so on.) Making it also one of the easiest to use.

Example code c using Move.js:

1 2 3

move('#example-4 .box')   .rotate(140)   .end();

To view a demonstration of work and documentation is possible on thispage.

WOW.js + Animate.css

In fact, it is not real libraries or frameworks for animation, at least in the conventional sense.

Animate.css - just a CSS file that contains several dozen rules associated with animations and WOW.js - just a small script that starts the animation as you scroll the page.

However, with these two scripts are perhaps the best way to get HTML elements moving, or, in other words, to animate them.

Firstly, it decides the lightness. Total 2K and any dependencies!

Secondly, wow.js animate.css and are extremely easy to use. Most likely, you do not have to write a single line of extra JS code. Just connect these two scripts to the page and add to the item you want to animate a couple of css classes: wow classes need us and animation.

Example:

1	<img class=”wow rotateIn” src=”dog.jpg” alt=””>

Now, when the page loads instead of a static display this element is beautifully twisted:

To adjust animation using special data-attributes, for example, data-wow-duration = "2s" will set the duration of torsion in 2 seconds.

Demo, more detailed documentation and a complete list of data-attributes can be found on the official websiteWOW.js, the list of classes of animation - the official site Animate.js.

Animation means JQuery

According to statistics, almost 50% of sites are using JQuery. If your site is included in the list and you also connected the popular library, you may want to not reinvent the wheel, and use the built-in animation it means?

It can be as the standard $ .show (), $ .hide (), $ .fadeIn (), $ fadeOut, etc., and the function $ .animate (), which lets you create much more complex animations.

For more information about animation in JQuery can be read here.

It is also worth mentioning the library Velocity.js, which provides the same API for animation as JQuery, but it does not have any dependencies.It is useful to those who need animation of JQuery, JQuery but he does not need.

So, to summarize:

I want to make an animation ...

And in the Canvas, and HTML: GSAP.

Only Canvas: tween.js.

Only HTML: WOW.js + Animate.css or Move.js.

In HTML, and my site is using JQuery: JQueryEffects.