play( )

Plays a timeline forwards.

Description

Plays a timeline that is not at its end in the forward direction and sets the hidden property of the animated elements to false.

Syntax

function play(): TimeLine

play Parameters

This function does not take any parameters.

Returns

The timeline to be played forwards.

Return Type:

TimeLine

Was this helpful?

Play a timeline

Copy Code

1import wixAnimationsFrontend from 'wix-animations-frontend';
2
3let timeline = wixAnimationsFrontend.timeline();
4
5// ...
6
7timeline.play();

Create buttons for controlling how a timeline is played

Copy Code

1import wixAnimationsFrontend from 'wix-animations-frontend';
2
3let timeline = wixAnimationsFrontend.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} );