Here is a list of animation tools for design. There are plugins and libraries for simple transitions and effects, as well as platforms for complex animations. All of these tools are free.

Lazy Line Painter is a j-Query   plug-in for SVG path animation. Simply drop your SVG file into the Lazy Converter and copy the code.

Animista contains a collection of pre-made CSS animations to experiment with before using. Animate entrances, exits, text, background, or create flare to draw attention.


Flubber is a library to provide a smooth animated transition between two arbitrary shapes.


Shift.css provides a simple framework to build timed, contained CSS animations. Within the Shift Container, animate HTML, nested, and adaptive elements.


Animate.css is a collection of cross-browser animations. Animate entrances and exits, as well as effects for attention seekers: bounce, flash, pulse, rubber-Band, shake, swing, tada, wobble, and  jello. Use for emphasis, home pages, sliders, and general flare.


Popmotionis a JavaScript motion library. Animations include tween, spring, key-frames, decay, timeline, stagger, cross-fade, line drawing, and more


Animo.js is a tool for managing transitions and animations with JavaScript. Animo also features a small library of plug-ins, each made to harness the power of Animo.


Bonsai.js is a lightweight JavaScript graphics library with an intuitive graphics API and an SVG renderer.


Motion.ui. From Zurb, Motion UI is a library for quickly creating CSS transitions and animations. The core function of Motion UI is to transition components in and out. Apply these transitions to overlays, off-canvas menus, modals, and more.

Leave a Reply