timeline

Create complex sequences of animations across multiple elements.

Sequence

The timeline sequence is an array:

This sequence defines animations with the same settings as the animate function:

By default, animations will play one after another:

at

The timing of subsequent animations can be adjusted with the at option.

Pass a number to define a specific time:

Pass a string starting with + or - to start relative to the end of the previous animation:

Or pass "<" starting with + or - to start relative to the end of the previous animation:

Options

duration

Default: Automatically calculated

A duration, in seconds, that the animation will take to complete.

By default, this is automatically calculated by the provided sequence. But if provided explicitly, the whole animation will be scaled to fit this duration.

delay

Default: 0

A duration, in seconds, that the animation will be delayed before starting.

endDelay

Default: 0

A duration, in seconds, that the animation will wait at the end before ending.

direction

Default: "normal"

The direction of animation playback. "normal", "reverse", "alternate", or "alternate-reverse".

repeat

Default: 0

The number of times the animation should repeat. Set to Infinity to repeat indefinitely.

defaultOptions

An object of options to use as the default options for each animation in the sequence.

Returns

timeline returns animation controls

Stay updated with the Motion One newsletter. We don't spam, and unsubscription is instant.