Timeline

Synchronises animations, timers, and callbacks together.

Timelines are created using the createTimeline() method imported from the main 'animejs' module:

import { createTimeline } from 'animejs';

const timeline = createTimeline(parameters);

Or imported as a standalone module from the 'animejs/timeline' subpath:

import { createTimeline } from 'animejs/timeline';

Parameters

Name	Accepts
parameters ^(opt)	An `Object` of Timeline playback settings and Timeline callbacks

Returns

Timeline

A Timeline instance exposes methods used to add animations, timers, callbacks and labels to it.

timeline.add(target, animationParameters, position);
timeline.add(timerParameters, position);
timeline.sync(timelineB, position);
timeline.call(callbackFunction, position);
timeline.label(labelName, position);

Timeline code example

import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 750 } });

tl.label('start')
  .add('.square', { x: '15rem' }, 500)
  .add('.circle', { x: '15rem' }, 'start')
  .add('.triangle', { x: '15rem', rotate: '1turn' }, '<-=500');

<div class="large row">
  <div class="medium pyramid">
    <div class="triangle"></div>
    <div class="square"></div>
    <div class="circle"></div>
  </div>
</div>

In this section

Previous Next