10 Javascript Animation Libraries

Animation has been cemented as the most powerful tool in a web developer’s UI toolkit, animation is the driving force behind your app’s personality and visual sophistication. So here are 10 JavaScript libraries to enrich the user experience and allow you to create animations with outstanding effects.

Web Animations

Web Animations is a new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.

web-animation-4

AniJS

A Library to Raise your Web Design without Coding. The most easy and quick way to Raise your web!

anijs-8

Move.js

Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant.

movejs-2

Velocity.js

Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

velocityjs-3

Anima.js

With Anima it’s easy to animate over a hundred objects at a time. Each item can have it’s mass and viscosity to emulate reallife objects!

animajs-5

snabbt.js

snabbt.js is a minimalistic javascript animation library. It 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. The end result is then set via CSS3 transform matrices.

snabbjs-6

Collie

Collie is a Javascript library that helps to create highly optimized animations and games using HTML 5. Collie runs on both PC and mobile using HTML 5 canvas and DOM.

collie-7

slidr.js

A simple, lightweight javascript library for adding slide transitions to your page.

slidrjs-9

MotorCortex.js

MotorCortex makes web animations easy, providing the ability to describe them through CSS-like syntax and stop messing animation logic with your actual javascript code

motorcortex-10

Shifty

Shifty is a low-level animation solution. This means that it does not perform any rendering, but it can be integrated into whatever rendering mechanism is most appropriate for your project. Shifty is meant to be a simpler, more lightweight and flexible alternative to richer tools like the excellent Greensock animation platform.

shifty-1


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked