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.

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

`noMargin` New

Currently the lottie animation has a auto margin applied to it to center it in the container. This prop will remove that margin. This is useful if you want better control over the positioning of the animation without needing to override the margin via css.

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

`scale` New

Have you ever found a lottie animation that is perfect for your project but it is too big or too small? Now you can use the scale prop to scale the animation to the ratio that you want.

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

scaling demo

This prop will do the scale from the center of the animation. This prop will also ONLY scale the svg inside the container. It will not scale the container itself. You should use the width and height props to change the size of the container.

There is a chance that the animation could be blurry with this prop due to a downstream process for how the lottie animation is rendered. Verify that the animation looks okay when using this prop. For most animations this should not be an issue since they are vector based.

`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.