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 Bézier curve easing.
Demos and examples
Browser support
Chrome | Safari | IE / Edge | Firefox | Opera |
---|---|---|---|---|
24+ | 6+ | 10+ | 32+ | 15+ |
Usage
$ npm install animejs# OR $ bower install animejs
Or manually download and link anime.min.js
in your HTML:
Then start animating:
;
API
Targets
The targets
property defines the elements or JS Object
s 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] |
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:
;
Individual CSS transforms
CSS transforms can be animated individually:
;
JavaScript Object properties
Any Object
property containing a numerical value can be animated:
var myObject = prop1: 0 prop2: '0%' ;
DOM Attributes
Any DOM Attribute containing a numerical values can be animated:
;
SVG Attributes
Any SVG Attribute containing a numerical values can be animated:
;
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 |
easing | 'easeOutElastic' |
function |
See Easing functions |
elasticity | 500 |
number , function |
Range [0 - 1000] |
round | false |
number , boolean , function |
Power of 10 |
;
➜ 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
.
;
➜ Function based parameters examples
Animation parameters
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 |
;
➜ 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 |
---|---|---|
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 |
;
From > To values
Force the animation to start at a certain value.
;
➜ 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
.
;
➜ 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.
;
➜ Specific keyframes properties example
Timeline
Basic timeline
Play animations in sequence by creating a timeline:
var myTimeline = anime;
A timeline accepts the same parameters as an animation: direction
, loop
and autoplay
.
var myTimeline = anime;
Add animations to the timeline with .add()
:
myTimeline ;
Access timeline children animations with myTimeline.children
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 ;
Absolute offset
Defines an absolute starting time on the timeline with a number.
myTimeline ;
Playback controls
Play, pause, restart, seek animations or timelines.
Play / Pause
var playPauseAnim = ; playPauseAnim; // Manually playplayPauseAnim; // Manually pause
Restart
var restartAnim = ; restartAnim; // Restart the animation and reset the loop count / current direction
Reverse
var reverseAnim = ; reverseAnim; // Change the animation direction
Seek
Change animations or timelines current time.
var seekAnim = ; seekAnim; // Set the animation current time to 500ms
Callbacks
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
update()
is called on every frame while the instance is playing.
var myAnimation = ;
Begin
begin()
is called once after the delay is finished.
var myAnimation = ;
Check if the animation has begun with myAnimation.began
, return true
or false
.
Run
run()
is called every frame after the delay is finished.
var myAnimation = ;
Complete
complete()
is called once after the animation is finished.
var myAnimation = ;
Check if the animation has finished with myAnimation.completed
, return true
or false
.
Promises
myAnimation.finished
returns a Promise object which will resolve once the animation has finished running.
SVG
Motion path
Translate and rotate DOM elements along an SVG path:
// Create a path `Object`var path = anime; var motionPath = ;
Morphing
Animate the transition between two SVG shapes:
var svgAttributes = ;
Shapes need to have the same number of points.
Line drawing
Line drawing animation of an SVG shape:
;
Easing functions
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]) |
Built in functions
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:
;
Elasticity of Elastic easings can be configured with the elasticity
parameters:
;
Custom Bézier curves
Define a Bézier curve with an Array
of 4 coordinates:
;
Custom Bézier curves coordinates can be generated here https://matthewlein.com/ceaser/
➜ Custom Bézier curves example
Defining custom functions
Expand the built in easing functions from anime.easings
.
// Add custom functionanimeeasings'myCustomEasingName' = { return Math;} // Usage; // add custom Bézier curve functionanimeeasings'myCustomCurve' = anime; // Usage;
➜ Custom easing functions example
Helpers
anime.speed = x
Change all animations speed (from 0 to 1).
animespeed = 5; // Slow down all animations by half of their original speed
anime.running
Return an Array
of all active Anime instances.
animerunning;
anime.remove(target)
Remove one or multiple targets from the animation.
anime; // Remove all elements with the class 'item-2'
anime.getValue(target, property)
Get current valid value from an element.
anime; // Return '100px'
anime.path(pathEl)
Create a path Function for motion path animation.
Accepts either a DOM node or CSS selector.
var path = anime; // Return path(attribute)
anime.setDashoffset(pathEl)
An helper for line drawing animation.
Sets the 'stroke-dasharray' to the total path length and return its value.
;
anime.easings
Return the complete list of built in easing functions
animeeasings;
anime.bezier(x1, x2, y1, y2)
Return a custom Bézier curve easing function
anime; // Return function(t)
anime.timeline()
Create a timeline to synchronise other Anime instances.
var timeline = anime;timeline;
anime.random(x, y)
Generate a random number between two numbers.
anime; // 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.