Duration based keyframes JS
Sequences multiple Animatable property one after another.
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.
keyframes: [
{ y: 50, ease: 'out', duration: 400 },
{ x: 75, scale: .5, duration: 800 },
]Accepts
An Array of Object containing one Animatable property and Tween parameters
Duration based keyframes code example
import { animate } from 'animejs';
animate('.square', {
keyframes: [
{ y: '-2.5rem', ease: 'out', duration: 400 },
{ x: '17rem', scale: .5, duration: 800 },
{ y: '2.5rem' }, // The duration here is 3000 / 5 = 600ms
{ x: 0, scale: 1, duration: 800 },
{ y: 0, ease: 'in', duration: 400 }
],
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>