Anime (/ˈæn.ə.meɪ/) is a flexible yet lightweight JavaScript animation library.
It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.
Features
- Specific animation parameters
- Specific target values
- Multiple timing values
- Playback controls
- Motion path
Examples and demos
var myAnimation = anime({
targets: ['.blue', '.green'],
translateX: '13rem',
rotate: 180,
borderRadius: 8,
duration: 2000,
loop: true
});
- Chrome
- Safari
- Opera
- Firefox
- IE 10+
npm install animejs / bower install animejs or download
Then insert anime.min.js in your html:
<script src="anime.min.js"></script>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']
| 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) |
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
});
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
});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
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..). |
Notes : For properties that aren't
Example:
.div {
width: 20px;
}anime({
targets: 'div',
translateX: '3rem', // Will translate the div from '0rem' to '3rem'
width: '100', // Will be converted to '100px' because the width is '20px' in the CSS
});Defines the start and end values of the animation.
Example:
anime({
targets: 'div',
translateX: [50, 250] // Will start at 50px and end at 250px
});
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); // Will set a random value from 50 to 100 to each divs
}
});anime({
targets: 'path',
strokeDashoffset: function(el) {
var pathLength = el.getTotalLength();
return [pathLength, 0]; // Will use the exact path length for each targeted path elements
}
});
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(); // Manually play the animation
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
});Return an array of all active animations objects
anime.list;Change all animations speed (from 0 to 1).
anime.speed = .5; // Will slow down all animations by half of their original speedReturn the complete list of anime.js easing functions
anime.easings;Remove one or multiple targets from the animation.
anime.remove('.item-2'); // Will remove all divs with the class '.item-2'Get current valid value from an element.
anime.getValue('div', 'translateX'); // Will return '100px'Generate a random number between two numbers.
anime.random(10, 40); // Will return a random number between 10 and 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.