Download Star

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 
0

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 starrering 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

Parameters set in the parent timeline instance will be inherited by all the children.

Parameters that can be inherited
targets
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.