Props

All the possible props for vue3-lottie are listed below.

`animationData`

This is the animation data that is used to render the animation. This prop is required if the animationLink prop is not provided. You will have to import a json file that contains the animation data and pass it via this prop.

You can go on https://lottiefiles.com/featured and find a lot of animations. When you find one you like, you can download it as a Lottie JSON file and import it into your app to use it as the animation data.

This component does not support dynamic animations. You cannot change animation data once it has been initialized. Create multiple copies of the component or rerender the component if you want to change the animation that is shown.

Type	Default value	Required	Accepted values
Object		Yes (if animationLink is not provided)	JSON object containing Lottie animation data

animationData demo

`animationLink`

This is the animation data that is used to render the animation. This prop is required if animationData prop is not provided. You can use the URL for the json file that contains the animation data.

For example: https://assets5.lottiefiles.com/packages/lf20_vmollwvl.json.

If you're getting your lotties from lottiefiles.com, you can use the Lottie Animation URL.

Type	Default value	Required	Accepted values
String	""	Yes (if animationData is not provided)	URL for a Lottie JSON object

animationLink demo

`width`

Width of the lottie animation container (Numbers correspond to pixel values).

Type	Default value	Required	Accepted values
Number or String	'100%'	No	`Any valid css unit in String` or a `number that will become a px value`

width demo

`height`

Height of the lottie animation container (Numbers correspond to pixel values).

Type	Default value	Required	Accepted values
Number or String	'100%'	No	`Any valid css unit in String` or a `number that will become a px value`

height demo

`speed`

Speed of the lottie animation. This has to be a number greater than 0. You can use values between 0 and 1 to slow down the animation and values greater than 1 to speed it up.

Type	Default value	Required	Accepted values
Number	`1`	no	`Number > 0`

`direction`

The direction of the animation. alternate will play the animation in reverse when it reaches the end. This is really cool for animations that are looping.

Type	Default value	Required	Accepted values
String	`forward`	no	`forward` or `reverse` or `alternate`

direction 'alternate' demo

`loop`

A prop for detailing if you want the animation to loop. A number value would be how many times the animation should loop.

Type	Default value	Required	Accepted values
Number or Boolean	`true`	no	`Number > 0` or `true` or `false`

loop demo

Useful for animations that are should only be played once.

`autoPlay`

A prop for detailing if you want the animation to play automatically.

Type	Default value	Required	Accepted values
Boolean	`true`	no	`true` or `false`

`pauseAnimation`

A prop to control the play and pause states of the animation.

If you are controlling the animation state by yourself please be sure to not set playOnHover or pauseOnHover to true.

Type	Default value	Required	Accepted values
Boolean	`false`	no	`true` or `false`

pauseAnimation demo

`pauseOnHover`

A prop to pause the animation on hover.

Type	Default value	Required	Accepted values
Boolean	`false`	no	`true` or `false`

pauseOnHover demo

`playOnHover`

A prop to play the animation on hover.

This will also automatically pause the animation when it is initalized.

Type	Default value	Required	Accepted values
Boolean	`false`	no	`true` or `false`

playOnHover demo

`delay`

A prop to delay the animation. This is useful if you want to show the animation for a certain amount of time before it starts. This is a number value that is in milliseconds.

Type	Default value	Required	Accepted values
Number	`0`	no	`Number > 0`

`backgroundColor`

A prop to change the background color of the container. This will be passed directly into the css for this component.

Type	Default value	Required	Accepted values
String	`transparent`	no	Any valid CSS color or hex based rgb value

`assetsPath`

Use this prop if your lottie animation needs to load assets from a different path. This is useful if you are using a CDN to host your assets. Refer to the examples section for a demo on how to use this prop.