Accepts | Infos |
---|---|
'normal' |
Animation progress goes from 0 to 100% |
'reverse' |
Animation progress goes from 100% to 0% |
'alternate' |
Animation progress goes from 0% to 100% then goes back to 0% |
anime({
targets: '.dir-normal',
translateX: 250,
easing: 'easeInOutSine'
});
anime({
targets: '.dir-reverse',
translateX: 250,
direction: 'reverse',
easing: 'easeInOutSine'
});
anime({
targets: '.dir-alternate',
translateX: 250,
direction: 'alternate',
easing: 'easeInOutSine'
});
Loop : Defines the number of iterations of your animation.
Accepts | Infos |
---|---|
Number |
The number of iterations |
true |
Loop indefinitely |
Example :
anime({
targets: '.loop',
translateX: 270,
loop: 3,
easing: 'easeInOutSine'
});
anime({
targets: '.loop-infinity',
translateX: 270,
loop: true,
easing: 'easeInOutSine'
});
anime({
targets: '.loop-reverse',
translateX: 270,
loop: 3,
direction: 'reverse',
easing: 'easeInOutSine'
});
anime({
targets: '.loop-reverse-infinity',
translateX: 270,
direction: 'reverse',
loop: true,
easing: 'easeInOutSine'
});
anime({
targets: '.loop-alternate',
translateX: 270,
loop: 3,
direction: 'alternate',
easing: 'easeInOutSine'
});
anime({
targets: '.loop-alternate-infinity',
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'easeInOutSine'
});
Autoplay : Defines if the animation should automatically starts or not.
Accepts | Infos |
---|---|
true |
Automatically starts the animation |
false |
Animation is paused by default |
anime({
targets: '.autoplay-true',
translateX: 250,
autoplay: true,
easing: 'easeInOutSine'
});
anime({
targets: '.autoplay-false',
translateX: 250,
autoplay: false,
easing: 'easeInOutSine'
});