reversed

Defines the initial direction of the timeline.

Accepts

Boolean

If set to true the animation plays backwards
If set to false the animation plays forwards

Default

false

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

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

reversed code example

import { createTimeline, utils } from 'animejs';

const [ $time ] = utils.$('.time');

const tl = createTimeline({
  reversed: true,
  onUpdate: self => $time.innerHTML = self.currentTime
})
.add('.circle', { x: '15rem' })
.add('.triangle', { x: '15rem' }, '-=500')
.add('.square', { x: '15rem' }, '-=500');

<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
  <pre class="large log row">
    <span class="label">current time</span>
    <span class="time value">0</span>
  </pre>
</div>

Previous Next

alternate
autoplay