In “15 Tools for Animation,” I profiled easy-to-use animation tools for content marketing. But animation can also add design to a site, to enhance the experience of visitors.
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.
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, rubberBand, shake, swing, tada, wobble, and jello. Use for emphasis, home pages, sliders, and general flare.
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.
Obnoxious.css is an animation set with five classes: shake it, intensifies, fontalicious, strobe, and twister.
Rocket creates an animation when an item is moved to another element. It includes eight effects, including pulse, flip, circle, circle, and rotate.
CSS3 Animation Cheat Sheet is a set of preset animations. Choose from the entrances or a variety of miscellaneous effects, including bounce, pulse, floating, tossing, pull up or down, and stage left or right.
Tuesday is a quirky CSS animation library. To sample, simply select entrances and exits, then click animate
CSS3 Animate is a keyframe animation generator. Create fast and easy CSS3 keyframe animation in your browser without using any desktop software.
Tridiv is a web-based editor for creating 3D shapes in CSS.
Hover.css is a collection of CSS3-powered hover effects to apply to links, buttons, logos, SVGs, and featured images. Apply to your own elements, modify, or use for inspiration.
Velocity.js is an animation engine with the same API as jQuery’s animate. It works with and without jQuery. It is fast and features color animation, transforms, loops, easings, 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 providing close to complete coverage of the SVG spec.
Magic Animations, another library of CSS3 special effect animations, is a useful for core motions.
Choreographer.js is a simple library for complicated animations. Run animations based on whatever measurement you want, such as scroll position, mouse position, and time-stamp. Includes two built-in animation functions: Scale and Change.
Saffron is a collection of Sass mixins and helpers that make adding CSS3 animations and transitions much simpler. Include a mixin in your Sass declaration, then set any configuration using variables and mixin parameters.
Mojs.io is a mobile graphics tool belt for the web. Mojs is fast and retina-ready with simple declarative APIs. Create busting animations, bubble layouts, and more.
CSShake provides CSS classes to move your DOM. The basic collection contains 11 shake variations.