> 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: add(target: any, animation: any, offset: string)

# Method package: wixAnimationsFrontend

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

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

# Method Description:

Adds an animation to a timeline.

The `add()` function adds one or more animations on one or more page
 elements to a timeline. Any element that has animation capabilities such as `hide()` and `show()`
 can be added as an animation `target` in a timeline.

 By default, when no `offset` is specified ,the animations in a timeline run in
 the order they are added. When multiple animations are added using a single call
 to the add function, those animations default to run together at the same time
 within the timeline.

 You can override the default order that the animations run using the `offset`
 parameter.

 You can add multiple `add()` functions to make more complex animations.



# Method Code Examples:

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

## 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();
  });
});
```

## Add animations to a timeline one at a time

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

let timeline = wixAnimationsFrontend.timeline();

// ...

const myImage = $w("#myImage");

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

timeline.add(myImage, {
  "opacity": 0,
  "duration": 1000
});
```

## Add multiple animations to a timeline together

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

let timeline1 = wixAnimationsFrontend.timeline();
let timeline2 = wixAnimationsFrontend.timeline();

// ...

const myImage1 = $w("#myImage1");
const myImage2 = $w("#myImage2");

// In timeline1, the rotation animation and opacity
// change animation will happen at the same time.
timeline1.add(myImage1, 
  [
    {
      "rotate": 360,
      "scale": .5,
      "duration": 1000,
      "easing": "easeInCirc"
    }, {
      "delay": 500,
      "opacity": 0,
      "duration": 500
    }
  ]
);

// In timeline2, the rotation animation and opacity
// change animation will happen one after the other.
timeline2.add(myImage2, {
  "rotate": 360,
  "scale": .5,
  "duration": 1000
});

timeline2.add(myImage2, {
  "opacity": 0,
  "duration": 1000
});
```

## Add animations on multiple page elements together

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

let timeline = wixAnimationsFrontend.timeline();

// ...

const myImage1 = $w("#myImage1");
const someImages = $w("#myImage2", "#myImage3");
const vectorImages = $w("VectorImage");

// Adds an animation for myImage1 
timeline.add(myImage1, {
  "rotate": 360,
  "scale": .5,
  "duration": 1000
})

// Adds an animation for myImage2
// and myImage3 together
timeline.add(someImages, {
  "rotate": -360,
  "scale": .5,
  "duration": 1000
})

// Adds an animation for all the
// vector images on the page
timeline.add(vectorImages, {
  "opacity": 0,
  "duration": 1000
})
```

## Add animations to a timeline and play it

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

let timeline = wixAnimationsFrontend.timeline();

$w.onReady( function () {
  const myImage1 = $w("#myImage1");
  const myImage2 = $w("#myImage2");
  const myImage3 = $w("#myImage3");

  timeline
    .add( 
      [myImage1, myImage2],
      {
        "rotate": 360,
        "scale": .5,
        "duration": 1000
      } 
    )
    .add( 
      myImage3, 
      {
        "opacity": 0,
        "duration": 500
      }, 
      "-=500"
    )
    .play();
} );
```

---