In “15 Tools for Animation”, I presented easy to use animation tools for content marketing. But animation can also add design to a site, to improve the visitor experience.
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.
Animation tools for design
Lazy line painter is a jQuery plugin for SVG path animation. Simply drop your SVG file into the Lazy Converter and copy the code.
Animist contains a collection of predefined CSS animations to experiment with before using them. Animate entrances, exits, text, background or create highlights to grab attention.
Flubber is a library to provide a smooth animated transition between two arbitrary shapes.
Shift.css provides a simple framework for creating timed and contained CSS animations. In the Shift container, animate HTML, nested, and responsive elements.
Animate.css is a collection of cross-browser animations. Animate inputs and outputs, as well as effects for attention seekers: bounce, flash, pulse, elastic, shake, swing, tada, wobble, and jello. Use for emphasis, homepages, sliders, and overall glow.
Motion.ui. From Zurb, Motion UI is a library for quickly creating CSS transitions and animations. The main function of Motion UI is to move components in and out. Apply these transitions to overlays, out of canvas menus, modals, etc.
odious.css is an animation game with five classes: shake it, step up, fontalicious, strobe and twister.
Rocket creates animation when an element is moved to another element. It includes eight effects, including pulse, flip, circle, circle, and rotation.
CSS3 animation cheat sheet is a set of predefined animations. Choose from inputs or a variety of diverse effects including bounce, pulse, float, throw, pull up or down, and stage left or right.
Tuesday is an original CSS animation library. To sample, simply select the inputs and outputs, then click animate
CSS3 Animate is a keyframe animation generator. Create quick and easy CSS3 keyframe animation in your browser without using any desktop software.
Tridiv is a web editor for creating 3D shapes in CSS.
Overview.css is a collection of CSS3-based hover effects to apply to links, buttons, logos, SVGs, and featured images. Apply to your own elements, modify them, or use them for inspiration.
Velocity.js is an animation engine with the same API as jQuery animation. It works with and without jQuery. It’s fast and features color animation, transformations, loops, eases, SVG support, and scrolling.
SVG.js is a lightweight library for manipulating and animating SVGs. SVG.js has no dependencies and aims to be as small as possible while still providing nearly full coverage of the SVG specification.
Magical animations, another CSS3 special effects animation library, is useful for basic movements.
Choreographer.js is a simple library for complicated animations. Run animations based on the desired metric, such as scroll position, mouse position, and timestamp. Includes two built-in animation functions: Scale and Change.
Saffron is a collection of Sass mixins and wizards that make it much easier to add CSS3 animations and transitions. Include a mixin in your Sass declaration, then set any configuration using mixin variables and parameters.
Mojs.io is a mobile graphics tool belt for the web. Mojs is fast and retina ready with simple declarative APIs. Create vibrant animations, bubble layouts, and more.
CSShake provides CSS classes to move your DOM. The basic collection contains 11 shake variations.