replay( )

Replays a timeline.

Description

Replaying restarts the play of a paused or playing timeline from the beginning of the timeline and sets the hidden property of the animated elements to false.

Note that when a timeline is created it is paused by default at the beginning of the timeline.

Syntax

function replay(): TimeLine

replay Parameters

This function does not take any parameters.

Returns

The timeline to be replayed.

Return Type:

TimeLine

Was this helpful?

Replays a timeline

Copy Code

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

Create buttons for controlling timeline playback

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