anim8js

The ultimate javascript animation library. Animate everything - from HTML elements to objects like circles, sprites, or skeletons.

It's as easy as anim8( button ).play('tada ~0.5s 1.5s x4 z100ms ease-inout') - which plays the tada animation in 1.5 seconds after waiting 0.5 seconds 4 times with a 100 ms break in between using the easing function ease-inout.

Attributes can be animated along a path, by using spring forces, or physical forces. Attributes can be animated together or separately. The values that define the paths, spring, and physical forces can be a constant value (ex: 0, {x:2, y:5}), a function which is evaluated during animation, a function which is evaluated at the beginning of an animation, the current value, or a value relative to the current value.

Download Stats

• NPM

Documentation

• Developer Guide
• Examples

Installation

• Bower: bower install anim8js
• Node: npm install anim8js
• CDN: <script src="https://cdn.jsdelivr.net/npm/anim8js@1/build/anim8js.min.js"></script>
• Download: anim8js or anim8js minified

Extensions

• anim8js-dom - animate HTML elements
• anim8js-jquery - animate HTML elements with jQuery
• anim8js-animate.css - animate.css inspired animations for HTML elements
• anim8js-pixi - animate PixiJS display objects & shaders
• anim8js-easel - animate EaselJS objects
• anim8js-scrollmagic - animate ScrollMagic

Features

• Create your own animations
• Play animations by name, name & modifiers, or by custom definition
• Queue animations
• Transition into a new animation in 6 different ways
• Play multiple animations at once over different attributes
• Springs forces on an attribute given some rest value
• Sequential animations involving multiple subjects
• Defer animation commands until an event occurs
• Save animations to be used later
• Modify animations with a delay, duration, repeats, sleeping between repeats, scale, and easing
• Relative values (ex: '+20', '-100')
• Apply physical forces (velocity and/or acceleration) to an attribute
• An attribute can follow a path of points
• Keyframe animations
• Values used in paths, springs, and physics can be constants, functions that return a value at the beginning of the animation, functions that return a live value during the animation, or a value relative to the current value.

FAQ

What are valid animation durations, delays, & sleeps?

A number of milliseconds or a string with a number followed by any of the following units: ms, s, c, cs, third, jiffy, sec, m, min, h, hr

What are valid animation repeats?

A number or any of the following strings: inf, infinity, infinite, once, twice, thrice, dozen, random

What are valid easings?

• A function which accepts a delta value and returns a new delta value.
• A string which is the name of an existing easing in anim8.Easings.
• A string in the format of easing-easingType where easing is an existing easing in anim8.Easings and easingType is an existing type in anim8.EasingsTypes like in, out, inout, or pong. An example is 'sqrt-inout'.
• An array of 4 values which represent control points for a bezier curve.

How do I override any default values?

You can find the following defaults in anim8.Defaults:
duration, easing, teasing, delay, sleep, repeat, scale, transitionTime, transitionDelta, transitionIntoDelta, transitionEasing, cache

How do I add my own ______

• Easing: anim8.Easings.myCustomEasing = function(x) { ... };
• Path: anim8.Paths.myCustomPath = function(pathDefinition) { ... return instance of anim8.Path ... };
• Spring: anim8.Springs.myCustomSpring = function(springDefinition) { ... return instance of anim8.Spring ... };
• Builder: anim8.Builders.myCustomParser = instance of anim8.Parser;
• Animation: anim8.save( 'myAnimationName', animation definition );
• Calculator: anim8.Calculators.myCustomCalculator = instance of anim8.Calculator;