onStart( )

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

Description

The event handler set by calling the onStart() function runs when a timeline starts playing from the beginning.

This happens when:

The play() function is called on a timeline that has not been played yet.
The replay() function is called, regardless of the timeline state, since it replays the timeline from its beginning.

When a timeline has been set to repeat, the event handler runs at the beginning of the first repetition and does not run for each successive repetition. To set an event handler that runs when a timeline repeats, use the onRepeat() function.

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

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

Syntax

function onStart(handler: Function): TimeLine

onStart Parameters

NAME

TYPE

DESCRIPTION

handler

Function

The name of the function or the function expression to run when the timeline starts 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 starts

Copy Code

1import wixAnimationsFrontend from 'wix-animations-frontend';
2
3let timeline = wixAnimationsFrontend.timeline();
4
5// ...
6
7timeline.onStart( () => {
8  // handle timeline start
9  console.log("Timeline has started.");
10} );

Remove the event handler that runs when a timeline starts

Copy Code

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

Display a message when a timeline starts

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    .onStart( () => {
19      $w("#messageText").text = "Timeline has started.";
20    } )
21    .play();
22} );