The Timeline class is the core class for creating complex animation sequences in Anime.js. It extends the Timer class and provides methods to add, synchronize, and control multiple animations along a shared timeline.
Constructor Timeline(parameters?) Creates a new Timeline instance.
parameters
TimelineParams
default: "{}"
Optional configuration object for the timeline Show TimelineParams properties
Unique identifier for the timeline. If not provided, an auto-incrementing ID will be assigned.
Default parameters to apply to all child animations. These defaults will be merged with global defaults and inherited by all animations added to the timeline.
Easing function to apply to the timeline’s playback rate. This affects how the entire timeline progresses through time.
Controls whether animations should be composed immediately when added. When true, animations are rendered and composed as they’re added. When false, composition is deferred.
Initial duration in milliseconds. Note: Timeline duration automatically grows as children are added.
Delay in milliseconds before the timeline starts.
Delay in milliseconds between loop iterations.
Whether the timeline should play in reverse direction.
Whether the timeline should alternate direction on each loop iteration.
loop
Boolean | Number
default: "false"
Number of times to loop the timeline. Set to true or Infinity for infinite looping.
autoplay
Boolean | ScrollObserver
default: "false"
Whether to automatically start playing the timeline. Can also accept a ScrollObserver instance for scroll-driven animations.
Target frame rate for the timeline. Limits the update frequency.
Playback speed multiplier. Values > 1 speed up, values < 1 slow down.
Callback function called when the timeline begins playing for the first time.
Callback function called before each timeline update tick.
Callback function called on each timeline update tick.
Callback function called when the timeline completes a loop iteration.
Callback function called when the timeline is paused.
Callback function called when the timeline completes all iterations.
Callback function called when the timeline renders.
// Create a timeline with default parameters const tl = new Timeline ({ id: 'myTimeline' , loop: true , defaults: { duration: 1000 , ease: 'outQuad' }, onComplete : ( timeline ) => { console . log ( 'Timeline completed' ); } });
Properties Unique identifier for the timeline instance.
duration Total duration of the timeline in milliseconds, including all loops. This value automatically updates as children are added.
iterationDuration Duration of a single iteration (loop) of the timeline in milliseconds.
labels Object containing named position labels. Used for positioning animations at specific named points in the timeline.
tl . label ( 'scene1' , 0 ) . label ( 'scene2' , 2000 ) . add ( targets , params , 'scene1' ) // Position at scene1 label . add ( targets2 , params2 , 'scene2' ); // Position at scene2 label
defaults Default parameters inherited by all child animations added to the timeline.
composition Indicates whether the timeline automatically composes animations as they’re added.
onRender Callback function invoked when the timeline renders.
Inherited Properties The Timeline class inherits all properties from the Timer class , including:
currentTime - Current playback position in millisecondsprogress - Current playback progress (0-1)iterationCurrentTime - Current time within the current iterationiterationProgress - Progress within the current iteration (0-1)currentIteration - Current loop iteration indexpaused - Whether the timeline is pausedbegan - Whether the timeline has begun playingcompleted - Whether the timeline has completedcancelled - Whether the timeline has been cancelledreversed - Whether the timeline is playing in reversespeed - Playback speed multiplieriterationCount - Total number of iterations
Factory Function createTimeline(parameters?) Convenience factory function that creates and initializes a Timeline instance.
Optional timeline configuration parameters.
An initialized Timeline instance ready to play.
import { createTimeline } from 'animejs' ; const tl = createTimeline ({ loop: true , defaults: { duration: 1000 , ease: 'outExpo' } }); // Equivalent to: const tl2 = new Timeline ({ /* ... */ }). init ();
See Also