> 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: timeline(timelineOptions: TimeLineOptions)

# Method package: wixAnimationsFrontend

# Method menu location: wixAnimationsFrontend --> timeline

# Method Link: https://dev.wix.com/docs/velo/velo-only-apis/wix-animations-frontend/timeline.md

# Method Description:

Creates a new animation timeline.

A timeline is used to compose animations together over time. You can synchronize
 multiple animations on matched elements, control them as a whole, and precisely
 manage their timing.

 Typically, after creating a new timeline, you add animation attributes and
 sequence them within the timeline using the [`add()`](wix-animations-frontend.TimeLine.html#add) function.

 Control the timeline playback using the [`play()`](wix-animations-frontend.TimeLine.html#play),
 [`reverse()`](wix-animations-frontend.TimeLine.html#reverse), [`pause()`](wix-animations-frontend.TimeLine.html#pause),
 and [`replay()`](wix-animations-frontend.TimeLine.html#replay) functions.

 Use the `timelineOptions` parameter to specify whether the timeline repeats
 and how the repetitions are played.



# Method Code Examples:

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

## Create a timeline

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

let timeline = wixAnimationsFrontend.timeline();
```

## Create a timeline that repeats

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

let timeline = wixAnimationsFrontend.timeline({"repeat": 3});
```

## Create a timeline with options

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

let timeline = wixAnimationsFrontend.timeline(
  {
    "repeat": 3,
    "repeatDelay": 100,
    "yoyo": true
  }
);
```

## Create a simple animation

```javascript
import { timeline } from 'wix-animations-frontend';

$w.onReady(() => {
  const revealTimeline = timeline()
    .add($w('#pink'), {duration: 1500, x: -160, scale: 1.3, easing: 'easeOutBack'})
    .add($w('#green'), {duration: 1500, x: 160, scale: 1.3, easing: 'easeOutBack'}, 0)

  $w('#container').onMouseIn(() => {
    revealTimeline.play();
  });

  $w('#container').onMouseOut(() => {
    revealTimeline.reverse();
  });
});
```

## Create a timeline, add animation attributes, and add buttons for controlling timeline playback

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

let timeline = wixAnimationsFrontend.timeline(
  {
    "repeat": 3,
    "repeatDelay": 100,
    "yoyo": true
  }
);

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

  timeline
    .add( myImage, {
      "rotate": 360,
      "scale": .5,
      "duration": 1000
    } )
    .add( myImage, {
      "opacity": 0,
      "duration": 1000
    } );

  $w("#playButton").onClick( () => {
    timeline.play();
  } );

  $w("#reverseButton").onClick( () => {
    timeline.reverse();
  } );

  $w("#pauseButton").onClick( () => {
    timeline.pause();
  } );

  $w("#replayButton").onClick( () => {
    timeline.replay();
  } );
} );
```

---