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.

Authorization

Request

This endpoint does not take any parameters

Response Object

The timeline to be replayed.

Returns an empty object.

Status/Error Codes

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