# Getting started

## Static URL

Or you can use the script file from here:\
<https://cdnjs.com/libraries/lottie-web>

## From Extension

Or get it directly from the AE plugin clicking on Get Player

## lottie light

The extension includes `lottie_light.js` which will play animations exported as svgs.

## NPM

```bash
npm install lottie-web
```

## Bower

```bash
bower install lottie-web
```

### HTML

* get the lottie.js file from the build/player/ folder for the latest build
* include the .js file on your html (remember to gzip it for production)

  ```markup
  <script src="js/lottie.js" type="text/javascript"></script>
  ```

You can call lottie.loadAnimation() to start an animation.\
It takes an object as a unique param with:

* animationData: an Object with the exported animation data.
* path: the relative path to the animation object. (animationData and path are mutually exclusive)
* loop: true / false / number
* autoplay: true / false it will start playing as soon as it is ready
* name: animation name for future reference
* renderer: 'svg' / 'canvas' / 'html' to set the renderer
* container: the dom element on which to render the animation

It returns the animation instance you can control with play, pause, setSpeed, etc.

```javascript
lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});
```

## Usage

animation instances have these main methods:\
**anim.play()** \
\
**anim.stop()** \
\
**anim.pause()** \
\
**anim.setLocationHref(locationHref)** -- one param usually pass as `location.href`. Its useful when you experience mask issue in safari where your url does not have `#` symbol. \
\
**anim.setSpeed(speed)** -- one param speed (1 is normal speed) \
\
**anim.goToAndStop(value, isFrame)** first param is a numeric value. second param is a boolean that defines time or frames for first param \
\
**anim.goToAndPlay(value, isFrame)** first param is a numeric value. second param is a boolean that defines time or frames for first param \
\
**anim.setDirection(direction)** -- one param direction (1 is normal direction.) \
\
**anim.playSegments(segments, forceFlag)** -- first param is a single array or multiple arrays of two values each(fromFrame,toFrame), second param is a boolean for forcing the new segment right away\
\
**anim.setSubframe(flag)** -- If false, it will respect the original AE fps. If true, it will update as much as possible. (true by default)\
\
**anim.destroy()**<br>

lottie has 8 main methods:\
**lottie.play()** -- with 1 optional parameter **name** to target a specific animation \
\
**lottie.stop()** -- with 1 optional parameter **name** to target a specific animation \
\
**lottie.setSpeed()** -- first param speed (1 is normal speed) -- with 1 optional parameter **name** to target a specific animation \
\
**lottie.setDirection()** -- first param direction (1 is normal direction.) -- with 1 optional parameter **name** to target a specific animation \
\
**lottie.searchAnimations()** -- looks for elements with class "lottie" \
\
**lottie.loadAnimation()** -- Explained above. returns an animation instance to control individually. \
\
**lottie.destroy()** -- To destroy and release resources. The DOM element will be emptied.\
\
**lottie.registerAnimation()** -- you can register an element directly with registerAnimation. It must have the "data-animation-path" attribute pointing at the data.json url\
\
**lottie.setQuality()** -- default 'high', set 'high','medium','low', or a number > 1 to improve player performance. In some animations as low as 2 won't show any difference.<br>

## Events

* onComplete
* onLoopComplete
* onEnterFrame
* onSegmentStart

you can also use addEventListener with the following events:

* complete
* loopComplete
* enterFrame
* segmentStart
* config\_ready (when initial config is done)
* data\_ready (when all parts of the animation have been loaded)
* DOMLoaded (when elements have been added to the DOM)
* destroy

#### Other loading options

* if you want to use an existing canvas to draw, you can pass an extra object: 'renderer' with the following configuration:

  ```javascript
  lottie.loadAnimation({
  container: element, // the dom element
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData, // the animation data
  rendererSettings: {
    context: canvasContext, // the canvas context
    scaleMode: 'noScale',
    clearCanvas: false,
    progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
    hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
  }
  });
  ```

  Doing this you will have to handle the canvas clearing after each frame

  Another way to load animations is adding specific attributes to a dom element.

  You have to include a div and set it's class to lottie.

  If you do it before page load, it will automatically search for all tags with the class "lottie".

  Or you can call lottie.searchAnimations() after page load and it will search all elements with the class "lottie".
* add the data.json to a folder relative to the html
* create a div that will contain the animation.

  **Required**

  . a class called "lottie"

  . a "data-animation-path" attribute with relative path to the data.json

  **Optional**

  . a "data-anim-loop" attribute

  . a "data-name" attribute to specify a name to target play controls specifically

  **Example**

  ```markup
  <div style="width:1067px;height:600px" class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>
  ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://airbnb.gitbook.io/lottie/web/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.