anime.js logo v4 Anime.js | JavaScript Animation Engine

Timer V4

Schedules and controls timed function callbacks that can be used as a replacement to setTimeout() or setInterval(), keeping animations and callbacks in sync.

Timers are created using the createTimer() function.

import { createTimer } from 'animejs';

const timer = createTimer(parameters);

Parameters

Name Accepts
parameters (opt) An Object of Timer playback settings and Timer callbacks

Returns

Timer

Timer code example

import { animate } from 'animejs';

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

createTimer({
  duration: 1000,
  loop: true,
  frameRate: 30,
  onUpdate: self => $time.innerHTML = self.currentTime,
  onLoop: self => $count.innerHTML = self._currentIteration
});
<div class="large centered row">
  <div class="half col">
    <pre class="large log row">
      <span class="label">current time</span>
      <span class="value lcd">0</span>
    </pre>
  </div>
  <div class="half col">
    <pre class="large log row">
      <span class="label">callback fired</span>
      <span class="value lcd">0</span>
    </pre>
  </div>
</div>
In this section
Previous Next