reversed

Sets the initial direction of the timer.
The timer currentTime always progresses from 0 to duration.
Only the iterationTime property is actually reversed.

Accepts

Boolean

If set to true the timer's first iteration runs in reverse
If set to false the timer's first iteration runs normally

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 { animate } from 'animejs';

const [ $iterationTime ] = utils.$('.iteration-time');
const [ $currentTime ] = utils.$('.current-time');

createTimer({
  duration: 10000,
  reversed: true,
  onUpdate: self => {
    $iterationTime.innerHTML = self.iterationCurrentTime;
    $currentTime.innerHTML = self.currentTime;
  }
});

<div class="large centered row">
  <div class="col">
    <pre class="large log row">
      <span class="label">iteration time</span>
      <span class="iteration-time value lcd">0</span>
    </pre>
  </div>
  <div class="col">
    <pre class="large log row">
      <span class="label">current time</span>
      <span class="current-time value lcd">0</span>
    </pre>
  </div>
</div>

Previous Next