playbackRate V4

Defines a speed multiplier to speed up or slow down an animation.
This value can be modified later with animation.speed = .5.

Accepts

A Number greater than or equal to 0

If set to 0 the animation won't play.

Default

1

To change the default value globally, update the engine.defaults object.

import { engine } from 'animejs';
engine.defaults.playbackRate = .75;

playbackRate code example

import { animate, utils } from 'animejs';

const [ $range ] = utils.$('.range');
const [ $speed ] = utils.$('.speed');

const animation = animate('.circle', {
  x: '16rem',
  loop: true,
  alternate: true,
  playbackRate: 1,
});

const updateSpeed = () => {
  const { value } = $range;
  $speed.innerHTML = utils.roundPad(+value, 2);
  utils.sync(() => animation.speed = value);
}

$range.addEventListener('input', updateSpeed);

<div class="large row">
  <div class="circle"></div>
  <pre class="large log row">
    <span class="label">speed</span>
    <span class="speed value">1.00</span>
  </pre>
</div>
<div class="medium row">
  <fieldset class="controls">
    <input type="range" min=0 max=5 value=1 step=.01 class="range" />
  </fieldset>
</div>

Previous Next