This article was published 9 years ago, therefore the contents of this post may be out of date.

It doesn’t matter whether you wanting to manipulate SVG, audio, events, local storage or animation, we can say thanks to all JavaScript Libraries as they perform a countless amount of tasks for us, not only these libraries make our lives easier but these libraries allow us to accomplish tasks in our busy work life.

JavaScript Libraries help every single developers in many ways in which they able to help us developers create website and apps. In this roundup we will focus on JavaScript Libraries which help us to create animated content for our site builds. The particular libraries will be focusing on

1. Famous

Famous-Engine

This powerful JavaScript library for designing modern animations is an event-based system which updates transforms easily, thus rendering smooth animation and transition effects. Famous also features a 3D physics engine for creating custom animations and animated simulations. You can include various types of physical bodies, such as point particles and 3D boxes as well as bind different attributes (forces and constraints) to objects like gravity, drag and collision.

2. Bounce

Bounce-js

Bounce.js is a robust JavaScript library for creating cool animations powered by CSS3. You can design various animated and motion effects, such as spin, rotate, to and fro motion, swoosh effect and more.

3. TweenJS

tween-js

Tween.js from Create.js is a JavaScript tweening library, this library is primarily used for tweening both numeric and non-numeric objects as well as for tweening and animating, HTML, JavaScript and CSS properties.  Tween.js is used for applying various animation effects, such as easing and delay effects as well as for sequencing multiple tweens.

4. Velocity.js

Velocity-js

Velocity.js is an advanced JavaScript animation library that has a plethora of features, where you can choose from a variety of commands and options, such as looping, delaying, easing, reversing, queueing and more. Moreover, Velocity.js offers modern animation features like slides, scaling, rotation, color animation and SVG element animation.

5. Dynamic.js

Dynamics-JS

Dynamics.js is another great JavaScript library for designing Physics-based animations, this library allows you to animate CSS and SVG properties of any DOM element, ie. JavaScript object or a range of other elements. This library is used for designing interactive menu bars, syncing spinners, loaders, buttons. The Dynamic.js library offers various animation types as well as options for customisation, such as frequency, bounciness, rotation, friction, duration and more.

6. CTA.js

CTA-Call-To-Action-JS

CTA.js or Call to Action is a light weight library for animating elements on a web page for creating “Action-to-Effect” paths. It can be used for navigation in a tile-based application, opening modal windows or sidebars on button clicks and more.

7. Snabbt.js

snabbt-js

snabbt.js is a minimalistic JavaScript animation library. Snabbt primary focuses on moving things around, it will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. and the end result is then set via CSS3 transform matrices.

8. Rekapi

Rekapi-JS

Rekapi is aJavaScript library used for CSS key frame animation as well as DOM animation with JavaScript. Rekapi is popular for its usefulness in designing complex animations. You can use Rekapi for creating animated pie charts and graphs, confetti, interactive timelines and user interfaces.

 

 

Share

Creating Awesome Animations with these JavaScript Libraries