loop V4

Defines how many times an animation repeats.

Accepts

Value	Effect
`Number`	The number of loops in the range `[0, Infinity]`
`Infinity`	Loop indefinitely
`true`	Equivalent to `Infinity`
`-1`	Equivalent to `Infinity`

Default

0

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

import { engine } from 'animejs';
engine.defaults.loop = true;

loop code example

import { animate } from 'animejs';

animate('.loop', {
  x: '17.5rem',
  loop: 3,
});

animate('.loop-alternate', {
  x: '17.5rem',
  loop: 3,
  alternate: true,
});

animate('.loop-reverse', {
  x: '17.5rem',
  loop: 3,
  reversed: true,
});

animate('.loop-infinity', {
  x: '17.5rem',
  loop: true, // Or Infinity
});

<div class="small row">
  <div class="circle loop"></div>
  <div class="padded label">loop: 3</div>
</div>
<div class="small row">
  <div class="circle loop-alternate"></div>
  <div class="padded label">loop: 3, alternate: true</div>
</div>
<div class="small row">
  <div class="circle loop-reverse"></div>
  <div class="padded label">loop: 3, reversed: true</div>
</div>
<div class="small row">
  <div class="circle loop-infinity"></div>
  <div class="padded label">loop: true</div>
</div>

Previous Next