duration

Defines the default duration in milliseconds of all animation tweens.
Setting 0 to a duration completes the animation instantly upon play.

Accepts

A Number equal or greater than 0
A Function based value that returns a Number equal to or greater than 0

Duration values higher than 1e12 are clamped internally to 1e12 (Or approximatively 32 years).

Default

1000

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

import { engine } from 'animejs';
engine.defaults.duration = 500;

duration code example

import { animate } from 'animejs';

animate('.dur-0', {
  x: '17rem',
  duration: 0,
});

animate('.dur-500', {
  x: '17rem',
  duration: 500,
});

animate('.dur-2000', {
  x: '17rem',
  duration: 2000
});

<div class="medium row">
  <div class="circle dur-0"></div>
  <div class="padded label">duration: 0</div>
</div>
<div class="medium row">
  <div class="circle dur-500"></div>
  <div class="padded label">duration: 500</div>
</div>
<div class="medium row">
  <div class="circle dur-2000"></div>
  <div class="padded label">duration: 2000</div>
</div>

Previous Next

delay
loop