Text animations in websites were so popular once Flash was used widely and now, simplistic, non-animated websites that put the content in front are the way to go.

However, if used wisely, there is still room for such animations, and, a jQuery plugin named Textillate.js simplifies creating them.

The plugin makes use of Animate.css + Lettering.js and it is capable of creating lots of animations like flash, bounce, shake, pulse, fade, rotate, flip and much more.

Lazy Line Painter is a pretty original jQuery plugin for preparing and presenting SVG path animations using  jQuery.

It works for any SVG file (any design can be exported with Illustrator in seconds) and simply by drag ‘n’ dropping it to an online generator provided by the plugin.

And, after that, just insert that code into any web page and it will work.

Various options exist for customization including the stroke width, color, speed and a callback that is triggered once the animation is completed.

The plugin requires Raphaël besides jQuery and can be a nice way of presenting illustrations for graphic designers.

Liffect is a web-based generator that provides lots of different effects for list elements.

It makes use of CSS animations and requires jQuery for applying the delay in effects.

There are items fading, zooming, sliding, flipping, bouncing and, a fun one, Star Wars-inspired effect.

The website allows us to define the duration + delay and generates the necessary CSS rules instantly.

Liffect is a must-bookmark not only for copy-pasting the effects but it is also a nice reference.

Lenticular.js is a jQuery plugin for creating image animations that response to tilting or mouse events.

The plugin is built with mobile browsers in mind (tilting) but can also be used for desktop browsers (mouse).

It is pretty easy-to-setup. Just create a sequence of images (that are named like image-1.jpg, image-2.jpg), define the folder of the images and the number of the frames and you are almost done.

There are functions provided to activate/deactivate the effect, setting the axis (x,y or z) used and more.

For JavaScript and CSS-based animations, easings (the speed of the animation progresses) have a huge role in making them realistic.

Easings.net is a very useful website for understanding and using such easing functions.

Each function is displayed with a line chart where hovering them automatically runs an animation with that curve.

And, we can see how each function can be used with CSS, SCSS and JavaScript (jQuery Easing plugin).

Also, to customize them, there is a custom link for the functions that gets us to another awesome easing-related website: Cubic-Bezier.com (was featured at 3 Tools For Easier CSS3 “Transition Timing Functions” Cubic-Bezier).

oriDomi is a JavaScript library for beautifully folding up any HTML element just like a paper.

The library doesn't depend on any JavaScript frameworks (but has optional support for jQuery) and uses CSS 3D transitions for creating the effect.

Folding is performed as an animated event where the number of vertical/horizontal slices, speed and shading can all be set.

There are multiple effects and events provided: accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.

oriDomi is compatible with all modern browsers (including mobile).

SeuratJS is a plugin for the powerful Raphaël that enables us to create vivid animations and pixelated artwork.

It extracts the color information from any given image and rebuilds it in SVG with the modifications applied.

The plugin works cross-browser and can be customized with various settings (like the shape of the brush being used to re-generate images).

Photon is a JavaScript library which can add simple lighting effects to any element in the 3D space.

In order to create the effect, it uses the WebKitCSSMatrix object (WebKit is the only supported browser engine).

The angle of the light can be defined and changed anytime with the provided functions.

It is possible to define the objects to be lighted one-by-one or group them at once and we can customize the effect by setting the max black + white usage.

P.S. The effects can be resource intensive if over-used.

Almost every web designer/developer has an experience with Flash (good or bad). And, we remember how its keyframe animation engine works: you define the states of an object in any number of keyframes you wish and it handles the animation/transformation between them itself.

And, there is CSS3 @keyframe animations (CSS-Tricks has a great article on it) where the main logic is all similar but you animate an element with CSS properties.

Rekapi is a library which brings keyframe animations to JavaScript. It allows us to define the objects, keyframes, animations and control the state of the scene (play, pause, stop).

The drawing of elements is not part of the library and that process can be accomplished by the favorite solution of each developer.

Also, Rekapi can export your DOM animations to CSS3 @keyframes for enhanced performance

It is very well documented, supports a wide list of browsers and works with Node.js too.

CSS3 transitions are great and they allow us to create many stuff that we used to see only in JS.

However, compared to JavaScript alternatives, they are not flexible enough in easing functions and, even cubic-bezier (although it is pretty powerful) has its limitations.

Morf.js, is a Javascript work-around for hardware accelerated CSS3 transitions with custom easing functions including bounce, spring, elastic and much more.

Once an easing function is triggered through JavaScript, it is created using webkit-keyframes.

The library uses Shifty.js for tweening regular CSS properties and it is WebKit only.