anime.
js
Anime (/n..me/) is a lightweight JavaScript animation
library. It works with any CSS Properties, individual CSS
transforms, SVG or any DOM attributes, and JavaScript
Objects.
Migrating from v1.x ? Make sure to read the changelog
Main features
Keyframes: Chain multiple animation properties.
Timeline: Synchronize multiple instances together.
Playback controls: Play, pause, restart, seek animations or timelines.
CSS transforms: Animate CSS transforms individually.
Function based values: Multiple animated targets can have individual value.
SVG Animations: Motion path, line drawing and morphing animations.
Easing functions: Use the built in functions or create your own Cubic Bzier curve easing.
Demos and examples
CodePen demos and examples
juliangarnier.com
animejs.com
kenzo.com/en/thejunglebook
Stress test
Browser support
Chrome Safari IE / Edge Firefox Opera
24+ 6+ 10+ 32+ 15+
Usage
$ npm install animejs# OR
$ bower install animejs
import anime from 'animejs'
Or manually download and link anime.min.js in your HTML:
<script src="anime.min.js"></script>
Then start animating:
anime({
targets: 'div',
translateX: [
{ value: 100, duration: 1200 },
{ value: 0, duration: 800 }
],
rotate: '1turn',
backgroundColor: '#FFF',
duration: 2000,
loop: true
});
API
Targets
The targets property defines the elements or JS Objects to animate.
Types Examples
CSS Selectors 'div', '.item', 'path', '#el path' ...
DOM Element document.querySelector('.item')
NodeList document.querySelectorAll('.item')
Object {prop1: 100, prop2: 200}
Array ['div', '.item', domNode]
Targets examples
Animatable properties
Types Examples
CSS opacity, backgroundColor, fontSize ...
Transforms translateX, rotate, scale ...
Object properties Any Object property containing numerical values
DOM attributes Any DOM attributes containing numerical values
SVG attributes Any SVG attributes containing numerical values
Animatable properties examples
CSS
Any CSS properties can be animated:
anime({
targets: 'div',
left: '80%', // Animate all divs left position to 80%
opacity: .8, // Animate all divs opacity to .8
backgroundColor: '#FFF' // Animate all divs background color to #FFF
});
CSS properties example
Individual CSS transforms
CSS transforms can be animated individually:
anime({
targets: 'div',
translateX: 250, // Animate all divs translateX property to 250px
scale: 2, // Animate all divs scale to 2
rotate: '1turn' // Animate all divs rotation to 1 turn
});
CSS Transforms example
JavaScript Object properties
Any Object property containing a numerical value can be animated:
var myObject = {
prop1: 0,
prop2: '0%'
anime({
targets: myObject,
prop1: 50, // Animate the 'prop1' property from myObject to 50
prop2: '100%' // Animate the 'prop2' property from myObject to 100%
});
Object properties example
DOM Attributes
Any DOM Attribute containing a numerical values can be animated:
<input value="0">
anime({
targets: input,
value: 1000 // Animate the input value to 1000
round: 1 // Remove decimals by rounding the value
});
DOM Attributes example
SVG Attributes
Any SVG Attribute containing a numerical values can be animated:
<svg width="128" height="128" viewBox="0 0 128 128">
<polygon points="64 68.73508918222262 8.574 99.9935923731656
63.35810017508558 67.62284396863708 64 3.993592373165592
64.64189982491442 67.62284396863708 119.426
99.9935923731656"></polygon>
</svg>
anime({
targets: 'polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});
SVG Attributes example
Property parameters
Defines duration, delay and easing for each property animations.
Can be set globally, or individually to each properties:
Names Defaults Types Info
duration 1000 number, function millisecond
delay 0 number, function millisecond
See Easing
easing 'easeOutElastic' function
functions
elasticity 500 number, function Range [0 - 1000]
number, boolean,
round false Power of 10
function
anime({
translateX: {
value: 250,
duration: 800
},
rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine'
},
scale: {
value: 2,
duration: 1600,
delay: 800,
easing: 'easeInOutQuart'
},
delay: 250 // All properties except 'scale' inherit 250ms delay
});
Property parameters examples
Function based property parameters
Get different property parameters for every target of the animation.
The function accepts 3 arguments: target, index, targetsLength.
anime({
targets: 'div',
translateX: 250,
rotate: 180,
duration: function(target) {
// Duration based on every div 'data-duration' attribute
return target.getAttribute('data-duration');
},
delay: function(target, index) {
// 100ms delay multiplied by every div index, in ascending order
return index * 100;
},
elasticity: function(target, index, totalTargets) {
// Elasticity multiplied by every div index, in descending order
return 200 + ((totalTargets - index) * 200);
});
Function based parameters examples
Animation parameters
Parameters relative to the animation to specify the direction, the number of loops or
autoplay.
Names Defaults Types
Names Defaults Types
loop false number, boolean
direction 'normal' 'normal', 'reverse', 'alternate'
autoplay true boolean
anime({
targets: 'div',
translateX: 100,
duration: 2000,
loop: 3, // Play the animation 3 times
direction: 'reverse' // Play the animation in reverse
autoplay: false // Animation paused by default
});
Animation parameters examples
Property values
Single value
Defines the end value of the animation.
Start value is the original target value, or default transforms value.
Types Examples Infos
Automatically add original or
Number 100
default unit if needed
'10em', '1turn', 'M21 Must contains at least one
String
1v160', '50%' numerical value
Relative Add, subtract or multiply the
'+=100px', '-=20em', '*=4'
values original property value
'#FFF', 'rgb(255,0,0)', Accepts 3 or 6 hex digit, rgb,
Colors
'hsl(100, 20%, 80%)' or hsl values
Values examples
anime({
targets: 'div',
translateX: 100, // Add 'px' by default (from 0px to 100px)
rotate: '1turn', // Use 'turn' as unit (from 0turn to 1turn)
scale: '*=2', // Multiply the current scale value by 2 (from 1 to (1
* 2))
backgroundColor: '#FFF', // Animate the background color to #FFF (from
'rgb(0,0,0)' to 'rgb(255,255,255)')
duration: 1500
});
From > To values
Force the animation to start at a certain value.
anime({
targets: 'div',
translateX: [100, 200], // Translate X from 100 to 200
rotate: ['.5turn', '1turn'], // Rotate from 180deg to 360deg
scale: ['*=2', 1], // Scale from 2 times the original value to 1,
backgroundColor: ['rgb(255,0,0)', '#FFF'], // Will transition the
background color from red to white
duration: 1500
});
Specific initial value example
Function based values
Same as function based property parameters.
Get different values for every target of the animation.
The function accepts 3 arguments: target, index, targetsLength.
anime({
targets: 'div',
translateX: function(el) {
return el.getAttribute('data-x');
},
translateY: function(el, i) {
return 50 + (-50 * i);
},
scale: function(el, i, l) {
return (l - i) + .25;
},
rotate: function() { return anime.random(-360, 360); },
duration: function() { return anime.random(800, 1600); },
delay: function() { return anime.random(0, 1000); }
});
Function based value example
Keyframes
Keyframes are defined using an Array of property Object.
Instance's duration is divided by the number of keyframes of each properties if not
specified.
anime({
targets: 'div',
translateX: [
{ value: 250, duration: 1000, delay: 500, elasticity: 0 },
{ value: 0, duration: 1000, delay: 500, elasticity: 0 }
],
translateY: [
{ value: -40, duration: 500, elasticity: 100 },
{ value: 40, duration: 500, delay: 1000, elasticity: 100 },
{ value: 0, duration: 500, delay: 1000, elasticity: 100 }
],
scaleX: [
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 },
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900, elasticity: 300 }
],
scaleY: [
{ value: [1.75, 1], duration: 500 },
{ value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 },
{ value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 }
});
Specific keyframes properties example
Timeline
Basic timeline
Play animations in sequence by creating a timeline:
var myTimeline = anime.timeline();
A timeline accepts the same parameters as an animation: direction, loop and
autoplay.
var myTimeline = anime.timeline({
direction: 'alternate',
loop: 3,
autoplay: false
});
Add animations to the timeline with .add() :
myTimeline
.add({
targets: '.square',
translateX: 250
})
.add({
targets: '.circle',
translateX: 250
})
.add({
targets: '.triangle',
translateX: 250
});
Access timeline children animations with myTimeline.children
Basic timeline example
Timeline animations offsets
offset defines the starting time of an animation on the timeline.
Relative offset
Defines starting time relative to the previous animations duration.
Types Examples Infos
+= '+=100' Starts 100ms after the previous animation ends
-= '-=100' Starts 100ms before the previous animation ends
*= '*=2' Starts at 2 times the previous animations duration
myTimeline
.add({
targets: '.square',
translateX: 250
})
.add({
targets: '.circle',
translateX: 250,
offset: '-=600' // Starts 600ms before the previous animation ends
})
.add({
targets: '.triangle',
translateX: 250,
offset: '-=800' // Starts 800ms before the previous animation ends
});
Relative offset example
Absolute offset
Defines an absolute starting time on the timeline with a number.
myTimeline
.add({
targets: '.square',
translateX: 250,
offset: 1000 // Starts at 1000ms
})
.add({
targets: '.circle',
translateX: 250,
offset: 500 // Starts at 500ms
})
.add({
targets: '.triangle',
translateX: 250,
offset: 0 // Starts at 0ms
});
Absolute offset example
Playback controls
Play, pause, restart, seek animations or timelines.
Play / Pause
var playPauseAnim = anime({
targets: 'div',
translateX: 250,
direction: 'alternate',
loop: true,
autoplay: false // prevent the instance from playing
});
playPauseAnim.play(); // Manually playplayPauseAnim.pause(); //
Manually pause
Play / Pause example
Restart
var restartAnim = anime({
targets: 'div',
translateX: 250,
direction: 'alternate',
loop: true,
autoplay: false
});
restartAnim.restart(); // Restart the animation and reset the loop count
/ current direction
Restart example
Reverse
var reverseAnim = anime({
targets: 'div',
translateX: 250,
direction: 'alternate',
loop: true
});
reverseAnim.reverse(); // Change the animation direction
Reverse example
Seek
Change animations or timelines current time.
var seekAnim = anime({
targets: 'div',
translateX: 250,
delay: function(el, i, l) { return i * 100; },
elasticity: 200,
autoplay: false
});
seekAnim.seek(500); // Set the animation current time to 500ms
Seek example
Callbacks
Execute a function at the beginning, during or when an animation or timeline is
completed.
Names Types Arguments Info
animation
update function Called at time = 0
Object
animation
begin function Called after animation delay is over
Object
animation Called only after all the loops are
complete function
Object completed
Callbacks examples
Update
update() is called on every frame while the instance is playing.
var myAnimation = anime({
targets: '#update .el',
translateX: 250,
delay: 1000,
update: function(anim) {
console.log(anim.currentTime + 'ms'); // Get current animation time
with `myAnimation.currentTime`, return value in ms.
console.log(anim.progress + '%'); // Get current animation progress
with `myAnimation.progress`, return value in %
});
Update example
Begin
begin() is called once after the delay is finished.
var myAnimation = anime({
targets: '#begin .el',
translateX: 250,
delay: 1000,
begin: function(anim) {
console.log(anim.began); // true after 1000ms
});
Check if the animation has begun with myAnimation.began, return true or false.
Begin example
Run
run() is called every frame after the delay is finished.
var myAnimation = anime({
targets: '#run .el',
translateX: 250,
delay: 1000,
run: function(anim) {
console.log(anim.currentTime);
});
Run example
Complete
complete() is called once after the animation is finished.
var myAnimation = anime({
targets: '#complete .el',
translateX: 250,
complete: function(anim) {
console.log(anim.completed);
});
Check if the animation has finished with myAnimation.completed, return true or
false.
Complete example
Promises
myAnimation.finished returns a Promise object which will resolve once the
animation has finished running.
Promises example
SVG
Motion path
Translate and rotate DOM elements along an SVG path:
// Create a path `Object`var path = anime.path('#motionPath path');
var motionPath = anime({
targets: '#motionPath .el',
translateX: path('x'), // Follow the x values from the path `Object`
translateY: path('y'), // Follow the y values from the path `Object`
rotate: path('angle') // Follow the angle values from the path
`Object`
});
Motion path example
Morphing
Animate the transition between two SVG shapes:
<svg class="shape" width="128" height="128" viewBox="0 0 128 128">
<polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68
119.426 100"></polygon>
</svg>
var svgAttributes = anime({
targets: '.shape polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});
Shapes need to have the same number of points.
Morphing example
Line drawing
Line drawing animation of an SVG shape:
anime({
targets: '.shape path',
strokeDashoffset: [anime.setDashoffset, 0]
});
Line drawing example
Easing functions
The easing parameter can accept either a string or a custom Bzier curve coordinates
(array).
Types Examples Infos
String 'easeOutExpo' Built in function names
Custom Bzier curve coordinates ([x1, y1, x2,
Array [.91,-0.54,.29,1.56]
y2])
Built in functions
Linear easing: 'linear'
Penner's equations:
easeIn easeOut easeInOut
easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeIn easeOut easeInOut
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInSine easeOutSine easeInOutSine
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInBack easeOutBack easeInOutBack
easeInElastic easeOutElastic easeInOutElastic
Built in easing functions examples
Usage:
anime({
targets: 'div',
translateX: 100,
easing: 'easeOutExpo' // Default 'easeOutElastic'
});
Elasticity of Elastic easings can be configured with the elasticity parameters:
anime({
targets: 'div',
translateX: 100,
easing: 'easeOutElastic',
elasticity: 600 // Default 500, range [0-1000]
});
Elasticity examples
Custom Bzier curves
Define a Bzier curve with an Array of 4 coordinates:
anime({
targets: 'div',
translateX: 100,
easing: [.91,-0.54,.29,1.56]
});
Custom Bzier curves coordinates can be generated here
https://matthewlein.com/ceaser/
Custom Bzier curves example
Defining custom functions
Expand the built in easing functions from anime.easings.
// Add custom functionanime.easings['myCustomEasingName'] = function(t)
{
return Math.pow(Math.sin(t * 3), 3);
// Usageanime({
targets: 'div',
translateX: 100,
easing: 'myCustomEasingName'
});
// add custom Bzier curve functionanime.easings['myCustomCurve'] =
anime.bezier([.91,-0.54,.29,1.56]);
// Usageanime({
targets: 'div',
translateX: 100,
easing: 'myCustomCurve'
});
Custom easing functions example
Helpers
anime.speed = x
Change all animations speed (from 0 to 1).
anime.speed = .5; // Slow down all animations by half of their original
speed
anime.running
Return an Array of all active Anime instances.
anime.running;
anime.remove(target)
Remove one or multiple targets from the animation.
anime.remove('.item-2'); // Remove all elements with the class 'item-2'
anime.getValue(target, property)
Get current valid value from an element.
anime.getValue('div', 'translateX'); // Return '100px'
anime.path(pathEl)
Create a path Function for motion path animation.
Accepts either a DOM node or CSS selector.
var path = anime.path('svg path', 'translateX'); // Return
path(attribute)
Motion path example
anime.setDashoffset(pathEl)
An helper for line drawing animation.
Sets the 'stroke-dasharray' to the total path length and return its value.
anime({
targets: '.shape path',
strokeDashoffset: [anime.pathDashoffset, 0]
});
Line drawing example
anime.easings
Return the complete list of built in easing functions
anime.easings;
anime.bezier(x1, x2, y1, y2)
Return a custom Bzier curve easing function
anime.bezier(x1, x2, y1, y2); // Return function(t)
anime.timeline()
Create a timeline to synchronise other Anime instances.
var timeline = anime.timeline();timeline.add([instance1,
instance2, ...]);
Timeline examples
anime.random(x, y)
Generate a random number between two numbers.
anime.random(10, 40); // Will return a random number between 10 and 40
====
MIT License. 2017 Julian Garnier.
Thanks to Animate Plus and Velocity that inspired anime.js API, BezierEasing and
jQuery UI for the easing system. Tim Branyen For the Promise implementation.
