anime.js

Targets

CSS Selector

Can be any CSS selector.

Pseudo elements can't be targeted using JavaScript.

Type	Default	Example
String	`null`	`targets: '.item'`

DOM Node / NodeList

Can be any DOM Node or NodeList.

Type	Default	Example
DOM Node	`null`	`targets: el.querySelector('.item')`
NodeList	`null`	`targets: el.querySelectorAll('.item')`

JavaScript Object

A JavaScript Object with at least one property containing a numerical value.

Type	Default	Example
Object	`null`	`targets: myObjectProp`

{"charged":"0%","cycles":120}

Array

An array containing multiple targets.

Accepts mixed types. E.g. ['.el', domNode, jsObject]

Type	Default	Example
Array	`null`	`targets: ['.item', el.getElementById('#thing')]`

Properties

CSS Properties

Any CSS properties can be animated.

Most CSS properties will cause layout changes or repaint, and will result in choppy animation. Prioritize opacity and CSS transforms as much as possible.

More details about accepted values in the values section.

Example	value
`opacity`	`.5`
`left`	`'100px'`

CSS Transforms

Animate CSS transforms properties individually.

It's possible to specify different timing for each transforms properties, more details in the specific property parameters section.

More details about accepted values in the values section.

Valid properties	Default unit
`'translateX'`	`'px'`
`'translateY'`	`'px'`
`'translateZ'`	`'px'`
`'rotate'`	`'deg'`
`'rotateX'`	`'deg'`
`'rotateY'`	`'deg'`
`'rotateZ'`	`'deg'`
`'scale'`	`—`
`'scaleX'`	`—`
`'scaleY'`	`—`
`'scaleZ'`	`—`
`'skew'`	`'deg'`
`'skewX'`	`'deg'`
`'skewY'`	`'deg'`
`'perspective'`	`'px'`

Object properties

Any Object property containing a numerical value can be animated.
More details about accepted values in the values section.

Example	value
`prop1`	`50`
`'prop2'`	`'100%'`

{"prop1":0,"prop2":"0%"}

DOM Attributes

Any DOM Attributes containing a numerical value can be animated.
More details about accepted values in the values section.

Example	value
`value`	`1000`
`volume`	`0`
`data-custom`	`'3 dogs'`

SVG Attributes

Like any other DOM attributes, all SVG attributes containing at least one numerical value can be animated.
More details about accepted values in the values section and SVG animation in the SVG section.

Example	value
`points`	`'64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100'`
`scale`	`1`
`baseFrequency`	`0`

Property parameters

Duration

Defines the duration in milliseconds of the animation.

Type	Default	Example
Number	`1000`	`3000`
anime.stagger	See staggering section	`anime.stagger(150)`
Function	See function based parameters section	`(el, i) => i * 150`

3000 ms

Delay

Defines the delay in milliseconds of the animation.

Type	Default	Example
Number	`0`	`1000`
anime.stagger	See staggering section	`anime.stagger(150)`
Function	See function based parameters section	`(el, i) => i * 150`

1000 ms

end delay

Adds some extra time in milliseconds at the end of the animation.

Type	Default	Example
Number	`0`	`1000`
anime.stagger	See staggering section	`anime.stagger(150)`
Function	See function based parameters section	`(el, i) => i * 150`

1000 ms

Easing

Defines the timing function of the animation.

Check out the easings section for a complete list of available easing and parameters.

Type	Default	Example
String	`'easeOutElastic(1, .5)'`	`easing: 'easeInOutQuad'`

easeInOutExpo

Round

Rounds up the value to x decimals.

Type	Default	Example
Number	`0`	`round: 10`

Specific property parameters

Defines specific parameters to each property of the animation using an Object as value.
Other properties that aren't specified in the Object are inheritted from the main animation.

Type	Example
Object	`rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' }`

Function based parameters

Get different values for every target and property of the animation.

The function accepts 3 arguments:

Arguments	Infos
`target`	The curent animated targeted element
`index`	The index of the animated targeted element
`targetsLength`	The total number of animated targets

See staggering section for easier values manipulation.

delay = 0 * 100
delay = 1 * 100
delay = 2 * 100

Animation parameters

Direction

Defines the direction of the animation.

Accepts	Infos
`'normal'`	Animation progress goes from 0 to 100%
`'reverse'`	Animation progress goes from 100% to 0%
`'alternate'`	Animation progress goes from 0% to 100% then goes back to 0%

normal
reverse
alternate

Loop

Defines the number of iterations of your animation.

Accepts	Infos
`Number`	The number of iterations
`true`	Loop indefinitely

normal 3 times
reverse 3 times
alternate 3 times
normal inifinite
inifinite reverse
inifinite alternate

Autoplay

Defines if the animation should automatically starts or not.

Accepts	Infos
`true`	Automatically starts the animation
`false`	Animation is paused by default

autoplay: true

autoplay: false

Values

Unitless

If the original value has a unit, it will be automatically added to the animated value.

Type	Example
Number	`translateX: 250`

Specific unit

Forces the animation to use a certain unit and will automatically convert the initial target value.

Conversion accuracy can vary depending of the unit used.
You can also define the initial value of the animation directly using an array, see the from to values section.

Type	Example
String	`width: '100%'`

Relative

Adds, substracts or multiplies the original value.

Accepts	Effect	Example
`'+='`	Add	`'+=100'`
`'-='`	Substract	`'-=2turn'`
`'*='`	Multiply	`'*=10'`

Colors

anime.js accepts and converts Hexadecimal, RGB, RGBA, HSL, and HSLA color values.

CSS color codes ( e.g. : 'red', 'yellow', 'aqua' ) are not supported.

Accepts	Example
Hexadecimal	`'#FFF'` or `'#FFFFFF'`
RGB	`'rgb(255, 255, 255)'`
RGBA	`'rgba(255, 255, 255, .2)'`
HSL	`'hsl(0, 100%, 100%)'`
HSLA	`'hsla(0, 100%, 100%, .2)'`

HEX
RGB
HSL
RGBA
HSLA

From To

Forces the animation to start at a specified value.

Type	Example
`Array`	`['50%', '100%']`

Function based values

Get different values for every target and property of the animation.

The function accepts 3 arguments:

Arguments	Infos
`target`	The curently animated targeted element
`index`	The index of the animated targeted element
`targetsLength`	The total number of animated targets

Keyframes

Animation keyframes

Animation keyframes are defined using an Array, within the keyframes property.

If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.

Type	Example
`Array`	`[ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]`

Property keyframes

Similar to animation keyframes, property keyframes are defined using an Array of property Object. Property keyframes allow overlapping animations since each property have its own keyframes array.

If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.

Type	Example
`Array`	`[ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000} ]`

Staggering

Staggering basics

Staggering allows you to animate multiple elements with follow through and overlapping action.

anime.stagger(value, options)

Arguments	Type	Info	Required
Value	`Number`, `String`, `Array`	The manipulated value(s)	Yes
Options	`Object`	Stagger parameters	No

delay = (100 * 0) ms
delay = (100 * 1) ms
delay = (100 * 2) ms
delay = (100 * 3) ms
delay = (100 * 4) ms
delay = (100 * 5) ms

Start value

Starts the staggering effect from a specific value.

anime.stagger(value, {start: startValue})

Types	Info
`Number`, `String`	Same as propety values, see values section

delay = 500 + (100 * 0) ms
delay = 500 + (100 * 1) ms
delay = 500 + (100 * 2) ms
delay = 500 + (100 * 3) ms
delay = 500 + (100 * 4) ms
delay = 500 + (100 * 5) ms

Range value

Distributes evenly values between two numbers.

anime.stagger([startValue, endValue])

Type	Info
`'easingName'`	All valid easing names are accepted, see easings section
`function(i)`	Custom easing function, see custom easings section

rotate = -360 + ((360 - (-360)) / 5) * 0
rotate = -360 + ((360 - (-360)) / 5) * 1
rotate = -360 + ((360 - (-360)) / 5) * 2
rotate = -360 + ((360 - (-360)) / 5) * 3
rotate = -360 + ((360 - (-360)) / 5) * 4
rotate = -360 + ((360 - (-360)) / 5) * 5

From value

Starts the stagger effect from a specific position.

anime.stagger(value, {from: startingPosition})

Options	Type	Info
`'first'` (default)	`'string'`	Start the effect from the first element
`'last'`	`'string'`	Start the effect from the last element
`'center'`	`'string'`	Start the effect from the center
`index`	`number`	Start the effect from the specified index

Direction

Changes the order in which the stagger operates.

anime.stagger(value, {direction: 'reverse'})

Options	Info
`'normal'` (default)	Normal staggering, from the first element to the last
`'reverse'`	Reversed staggering, from the last element to the first

Easing

Stagger values using an easing function.

anime.stagger(value, {easing: 'easingName'})

Type	Info
`'string'`	All valid easing names are accepted
`function(i)`	Use your own custom easings function

Grid

Staggering values based a 2D array that allow "ripple" effects.

anime.stagger(value, {grid: [rows, columns]})

Type	Info
`array`	A 2 items array, the first value is the number of rows, the second the number of columns

Axis

Forces the direction of a grid staggering effect.

anime.stagger(value, {grid: [rows, columns], axis: 'x'})

Parameters	Info
`'x'`	Follows the x axis
`'y'`	Follows the y axis

Timeline

Timeline basics

Timelines let you synchronise multiple animations together.
By default each animation added to the timeline starts after the previous animation ends.

Creating a timeline:

var myTimeline = anime.timeline(parameters);

Argument	Type	Info	Required
`parameters`	`Object`	The default parameters of the timeline inherited by children	No

Adding animations to a timeline:

myTimeline.add(parameters, offset);

Argument	Types	Info	Required
`parameters`	`Object`	The child animation parameters, override the timeline default parameters	Yes
`time offset`	`String` or `Number`	Check out the Timeline offsets section	No

Time Offsets

Time offsets can be specified with a second optional parameter using the timeline .add() function. It defines when a animation starts in the timeline, if no offset is specifed, the animation will starts after the previous animation ends.
An offset can be relative to the last animation or absolute to the whole timeline.

Type	Offset	Example	Infos
String	`'+='`	`'+=200'`	Starts 200ms after the previous animation ends
String	`'-='`	`'-=200'`	Starts 200ms before the previous animation ends
Number	`Number`	`100`	Starts at 100ms, reagardless of the animtion position in the timeline

no offset
relative offset ('-=600')
absolute offset (400)

Parameters inheritance

Some parameters set in the parent timeline instance can be inherited by all the children.

Parameters that can be inherited
`targets`
`easing`
`duration`
`delay`
`endDelay`
`round`

Controls

Play / Pause

Plays a paused animation, or starts the animation if the autoplay parameters is set to false.

animation.play();

Pauses a running animation.

animation.pause();

Restart

Restarts an animation from its initial values.

animation.restart();

Reverse

Reverses the direction of an animation.

animation.reverse();

Seek

Jump to a specific time (in milliseconds).

animation.seek(timeStamp);

Can also be used to control an animation while scrolling.

animation.seek((scrollPercent / 100) * animation.duration);

Timeline controls

Timelines can be controled like any other anime.js instance.

timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);

Callbacks & Promises

Update

Callback triggered on every frame as soon as the animation starts playing.

Type	Parameters	Info
Function	animation	Return the current animation Object

Begin & Complete

begin() callback is triggered once, when the animation starts playing.

complete() callback is triggered once, when the animation is completed.

Both begin() and complete() callbacks are called if the animation's duration is 0.

Type	Parameters	Info
Function	animation	Return the current animation Object

loopBegin & loopComplete

loopBegin() callback is triggered once everytime a loop begin.

loopComplete() callback is triggered once everytime a loop is completed.

Type	Parameters	Info
Function	animation	Return the current animation Object

Change

Callback triggered on every frames in between the animation's delay and endDelay.

Type	Parameters	Info
Function	animation	Return the current animation Object

changeBegin & changeComplete

changeBegin() callback is triggered everytime the animation starts changing.

changeComplete() callback is triggered everytime the animation stops changing.

Animation direction will affect the order in which changeBegin() and changeComplete() are triggerd.

Type	Parameters	Info
Function	animation	Return the current animation Object

Finished promise

Every animation instances return a finished promise when the animation finised.

animation.finished.then(function() {
  // Do things...
});

Promises are not suported in IE < 11.

SVG

Motion path

Animates an element relative to the x, y and angle values of an SVG path element.

var myPath = anime.path('svg path');

The path function returns a new Function that returns the specified property.

Motion path animations are responsive since v3

Parameters	Example	Info
`'x'`	`myPath('x')`	Return the current x value in `'px'` of the SVG path
`'y'`	`myPath('y')`	Return the current y value in `'px'` of the SVG path
`'angle'`	`myPath('angle')`	Return the current angle value in `'degrees'` of the SVG path

Morphing

Creates transition between two svg shapes.

Shapes must have the same number of points!

More info on SVG shape morphing here.

Line drawing

Creates path drawing animation using the 'stroke-dashoffset' property.
Set the path 'dash-offset' value with anime.setDashoffset() in a from to formated value.

strokeDashoffset: [anime.setDashoffset, 0]

More info on line drawing animation here.

Easings

Linear

Does not apply any easing timing to your animation.
Usefull for opacity and colors transitions.

easing: 'linear'

Penner's functions

Built-in Robert Penner's easing functions.

See easings in action on easings.net.

easing: 'easeInOutSine'

Availabe easings :

in	out	in-out	out-in
`'easeInQuad'`	`'easeOutQuad'`	`'easeInOutQuad'`	`'easeOutInQuad'`
`'easeInCubic'`	`'easeOutCubic'`	`'easeInOutCubic'`	`'easeOutInCubic'`
`'easeInQuart'`	`'easeOutQuart'`	`'easeInOutQuart'`	`'easeOutInQuart'`
`'easeInQuint'`	`'easeOutQuint'`	`'easeInOutQuint'`	`'easeOutInQuint'`
`'easeInSine'`	`'easeOutSine'`	`'easeInOutSine'`	`'easeOutInSine'`
`'easeInExpo'`	`'easeOutExpo'`	`'easeInOutExpo'`	`'easeOutInExpo'`
`'easeInCirc'`	`'easeOutCirc'`	`'easeInOutCirc'`	`'easeOutInCirc'`
`'easeInBack'`	`'easeOutBack'`	`'easeInOutBack'`	`'easeOutInBack'`
`'easeInBounce'`	`'easeOutBounce'`	`'easeInOutBounce'`	`'easeOutInBounce'`

Cubic Bézier Curve

Use your own custom cubic Bézier curves cubicBezier(x1, y1, x2, y2).

easing: 'cubicBezier(.5, .05, .1, .3)'

You can use Bézier curves generator like Ceaser to generate your curves coordinates.

Spring

Spring physics based easing.

easing: 'spring(mass, stiffness, damping, velocity)'

The duration of a spring animation is defined by the spring parameters.
The animation duration parameter will not be taken into account.

Parameter	Default	Min	Max
Mass	`1`	`0`	`100`
Stiffness	`100`	`0`	`100`
Damping	`10`	`0`	`100`
Velocity	`0`	`0`	`100`

Elastic

Elastic easing.

easing: 'easeOutElastic(amplitude, period)'

in	out	in-out	out-in
`'easeInElastic'`	`'easeOutElastic'`	`'easeInOutElastic'`	`'easeOutInElastic'`

Parameter	Default	Min	Max	Info
Amplitude	`1`	`1`	`10`	Controls the overshoot of the curve. The larger this number, the more overshoot there is.
Period	`.5`	`0.1`	`2`	Controls how many times the curve goes back and forth. The smaller this number, the more times the curtain goes back and forth.

Steps

Defines the number of jumps an animation takes to arrive at its end value.

easing: 'steps(numberOfSteps)'

Parameter	Default	Min	Max
Number of steps	`10`	`1`	`∞`

Custom easing function

A custom easing function must be returned by function based value.

easing: function() { return function(time) { return time * i} }

Parameter	Info
Time	Return the current time of the animation

Helpers

remove

Removes targets from a running animation or timeline.
The targets parameters accepts the same values as the targets property.

Removes targets from all active animations.

anime.remove(targets);

Removes targets from a single animation or timeline.

animation.remove(targets);

get

Returns the original value of an element.

anime.get(target, propertyName, unit);

Since anime.js uses getComputedStyle to access original CSS, the values are almost always returned in 'px', the third (optional) argument converts the value in the desired unit.

anime.get(domNode, 'width', 'rem');

Parameter	Type	Info
target	`'string'`, `var`	Any valid targets can be used

CSS transforms : Only inlined values can be accessed.

set

Immediately sets values to the specified targets.

anime.set(targets, {property: value});

Parameters	Types	Info
target(s)	`'string'`, `var`	Any valid targets can be used
values	`object`	Any valid properties can be used

random

Returns a random integer within a specific range.

anime.random(minValue, maxValue);

tick

Plays an animation using an external requestAnimationFrame loop.

animation.tick(time)

Don't forget to set the autoplay parameter to false to prevent the anime.js built-in RAF loop to start.

running

Returns an Array of all active anime.js instances currently running.

anime.running

Suspend on visibility change

anime.suspendWhenDocumentHidden = false; // default true

By default all animations are paused when switching tabs, useful if you want to make sure the user sees everything and doesn't miss an important part of your animation.
But you can choose to let the animation runs normally without any pause, like a video or an audio track that can continuously plays in the background.