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.
Lazy Line Painter
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.
Animate.css
Popmotion is a JavaScript motion library. Animations include tween, spring, keyframes, decay, timeline, stagger, crossfade, line drawing, and more.
Animo.js is a tool for managing transitions and animations with JavaScript. Animo also features a small library of plugins, 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.
Motion UI
Snabbt.js is a minimalistic JavaScript animation library. It will translate, rotate, scale, skew, and resize your elements. The goal is to make a library that will let the user make smooth animations without needing to know much about browser rendering.
Bounce.js is a tool and JavaScript library for generating compelling CSS3 powered keyframe animations. Produce static keyframes to use without extra JavaScript. To generate these on the fly, use the Bounce.js library.
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.
Rocket
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.
Tridiv
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.
KUTE.js is a JavaScript animation engine with a collection of tools to help create custom animations. KUTE.js comes with a CSS plugin, an SVG plugin, an ATTR plugin, a Text plugin, a jQuery plugin — as well as easing functions, color converters, and utility functions. KUTE.js allows you to create tweens and chainable tweens.
KUTE.js
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.
Animae.js is a lightweight JavaScript animation library. It works with CSS properties, CSS transforms, SVG or DOM attributes, and JavaScript objects. Use keyframes, play, pause, restart, and seek animations or timelines. Additional features include CSS transforms, SVG animations, easing functions, and more.
CSShake provides CSS classes to move your DOM. The basic collection contains 11 shake variations.
CSShake