Timelines

Sequence and synchronize multiple animations with powerful timeline controls

Timelines allow you to sequence multiple animations with precise timing control. They provide a powerful way to create complex animation choreography.

Creating Timelines

Create a timeline using the createTimeline() function:

import { createTimeline } from 'animejs';

const tl = createTimeline({
  defaults: {
    duration: 1000,
    ease: 'inOutQuad'
  }
});

Adding Animations

Basic Addition

Use the .add() method to add animations to a timeline:

const tl = createTimeline();

tl.add('.box', {
  x: 100,
  duration: 1000
})
.add('.circle', {
  scale: 1.5,
  duration: 500
});

Positioning Animations

Control when animations start using position parameters:

tl.add('.box', { x: 100 }, 0)        // Start at 0ms
  .add('.circle', { scale: 2 }, 500)  // Start at 500ms
  .add('.square', { rotate: 180 }, '+=200'); // 200ms after previous

position · number | string

Absolute positioning:

• 0 - Timeline start
• 1000 - 1000ms from start

Relative positioning:

• '+=500' - 500ms after previous animation ends
• '-=200' - 200ms before previous animation ends
• '<' - Same time as previous animation
• '>' - When previous animation ends

Label positioning:

• 'myLabel' - At a defined label
• 'myLabel+=500' - 500ms after a label

Timeline Parameters

defaults · object

Default animation parameters applied to all children.

playbackEase · string | function

Easing applied to the entire timeline playback.

composition · boolean · default: "true"

Enable composition for timeline animations.

const tl = createTimeline({
  defaults: {
    ease: 'inOutSine',
    duration: 2000
  },
  playbackEase: 'out(4)',
  loop: true
});

Labels

Create named points in your timeline:

tl.add('.intro', { opacity: 1 })
  .label('main')
  .add('.content', { y: 0 }, 'main')
  .add('.sidebar', { x: 0 }, 'main+=500')
  .label('end');

label(name, position)

Adds a label at the specified position:

tl.label('sceneStart', 2000)
  .add('.element', { x: 100 }, 'sceneStart');

Set Method

Instantly set properties without animation:

tl.set('.element', {
  x: 100,
  opacity: 0
})
.add('.element', {
  opacity: 1,
  duration: 500
});

The set() method has zero duration and uses replace composition.

Seamless Looping Example

Create perfect seamless loops with precise timing:

import { createTimeline, stagger } from 'animejs';

const numberOfElements = 500;
const loopDuration = 6000;
const animDuration = loopDuration * 0.2;
const delay = loopDuration / numberOfElements;

const tl = createTimeline({
  defaults: {
    ease: 'inOutSine',
    loopDelay: (loopDuration * 0.2) - animDuration,
    duration: animDuration
  }
});

// Add seamlessly looping animations
for (let i = 0; i < numberOfElements; i++) {
  tl.add(elements[i], {
    scale: [1, 1.25, 1],
    rotate: [0, 10, 0],
    loop: -1
  }, delay * i);
}

Synchronizing External Animations

Sync Web Animations API or other animation instances:

const waapi = element.animate([...], { duration: 1000 });

tl.sync(waapi, '+=500');

sync(animation, position)

Synchronizes an external animation with the timeline:

const externalAnim = animate('.other', { x: 100 });

tl.sync(externalAnim, 1000);

Callbacks

Add callback functions at specific timeline points:

tl.add('.intro', { opacity: 1 })
  .call(() => {
    console.log('Intro complete');
  })
  .add('.main', { y: 0 });

call(callback, position)

Executes a callback at the specified position:

tl.call(() => console.log('Checkpoint!'), 2000)
  .call(() => console.log('End!'), 'end');

Timeline Control Methods

All standard animation methods work on timelines:

tl.play();      // Play timeline
tl.pause();     // Pause timeline
tl.restart();   // Restart from beginning
tl.reverse();   // Reverse playback
tl.seek(1000);  // Seek to 1000ms

Refresh Method

Refresh function-based values in the timeline:

let dynamicValue = 100;

const tl = createTimeline();
tl.add('.element', {
  x: () => dynamicValue
});

dynamicValue = 200;
tl.refresh(); // Updates to new value

Stretch Method

Scale the timeline duration:

const tl = createTimeline();
tl.add('.box', { x: 100, duration: 1000 })
  .add('.circle', { y: 100, duration: 500 });

// Make timeline twice as long
tl.stretch(3000); // Original was 1500ms

Remove Method

Remove specific animations from the timeline:

tl.remove('.element');           // Remove all animations
tl.remove('.element', 'x');      // Remove only x property

Nested Timelines

Timelines can contain other timelines:

const subTl = createTimeline();
subTl.add('.child', { x: 100 });

const mainTl = createTimeline();
mainTl.add(subTl, 1000); // Add entire timeline at 1000ms

Complex Choreography Example

import { createTimeline, stagger } from 'animejs';

const tl = createTimeline({
  defaults: {
    ease: 'inOutQuad',
    duration: 1000
  },
  onComplete: () => console.log('Complete!')
});

tl.set('.stage', { opacity: 1 })
  .add('.title', {
    y: { from: -100 },
    opacity: { from: 0 },
    delay: stagger(50)
  })
  .label('content')
  .add('.box', {
    scale: { from: 0 },
    rotate: { from: -180 },
    delay: stagger(100, { from: 'center' })
  }, 'content+=200')
  .add('.footer', {
    y: { from: 100 },
    opacity: { from: 0 }
  }, '-=500');

API Reference

createTimeline(parameters)

Creates a new timeline instance.

Parameters:

• parameters (Object) - Timeline configuration
  • defaults (Object) - Default animation parameters
  • playbackEase (string | function) - Timeline playback easing
  • composition (boolean) - Enable composition
  • loop (number | boolean) - Loop count
  • All standard timer parameters

Returns: Timeline - Timeline instance

Use timeline defaults to avoid repeating common parameters across animations.