Anime (/ˈæn.ə.meɪ/)
is a flexible yet lightweight JavaScript animation library.
It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.
Features
Examples and demos
Animation example
var myAnimation = anime({
targets: ['.blue', '.green'],
translateX: '13rem',
rotate: 180,
borderRadius: 8,
duration: 2000,
loop: true
});
Live example on CodePen
Browser support
- Chrome
- Safari
- Opera
- Firefox
- IE 10+
Quick start
npm install animejs
/ bower install animejs
or download
Then insert anime.min.js
in your html:
<script src="anime.min.js"></script>
Or import it in your JavaScript
import anime from 'animejs'
API
targets
Defines the elements or JS Objects to animate.
| Accept | Examples
| --- | --- | ---
| CSS Selectors | 'div'
,'.thing'
,'path'
| DOM Element | document.querySelector('.thing')
| Nodelist | document.querySelectorAll('.thing')
| JavaScript Object | {prop1: 100, prop2: 200}
| JavaScript Array | ['.thing-1', 'div']
Parameters
Names | Defaults | Types |
---|
delay | 0 | number , function (el, index, total) |
duration | 1000 | number , function (el, index, total) |
autoplay | true | boolean |
loop | false | number , boolean |
direction | 'normal' | 'normal' , 'reverse' , 'alternate' |
easing | 'easeOutElastic' | console log anime.easings to get the complete functions list |
elasticity | 400 | number (higher is stronger) |
round | false | number , boolean |
begin | undefined | function (animation) |
update | undefined | function (animation) |
complete | undefined | function (animation) |
Specific animation parameters
Parameters can be set individually to properties by using an Object.
Specific property parameters are :
- value (required)
- delay
- duration
- easing
Example:
anime({
targets: 'div',
translateX: '13rem',
rotate: {
value: 180,
duration: 1500,
easing: 'easeInOutQuad'
},
scale: {
value: 2,
delay: 150,
duration: 850,
easing: 'easeInOutExpo',
},
direction: 'alternate',
loop: true
});
Live example on CodePen
Multiple timing values
Delays and durations can be specific to each targeted elements by using a function.
Available function arguments:
Positions | Names | Infos |
---|
1 | target | The targeted element |
2 | index | The target index (start at 0) |
3 | length of targets | The total number of targets (start at 0) |
Example:
anime({
targets: 'div',
translateX: '13.5rem',
scale: [.75, .9],
delay: function(el, index) {
return index * 80;
},
direction: 'alternate',
loop: true
});
Live example on CodePen
List of valid animatable properties
Any property can be animated, as long as the property value contains at least one numerical value.
| Types | Examples
| --- | --- | ---
| CSS Properties | width
, borderRadius
, 'background-color'
| Individual transforms | translateX
, rotate
, scaleY
| SVG attributes | d
, rx
, transform
| DOM attributes | value
, volume
| Object properties | any object property containing at least one number
Property values
Single value
Defines the end value of the animation.
Types | Examples | Infos |
---|
String | '100rem' | Recommended technique. Will force the animation to use a specific value, but doesn't convert units. |
Number | 100 | Will use default units if possible. Doesn't work with properties that aren't specified in the CSS, or non-numerical values (e.g. margin: auto; left: auto; etc..). |
Example:
.div {
width: 20px;
}
anime({
targets: 'div',
translateX: '3rem',
width: '100',
});
From To values
Defines the start and end values of the animation.
Example:
anime({
targets: 'div',
translateX: [50, 250]
});
Specific target values
Property values can be specific to each targeted elements by using a function.
Available function arguments:
Positions | Names | Infos |
---|
1 | target | The targeted element |
2 | index | The target index (start at 0) |
Examples:
anime({
targets: 'div',
translateX: function(el, index) {
return anime.random(50, 100);
}
});
Live example on CodePen
anime({
targets: 'path',
strokeDashoffset: function(el) {
var pathLength = el.getTotalLength();
return [pathLength, 0];
}
});
Live example on CodePen
Playback controls
Play, pause, restart and seek the animation.
Names | Infos | Arguments |
---|
.play() | Play the animation | animation parameters object |
.pause() | Pause the animation | none |
.restart() | Restart the animation | animation parameters object |
.seek() | Advance in the animation | a percentage, or an object {time: 1250} |
var myAnimation = anime({
targets: 'div',
translateX: 100,
autoplay: false
});
myAnimation.play();
Live example on CodePen
Motion path
Animate the transform properties along an SVG path by using the anime.path()
Object.
Transforms compatible with a motion path:
Names | Infos |
---|
translateX | follow the x path coordinate |
translateY | follow the y path coordinate |
rotate | follow the path angle value |
Notes: IE cannot apply CSS transforms on SVG elements.
Example:
var myPath = anime.path('path');
anime({
targets: 'div',
translateX: myPath,
translateY: myPath,
rotate: myPath
});
Live example on CodePen
JS Object
Animate any JS Object attribute.
Example:
var myObject = {
one: 0,
two: 2000
}
var myAnimation = anime({
targets: myObject,
one: 9999,
two: 4200,
duration: 5000,
round: true,
easing: 'linear',
loop: true,
update: function() {
console.log(myObject);
}
});
Live example on CodePen
Helpers
anime.list
Return an array of all active animations objects
anime.list;
anime.speed = x
Change all animations speed (from 0 to 1).
anime.speed = .5;
anime.easings
Return the complete list of anime.js easing functions
anime.easings;
anime.remove(target)
Remove one or multiple targets from the animation.
anime.remove('.item-2');
anime.getValue(target, property)
Get current valid value from an element.
anime.getValue('div', 'translateX');
anime.random(x,y)
Generate a random number between two numbers.
anime.random(10, 40);
====
MIT License. © 2016 Julian Garnier.
Big thanks to Animate Plus and Velocity that inspired anime.js
API, and jQuery UI from which the easing functions come from.