onRepeat( )

Sets an event handler that runs when a the timeline repeats.

Description

The event handler set by calling the onRepeat() function runs when a timeline begins playing a repetition. It does not run for the initial play of the timeline. However, when replaying a timeline that has already been played, the event handler runs even for the first repetition of the timeline.

If an event handler is already set for onRepeat, setting a new event handler overrides the one set previously.

To remove an event handler you set previously, call the onRepeat() function and pass null for the handler parameter.

Syntax

function onRepeat(handler: Function): TimeLine

onRepeat Parameters

NAME

TYPE

DESCRIPTION

handler

Function

The name of the function or the function expression to run when the timeline repeats.

Returns

The timeline the event handler was set on.

Return Type:

TimeLine

Was this helpful?

Set an event handler that runs when a timeline repeats

Copy Code

1import wixAnimationsFrontend from 'wix-animations-frontend';
2
3let timeline = wixAnimationsFrontend.timeline({"repeat": 3});
4
5// ...
6
7timeline.onRepeat( () => {
8  // handle timeline repetition
9  console.log("Timeline is repeating.");
10} );

Remove the event handler that runs when a timeline repeats

Copy Code

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

Display a message when a timeline repeats

Copy Code

1import wixAnimationsFrontend from 'wix-animations-frontend';
2
3let timeline = wixAnimationsFrontend.timeline({"repeat": 3});
4
5$w.onReady( function () {
6  const myImage = $w("#myImage");
7
8  timeline
9    .add( myImage, {
10      "rotate": 360,
11      "scale": .5,
12      "duration": 1000
13    } )
14    .add( myImage, {
15      "opacity": 0,
16      "duration": 1000
17    } )
18    .onRepeat( () => {
19      $w("#messageText").text = "Timeline is repeating.";
20    } )
21    .play();
22} );