Table of Contents
Do you have a website with boring static interface? Why don’t you make it attractive with some free resources available on the web? Here are some useful CSS and JavaScript animation libraries to sparkle your website with cool animation effects. Of course you can use adobe flash to add animations to your website but it needs viewer to have flash player plugin installed therefore using javascript animation libraries is the best solution which doesn’t need any dependencies.
Also read:
List of Free and Cross-Browser CSS and JavaScript Animation Libraries
Animate.css
Animate.css by Dan Eden is a free and cross-browser CSS animation library that comes up with more than 50 animation effects such as flash, bounce, flip, fade, wobble, swing, roll in, light Speed In, light speed Out, roll in, roll out and many more. You can use these effects on any elements of your website to make it more interesting and attractive.
Using animate.css is easy, just add animate.css stylesheet in your project along with jQuery and you are ready to mingle with cool animation effects on various events including mouse click, mouse hover or automatically when your webpage gets loaded. Animate.css has a custom build option that allows you to download only those effects which you are going to use in your project instead of whole code.
Animatable
Animatable developed by Lea Verou is a free CSS3 animation library that animates the property with just two values, here is how the code looks like- data-property=”border-radius” data-from=”0″ data-to=”50%”. Isn’t it awesome and simple? See all the possible animations demos over here and download Animatable over here.
Move.js
Move.js by Vision Media is a light weight JavaScript library with eye catchy animation effects, with move.js you can implement from very basic animation to sophisticated effects such as rotate, translate, skew and scale etc.
Move.js also supports easing functions including ease in, ease out, ease in out, snap, linear and many more. Get your free copy of Move.js along with samples over here.
JStween
JStween is an advanced JavaScript animation library that comes up with additional parameters compared to Move.js for better presentation. You can animate, rotate, transform, change border radius, set transparency, add shadow to the div and even scroll your web page smoothly with JStween. Additionally it supports easing for tweens such as linear, quad, cubic and bouncy etc. to spice up the animation.
Have a look at some examples and download JStween over here.
GSAP JS
GSAP JS (GreenSock animation platform) is a fast and lightweight JavaScript animation library that comprises TweenLite, TweenMax, TimelineLite and TimelineMax. Just link to GSAP javascript from <head> section and start animating the objects you wish, if you are already familiar with TweenLite for actionscript then it becomes easier to play with it.
One more reason to choose GSAP JS is that it is faster than jQuery or any other JavaScript animation libraries. Get it here.
TweenJS
TweenJS is a free JavaScript animation library for tweening purposes. You can animate CSS properties as well as numeric object properties with TweenJS library. It allows you to apply delay and easing functions to your animations.
TweenJS zip file comes up with the library along with few samples that helps you create your own animation in minutes, check it out here.
$fx()
Fx is a free and lightweight Javascript animation library that is just 3.7 KB in size, it allows to animate CSS properties by using time line. Fx comes with attractive effect and as well as effect chains for seamless animation.
Have a look at some samples done with FX javascript animation library over here and download the library with this link.
jsAnim
jsAnim by Kevin Dolan is another free yet robust javascript animation library that can be used add impressive animations to your website. Just add main.js in your html file and start coding your animation. Download it here.
Firmin
Firmin is a free JavaScript animation library which uses CSS transforms and transitions renders outstanding animations with hardware accelerated graphics. Working with Firmin is simple, just link to Firmin JavaScript file and begin with coding for example Firmin.animate([element], [animation type], [duration]);
Get some examples and download Firmin library over here.
Emile.js
Emile.js is a free to use CSS animation JavaScript framework. By using Emile you can add animations with timing and easing effects. Here is a simple one line code to show how emile works- emile(element, style, options, after).
Download this script on github along with examples over here.
