> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

# Method name: onStart(handler: Function)

# Method package: wixAnimationsFrontend

# Method menu location: wixAnimationsFrontend --> TimeLine --> onStart

# Method Link: https://dev.wix.com/docs/velo/velo-only-apis/wix-animations-frontend/time-line/on-start.md

# Method Description:

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

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()`](#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.



# Method Code Examples:

*** Note: do not assume any prop names or enum values other than the ones in the example.

## Set an event handler that runs when a timeline starts

```javascript
import wixAnimationsFrontend from 'wix-animations-frontend';

let timeline = wixAnimationsFrontend.timeline();

// ...

timeline.onStart( () => {
  // handle timeline start
  console.log("Timeline has started.");
} );
```

## Remove the event handler that runs when a timeline starts

```javascript
import wixAnimationsFrontend from 'wix-animations-frontend';

let timeline = wixAnimationsFrontend.timeline();

// ...

timeline.onStart( null );
```

## Display a message when a timeline starts

```javascript
import wixAnimationsFrontend from 'wix-animations-frontend';

let timeline = wixAnimationsFrontend.timeline();

$w.onReady( function () {
  const myImage = $w("#myImage");

  timeline
    .add( myImage, {
      "rotate": 360,
      "scale": .5,
      "duration": 1000
    } )
    .add( myImage, {
      "opacity": 0,
      "duration": 1000
    } )
    .onStart( () => {
      $w("#messageText").text = "Timeline has started.";
    } )
    .play();
} );
```

---