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.
- 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 Bézier curve easing.
| Chrome | Safari | IE / Edge | Firefox | Opera |
|---|---|---|---|---|
| 24+ | 6+ | 10+ | 32+ | 15+ |
$ npm install animejs
# OR
$ bower install animejsimport 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
});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] |
| 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
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 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
});
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%
});
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
});
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'
});
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 |
| easing | 'easeOutElastic' |
function |
See Easing functions |
| elasticity | 500 |
number, function |
Range [0 - 1000] |
| round | false |
number, boolean, function |
Power of 10 |
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
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
Parameters relative to the animation to specify the direction, the number of loops or autoplay.
| 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
Defines the end value of the animation.
Start value is the original target value, or default transforms value.
| Types | Examples | Infos |
|---|---|---|
| Number | 100 |
Automatically add original or default unit if needed |
| String | '10em', '1turn', 'M21 1v160', '50%' |
Must contains at least one numerical value |
| Relative values | '+=100px', '-=20em', '*=4' |
Add, subtract or multiply the original property value |
| Colors | '#FFF', 'rgb(255,0,0)', 'hsl(100, 20%, 80%)' |
Accepts 3 or 6 hex digit, rgb, or hsl values |
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
});
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
Same as function based property parameters.
Get different values for every target and property 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 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
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
offset defines the starting time of an animation on the timeline.
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
});
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
});Play, pause, restart, seek animations or timelines.
var playPauseAnim = anime({
targets: 'div',
translateX: 250,
direction: 'alternate',
loop: true,
autoplay: false // prevent the instance from playing
});
playPauseAnim.play(); // Manually play
playPauseAnim.pause(); // Manually pause
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
var reverseAnim = anime({
targets: 'div',
translateX: 250,
direction: 'alternate',
loop: true
});
reverseAnim.reverse(); // Change the animation direction
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
Execute a function at the beginning, during or when an animation or timeline is completed.
| Names | Types | Arguments | Info |
|---|---|---|---|
| update | function |
animation Object |
Called at time = 0 |
| begin | function |
animation Object |
Called after animation delay is over |
| complete | function |
animation Object |
Called only after all the loops are completed |
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 %
}
});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.
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);
}
});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.
myAnimation.finished returns a Promise object which will resolve once the animation has finished running.
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`
});
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.
Line drawing animation of an SVG shape:
anime({
targets: '.shape path',
strokeDashoffset: [anime.setDashoffset, 0]
});The easing parameter can accept either a string or a custom Bézier curve coordinates (array).
| Types | Examples | Infos |
|---|---|---|
| String | 'easeOutExpo' |
Built in function names |
Array |
[.91,-0.54,.29,1.56] | Custom Bézier curve coordinates ([x1, y1, x2, y2]) |
Linear easing: 'linear'
Penner's equations:
| easeIn | easeOut | easeInOut |
|---|---|---|
| easeInQuad | easeOutQuad | easeInOutQuad |
| easeInCubic | easeOutCubic | easeInOutCubic |
| 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]
});Define a Bézier curve with an Array of 4 coordinates:
anime({
targets: 'div',
translateX: 100,
easing: [.91,-0.54,.29,1.56]
});Custom Bézier curves coordinates can be generated here https://matthewlein.com/ceaser/
➜ Custom Bézier curves example
Expand the built in easing functions from anime.easings.
// Add custom function
anime.easings['myCustomEasingName'] = function(t) {
return Math.pow(Math.sin(t * 3), 3);
}
// Usage
anime({
targets: 'div',
translateX: 100,
easing: 'myCustomEasingName'
});
// add custom Bézier curve function
anime.easings['myCustomCurve'] = anime.bezier([.91,-0.54,.29,1.56]);
// Usage
anime({
targets: 'div',
translateX: 100,
easing: 'myCustomCurve'
});➜ Custom easing functions example
Change all animations speed (from 0 to 1).
anime.speed = .5; // Slow down all animations by half of their original speedReturn an Array of all active Anime instances.
anime.running;Remove one or multiple targets from the animation.
anime.remove('.item-2'); // Remove all elements with the class 'item-2'Get current valid value from an element.
anime.getValue('div', 'translateX'); // Return '100px'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)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.setDashoffset, 0]
});Return the complete list of built in easing functions
anime.easings;Return a custom Bézier curve easing function
anime.bezier(x1, x2, y1, y2); // Return function(t)Create a timeline to synchronise other Anime instances.
var timeline = anime.timeline();
timeline.add([instance1, instance2, ...]);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.