Tween parameters keyframes JS
Sequences multiple Tween parameters specific to an Animatable property.
This syntax allows very fine control over an animation by giving access to ease, delay, duration and modifier parameters for each individual keyframes.
The default duration of a keyframe equals the total animation duration divided by the total number of keyframes.
Accepts
An Array of Tween parameters
Tween parameters keyframes code example
import { animate } from 'animejs';
animate('.square', {
x: [
{ to: '17rem', duration: 700, delay: 400 },
{ to: 0, duration: 700, delay: 800 },
],
y: [
{ to: '-2.5rem', ease: 'out', duration: 400 },
{ to: '2.5rem', duration: 800, delay: 700 },
{ to: 0, ease: 'in', duration: 400, delay: 700 },
],
scale: [
{ to: .5, duration: 700, delay: 400 },
{ to: 1, duration: 700, delay: 800 },
],
rotate: { to: 360, ease: 'linear' },
duration: 3000,
ease: 'inOut', // ease applied between each keyframes if no ease defined
playbackEase: 'ouIn(5)', // ease applied accross all keyframes
loop: true,
});<div class="medium row">
<div class="square"></div>
</div>