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>

Previous Next