Duration : Defines the duration in milliseconds of the animation.
| Type |
Default |
Example |
| Number |
1000 |
3000 |
| anime.stagger |
See staggering section |
anime.stagger(150) |
| Function |
See function based parameters section |
(el, i) => i * 150 |
Example :
anime({
targets: '.duration-demo .el',
translateX: 250,
duration: 3000
});
Delay : Defines the delay in milliseconds of the animation.
| Type |
Default |
Example |
| Number |
0 |
1000 |
| anime.stagger |
See staggering section |
anime.stagger(150) |
| Function |
See function based parameters section |
(el, i) => i * 150 |
Example :
anime({
targets: '.delay-demo .el',
translateX: 250,
delay: 1000
});
End Delay : Adds some extra time in milliseconds at the end of the animation.
| Type |
Default |
Example |
| Number |
0 |
1000 |
| anime.stagger |
See staggering section |
anime.stagger(150) |
| Function |
See function based parameters section |
(el, i) => i * 150 |
Example :
anime({
targets: '.end-delay-demo .el',
translateX: 250,
endDelay: 1000,
direction: 'alternate'
});
Easing : Defines the timing function of the animation.
| Type |
Default |
Example |
| String |
'easeOutElastic(1, .5)' |
easing: 'easeInOutQuad' |
Example :
anime({
targets: '.easing-demo .el',
translateX: 250,
easing: 'easeInOutExpo'
});
Round : Rounds up the value to x decimals.
| Type |
Default |
Example |
| Number |
0 |
round: 10 |
Example :
var roundLogEl = document.querySelector('.round-log');
anime({
targets: roundLogEl,
innerHTML: [0, 10000],
easing: 'linear',
round: 10 // Will round the animated value to 1 decimal
});
Specific Property Parameters :
Defines specific parameters to each property of the animation using an Object as value.
Other properties that aren't specified in the Object are inheritted from the main animation.
| Type |
Example |
| Object |
rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine'
} |
Example :
anime({
targets: '.specific-prop-params-demo .el',
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
});
Function Based Parameters :
Get different values for every target and property of the animation.
The function accepts 3 arguments :
| Arguments |
Infos |
target |
The curent animated targeted element |
index |
The index of the animated targeted element |
targetsLength |
The total number of animated targets |
Example :
anime({
targets: '.function-based-params-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
delay: function(el, i, l) {
return i * 100;
},
endDelay: function(el, i, l) {
return (l - i) * 100;
}
});
