onComplete( )

Sets an event handler that runs when the timeline completes playing.

Description

The event handler set by calling the onComplete() function runs when a timeline completes playing by reaching the end.

When a timeline has been set to repeat, the event handler runs at the end of the last repetition and does not run for the preceding repetitions.

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

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

Syntax

function onComplete(handler: Function): TimeLine

onComplete Parameters

NAME

TYPE

DESCRIPTION

handler

Function

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

Returns

The timeline the event handler was set on.

Return Type:

TimeLine

Was this helpful?

Set an event handler that runs when a timeline completes playing forwards

Copy Code

1import wixAnimationsFrontend from 'wix-animations-frontend';
2
3let timeline = wixAnimationsFrontend.timeline();
4
5// ...
6
7timeline.onComplete( () => {
8  // handle timeline forwards completion
9  console.log("Timeline has completed playing in reverse.");
10} );

Remove the event handler that runs when a timeline completes playing forwards

Copy Code

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

Display a message when a timeline completes playing forwards

Copy Code

1import wixAnimationsFrontend from 'wix-animations-frontend';
2
3let timeline = wixAnimationsFrontend.timeline();
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    .onComplete( () => {
19      $w("#messageText").text = "Timeline has completed playing forwards.";
20    } )
21    .play();
22} );