timeline( )

Creates a new animation timeline.

Description

A timeline is used to compose animations together over time. You can synchronize multiple animations on matched elements, control them as a whole, and precisely manage their timing.

Typically, after creating a new timeline, you add animation attributes and sequence them within the timeline using the add() function.

Control the timeline playback using the play(), reverse(), pause(), and replay() functions.

Use the timelineOptions parameter to specify whether the timeline repeats and how the repetitions are played.

Syntax

function timeline([timelineOptions: TimeLineOptions]): TimeLine

timeline Parameters

NAME

TYPE

DESCRIPTION

timelineOptions

Optional

TimeLineOptions

Options to apply to the timeline.

Returns

The newly created timeline.

Return Type:

TimeLine

Was this helpful?

Create a timeline

Copy Code

1import wixAnimations from 'wix-animations';
2
3let timeline = wixAnimations.timeline();

Create a timeline that repeats

Copy Code

1import wixAnimations from 'wix-animations';
2
3let timeline = wixAnimations.timeline({"repeat": 3});

Create a timeline with options

Copy Code

1import wixAnimations from 'wix-animations';
2
3let timeline = wixAnimations.timeline(
4  {
5    "repeat": 3,
6    "repeatDelay": 100,
7    "yoyo": true
8  }
9);

Create a simple animation

You can test out the code in our example template.

Copy Code

1import { timeline } from 'wix-animations';
2
3$w.onReady(() => {
4  const revealTimeline = timeline()
5    .add($w('#pink'), {duration: 1500, x: -160, scale: 1.3, easing: 'easeOutBack'})
6    .add($w('#green'), {duration: 1500, x: 160, scale: 1.3, easing: 'easeOutBack'}, 0)
7
8  $w('#container').onMouseIn(() => {
9    revealTimeline.play();
10  });
11
12  $w('#container').onMouseOut(() => {
13    revealTimeline.reverse();
14  });
15});

Create a timeline, add animation attributes, and add buttons for controlling timeline playback

Copy Code

1import wixAnimations from 'wix-animations';
2
3let timeline = wixAnimations.timeline(
4  {
5    "repeat": 3,
6    "repeatDelay": 100,
7    "yoyo": true
8  }
9);
10
11$w.onReady( function () {
12  const myImage = $w("#myImage");
13
14  timeline
15    .add( myImage, {
16      "rotate": 360,
17      "scale": .5,
18      "duration": 1000
19    } )
20    .add( myImage, {
21      "opacity": 0,
22      "duration": 1000
23    } );
24
25  $w("#playButton").onClick( () => {
26    timeline.play();
27  } );
28
29  $w("#reverseButton").onClick( () => {
30    timeline.reverse();
31  } );
32
33  $w("#pauseButton").onClick( () => {
34    timeline.pause();
35  } );
36
37  $w("#replayButton").onClick( () => {
38    timeline.replay();
39  } );
40} );