Timer Class

The Timer class is the foundation for all time-based animations in Anime.js. It extends the Clock class and provides core timing functionality including playback control, looping, callbacks, and time manipulation.

Constructor

new Timer(parameters, parent, parentPosition)

Parameters

parameters

TimerParams

default:"{}"

Configuration object for the timer

Show properties

String | Number

Unique identifier for the timer

delay

Number

Delay before the timer starts in milliseconds

duration

Number

default:"Infinity"

Duration of one iteration in milliseconds

reversed

Boolean

default:"false"

Whether the timer should play in reverse

alternate

Boolean

default:"false"

Whether the timer should alternate direction on each loop

loop

Boolean | Number

default:"false"

Number of times to loop. true or Infinity for infinite loops

loopDelay

Number

default:"0"

Delay between loops in milliseconds

autoplay

Boolean | ScrollObserver

default:"true"

Whether the timer should start automatically, or a ScrollObserver to link

frameRate

Number

default:"60"

Target frame rate for the timer

playbackRate

Number

default:"1"

Speed multiplier for playback

onBegin

Callback<Timer>

Called when the timer begins (first time only)

onBeforeUpdate

Callback<Timer>

Called before each update

onUpdate

Callback<Timer>

Called on each update

onLoop

Callback<Timer>

Called when a loop iteration completes

onPause

Callback<Timer>

Called when the timer is paused

onComplete

Callback<Timer>

Called when the timer completes all iterations

parent

Timeline | null

default:"null"

Parent timeline if this timer is a child

parentPosition

Number

default:"0"

Position within the parent timeline in milliseconds

Properties

id

timer.id

Type: String | Number Unique identifier for the timer instance.

duration

timer.duration

Type: Number Total duration of the timer including all loops and loop delays in milliseconds.

iterationDuration

timer.iterationDuration

Type: Number Duration of a single loop iteration in milliseconds.

iterationCount

timer.iterationCount

Type: Number Total number of loop iterations. Infinity for infinite loops.

paused

timer.paused

Type: Boolean Indicates whether the timer is currently paused.

began

timer.began

Type: Boolean Indicates whether the timer has begun playing.

completed

timer.completed

Type: Boolean Indicates whether the timer has completed all iterations.

cancelled

timer.cancelled

Type: Boolean Indicates whether the timer has been cancelled. Setting to true cancels the timer, setting to false resets and plays it.

backwards

timer.backwards

Type: Boolean Indicates the current playback direction.

parent

timer.parent

Type: Timeline | null Reference to the parent timeline, if any.

currentTime

timer.currentTime

Type: Number Current playback time in milliseconds. Can be set to seek the timer.

iterationCurrentTime

timer.iterationCurrentTime

Type: Number Current time within the current iteration in milliseconds. Can be set to seek within the iteration.

progress

timer.progress

Type: Number (0-1) Overall progress from 0 to 1. Can be set to seek by percentage.

iterationProgress

timer.iterationProgress

Type: Number (0-1) Progress within the current iteration from 0 to 1. Can be set to seek within the iteration by percentage.

currentIteration

timer.currentIteration

Type: Number Index of the current loop iteration (0-based). Can be set to jump to a specific iteration.

reversed

timer.reversed

Type: Boolean Indicates whether the timer is playing in reverse. Setting to true reverses playback, false plays forward.

speed

timer.speed

Type: Number Playback rate multiplier. Values > 1 speed up, < 1 slow down. Inherited from Clock class.

fps

timer.fps

Type: Number Target frame rate for the timer. Inherited from Clock class.

deltaTime

timer.deltaTime

Type: Number Time elapsed since the last tick in milliseconds. Inherited from Clock class.

Callback Properties

These properties store the callback functions and can be accessed or modified at runtime:

timer.onBegin - Called when timer begins
timer.onBeforeUpdate - Called before each update
timer.onUpdate - Called on each update
timer.onLoop - Called on loop completion
timer.onPause - Called when paused
timer.onComplete - Called when all iterations complete

All callbacks receive the timer instance as the first argument:

timer.onUpdate = (timer) => {
  console.log('Progress:', timer.progress);
};

Example

import { Timer } from 'animejs';

const timer = new Timer({
  duration: 2000,
  loop: 3,
  onUpdate: (timer) => {
    console.log('Time:', timer.currentTime);
  },
  onComplete: (timer) => {
    console.log('Done!');
  }
});

timer.init(); // Initialize and start the timer

Animation

Timeline

Timer

Animatable

Draggable

Utilities

Easings

Constructor

Parameters

Properties

id

duration

iterationDuration

iterationCount

paused

began

completed

cancelled

backwards

parent

currentTime

iterationCurrentTime

progress

iterationProgress

currentIteration

reversed

speed

fps

deltaTime

Callback Properties

Example

Build docs developers (and LLMs) love

Animation

Timeline

Timer

Animatable

Draggable

Utilities

Easings

​Constructor

​Parameters

​Properties

​id

​duration

​iterationDuration

​iterationCount

​paused

​began

​completed

​cancelled

​backwards

​parent

​currentTime

​iterationCurrentTime

​progress

​iterationProgress

​currentIteration

​reversed

​speed

​fps

​deltaTime

​Callback Properties

​Example

Build docs developers (and LLMs) love

Constructor

Parameters

Properties

id

duration

iterationDuration

iterationCount

paused

began

completed

cancelled

backwards

parent

currentTime

iterationCurrentTime

progress

iterationProgress

currentIteration

reversed

speed

fps

deltaTime

Callback Properties

Example