Core Module

Timeline

Orchestrate multiple animations in sequence or with precise time offsets using the Timeline API.

createTimeline()

Create a timeline and chain animations together:

import { createTimeline } from 'animejs';

createTimeline()
  .add('.box-1', { translateX: 200, duration: 600 })
  .add('.box-2', { translateY: 100, duration: 400 })
  .add('.box-3', { rotate: 360, duration: 800 });

Time Positions

Control exactly when each animation starts with position offsets:

createTimeline()
  .add('.a', { translateX: 100 }, 0)      // starts at 0ms
  .add('.b', { translateX: 100 }, 200)    // starts at 200ms
  .add('.c', { translateX: 100 }, '-=100') // starts 100ms before previous ends
  .add('.d', { translateX: 100 }, '<')     // starts at the same time as previous
  .add('.e', { translateX: 100 }, '+=50'); // starts 50ms after previous ends

Timeline Options

Property	Default	Description
loop	false	Number of loops or true for infinite
reversed	false	Play the timeline in reverse
autoplay	true	Auto-start on creation
ease	'linear'	Global easing for all children
delay	0	Global delay before timeline starts

Methods

.add(target, params, position) — Add an animation to the timeline
.play() / .pause() / .restart() — Control playback
.seek(time) — Jump to a specific time in ms
.reverse() — Toggle the playback direction