These are attributes that can be set on the component in HTML.

| Name | Type | Description |
| --- | --- | --- |
| src | string | The source path or url for the Lottie animation. |
| autoplay | boolean | Whether the animation should autoplay. |
| loop | boolean or number | Whether the animation should loop (true or false). Alternatively, pass a number to set the number of loops an animation should play before pausing. |
| speed | number | Speed of the animation. 1 represents the normal (real-time) speed of the animation; values less than 1 are slower than normal, and higher values are faster. For example, 0.5 plays twice as slow and 2 plays twice as fast.
| direction | 1, -1, forwards, backwards | Direction in which the animation plays. 1 is the same as forwards and -1 is the same as backwards.
| preserveAspectRatio | valid preserveAspectRatio SVG value | The value to use for the preserveAspectRatio attribute on the rendered SVG. Use none to allow the Lottie to stretch. Default is xMidYMid meet.

Example usage:

`html
src="https://cdn.lottielab.com/l/8ok2qzQDyoFeyf.json"
autoplay
loop="true"
speed="0.5"
direction="backwards">

`

##### Methods

These methods provide controls for playing, stopping, pausing, seeking, and looping the Lottie animation.

| Name | Parameters | Description |
| ---- | ---------- | ----------- |
| play() | / | Plays the animation. |
| pause() | / | Pauses the Lottie animation at the current frame. |
| stop() | / | Pauses the animation and resets it to the beginning. |
| seek(timeSeconds) | timeSeconds: number | Moves the animation to a specific point in time, in seconds. |
| seekToFrame(frame) | frame: number | Moves the animation to a specific frame. |
| loopBetween(timeSeconds1, timeSeconds2) | timeSeconds1: number, timeSeconds2: number | Loops between two points in time (in seconds) within the Lottie animation. |
| loopBetweenFrames(frame1, frame2) | frame1: number, frame2: number | Loops between two frames within the Lottie animation. |
| toInteractive() | / | Converts the Lottie to an interactive Lottie. You can then use the .interactivity field to access the interactivity API. See docs.
| toPlayback() | / | Converts the Lottie to an ordinary, non-interactive Lottie.

Example usage:

`javascript
// get the reference to an animation from the DOM
// (it's also possible to create the player programmatically)
const lottie = document.querySelector('lottie-player#my-lottie');

// seek to 5 seconds into the animation
lottie.seek(5);

// pause
lottie.pause();
`

##### Properties

These properties can be accessed and modified on the component class to control various aspects of the Lottie animation.

| Name | Type | Description |
| ---- | ---------- | ----------- |
| playing | boolean | Whether the Lottie animation is playing at the moment. Setting it has a similar effect as calling play() or pause(). |
| currentTime | number | Current position, in seconds, of the Lottie animation playhead. Setting it has a similar effect as calling seek(). |
| currentFrame | number | Current position, in frames, of the Lottie animation playhead. Settting it has a similar effect as calling seekToFrame(). |
| frameRate | number (read-only) | Returns the preferred frame rate of the Lottie. Note that, being an implicit vector format, the animation technically has an infinite frame rate.
| duration | number (read-only) | Duration of the Lottie animation in seconds. |
| durationFrames | number (read-only) | Duration of the Lottie animation in frames. |
| loop | boolean or number | Whether the animation should loop (true or false). Alternatively, it can be a number to set the number of loops an animation should play before pausing. |
| direction | 1 or -1 | Direction in which the animation is played. A value of 1 plays the animation in a _forwards_ direction, whereas -1 plays the animation in _reverse_. |
| speed | number | Current speed of the animation. 1 is normal speed; values above 1 are faster and below are slower. For example, 0.5 is twice as slow and 2 is twice as fast.
| animation | AnimationItem from lottie-web | Returns the underlying lottie-web instance. Note that the exact behavior of the underlying instance is not covered by the semver guarantee.
| animationData | Lottie JSON | Returns the actual underlying Lottie JSON.
| interactivity | LottielabInteractivity, undefined if not interactive | Provides access to the interactivity API if the Lottie is interactive.

`javascript
// get the reference to an animation from the DOM
// (it's also possible to create the player programmatically)
const lottie = document.querySelector('lottie-player#my-lottie')

// play the animation
lottie.playing = true;

// seek to specific time
lottie.currentTime = 3; // seeks to 3 seconds

// get the total duration in frames
let animationDuration = lottie.durationFrames;
console.log(Duration in frames: ${animationDuration}); // Duration in frames: 400
`

##### Events

You can wait for the player to load by .addEventListener('load', fn), or handle
loading errors using .addEventListener('error', fn):

`javascript
const lottie = document.querySelector('lottie-player#my-lottie')

lottie.addEventListener('load', () => {
console.log('Lottie is loaded now!');
});

lottie.addEventListener('error', (e) => {
console.log('Lottie failed to load!', e);
});
`

**Subscription to all other events is done using .on() and .off() on the
player:**

`javascript
const lottie = document.querySelector('lottie-player#my-lottie')
lottie.on('finish', function listener() => {
console.log('Playback finished.')
lottie.off('finish', listener); // Stop listening to event
});
`

For some events, the handler will receive an argument.

| Name | Argument | Description |
| ---- | ---------- | ----------- |
| time | TimeEvent | Triggered whenever time passes for the Lottie. See TimeEvent for more details.
| loop | none | Triggered when Lottie playback loops around.
| finish | none | Triggered when the Lottie finishes playing and stops.

| Name | Type | Description |
| ---- | ---------- | ----------- |
| lottie | Lottie animation data | Deserialized Lottie JSON of the animation to display. Alternatively, you can pass a URL to fetch the lottie from, see src below. |
| src | string | URL from where to load the animation. This can be a relative path, but it will be fetched using an HTTP request, not bundled. See also lottie above. |
| ref | React ref | If provided, the ref will be populated with a full player instance capable of controlling the animation. See "Controlling the animation" below. |
| preserveAspectRatio | valid preserveAspectRatio SVG value | The value to use for the preserveAspectRatio attribute on the rendered SVG. Use none to allow the Lottie to stretch. Default is xMidYMid meet. |

If you want the Lottie to play autonomously, either set autoplay or playing
and any other desired playback settings:

| Name | Type | Description |
| ---- | ---------- | ----------- |
| autoplay | boolean | Incompatible with playing. Whether the animation should play as soon as the React component is mounted. |
| playing | boolean | Incompatible with autoplay. Controls whether the animation is currently playing or paused. |
| loop | boolean or number | Whether the animation should loop (true or false). Alternatively, pass a number to set the number of loops an animation should play before pausing. |
| direction | 1 or -1 | Direction in which the animation is played. A value of 1 plays the animation in a _forwards_ direction, whereas -1 plays the animation in _reverse_. |
| speed | number | Current speed of the animation. 1 is normal speed; values above 1 are faster and below are slower. For example, 0.5 is twice as slow and 2 is twice as fast. |

For full control (see below), you can pass one of the following props, both of
which are incompatible with the above props:

| Name | Type | Description |
| ---- | ---------- | ----------- |
| time | number | Only in full control mode, see below. Time of the playhead in seconds. |
| frame | number | Only in full control mode, see below. Current frame of the playhead. |

#### Events

The following event handler props can be provided. Some of them will be called
with an event argument.

| Name | Argument | Description |
| ---- | ---------- | ----------- |
| onLoad | none | Called when the Lottie animation loads. |
| onError | Error | Called when the Lottie animation fails to load. |
| onTime | TimeEvent | Called on each passage of time for the Lottie animation. See the definition of TimeEvent for details. |
| onLoop | none | Called when the playback loops around. |
| onFinish | none | Called when the playback finishes and stops. |
| onTransitionStart | TransitionEvent | Called when a state transition starts (for Interactive Lotties). See INTERACTIVITY.md. |
| onTransitionEnd | TransitionEvent | Called when a state transition ends (for Interactive Lotties). See INTERACTIVITY.md. |

##### Controlling the animation

The single-direction data flow enforced by React means that some features, such
as manually pausing and playing the animation or seeking it, are not readily
available, since they would require bi-directional data flow.

There are three ways to address this, corresponding to three levels of control.

1. If you want to opt for a strict single-direction data flow, you can pass a
time or frame prop to the component, which will always ensure the animation
is at the specified time (in seconds) or frame. In this case, you have to
implement your own playback logic if required.
2. If you want to only control whether or not the Lottie is playing, pass in a
playing prop with a boolean value.
3. For maximum flexibility, you can get access to the underlying player instance by passing a ref:

`javascript
import Lottie from '@lottielab/lottie-player/react';
import myAnimation from './path/to/your/animation.json';
// For TypeScript, also do:
// import { ILottie } from '@lottielab/lottie-player/react'

const MyComponent = () => {
const lottieRef = useRef(null); // TypeScript: useRef(null)
return (


The object provided to your ref will conform to the ILottie interface, _which
the web component also implements_. You can refer to the "Properties" and
"Methods" documentation in the Web Component section above.

Note that, using methods and properties of the provided ILottie, it's possible
to override the passed-in props.