Examples

Some examples of how to use the library are shown below.

Using the `animationData` prop

You can pass in the JSON object directly to the animationData prop. Your animation will load up faster using this method.

Using the `animationLink` prop

You can also pass in a valid URL link to the lottie file JSON object instead of referring to a local file. The JSON file containing the animation data must be hosted on a server that supports CORS.

Passing in `width` and `height` props

You can also pass in any valid css unit here. If you pass in a number, It will be inferenced as a pixel value. Some valid examples include 50%, 10em, etc.

Using the `loop` prop

You can pass in the loop prop to make the animation loop infinitely.

You can use this prop if you are using lotties for success or error animations. Set the loop prop to 1 if you want the animation to play only once.

Alternate the animation direction using the `direction` prop

You can set the direction to alternate to reverse the animation at the end of a loop.

Using the `scale` prop

If you have an animation that is too big or too small, you can use the scale prop to scale the animation. This is only on the internal canvas and does not affect the size of the container.

Using the `pauseOnHover` prop

If you set pauseOnHover to true, the animation will pause when you hover over the animation.

The lottie animation will play when you hover over the animation. Moving the mouse away will pause the animation at its current frame. Hovering over the container will play the animation from where it left off.

Using reactive props to control the animation

You can also use the pauseAnimation prop to control the play and pause state of the lottie animation.

Using custom assets

You can use custom assets in your lottie animations. You can use the assetsPath prop to specify the path to the assets folder. This is useful if you want to host your assets on a CDN.

Listening to events

vue3-lottie has support for events to be emitted from the animation.

Controlling the animation

You can use the animation ref to control the animation. You can use the play, pause, stop and setSpeed methods to control the animation.

Add a ref to the vue3-lottie component and then call the methods you want.

Disclaimer

Edit this page on GitHub

ApiMethods

Vue 3 Lottie

Vue 3 Lottie

Examples

Using the `animationData` prop

Using the `animationLink` prop

Passing in `width` and `height` props

Using the `loop` prop

Alternate the animation direction using the `direction` prop

Using the `scale` prop

Using the `pauseOnHover` prop

Using the `playOnHover` prop

Using reactive props to control the animation

Using custom assets

Listening to events

Controlling the animation