Search.../

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:

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 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} );