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.

<template>
    <Vue3Lottie :animation-data="SkullJSON" :height="200" :width="200" />
</template>

<script setup>
import SkullJSON from './lotties/skull.json'
</script>

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.

<template>
    <Vue3Lottie
        animation-link="https://assets2.lottiefiles.com/packages/lf20_GbabwrUY2k.json"
        :height="200"
        :width="200"
    />
</template>

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.

<template>
    <Vue3Lottie
        animation-link="https://assets7.lottiefiles.com/packages/lf20_Yc2PU8DdfX.json"
        :height="300"
        :width="300"
    />
</template>

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.
<template>
    <Vue3Lottie
        animation-link="https://assets2.lottiefiles.com/packages/lf20_GbabwrUY2k.json"
        :height="200"
        :width="200"
        :loop="3"
    />
</template>

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.

<template>
    <Vue3Lottie
        animation-link="https://assets10.lottiefiles.com/packages/lf20_K0864uP6eC.json"
        :height="200"
        :width="200"
        direction="alternate"
    />
</template>

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.

<template>
    <Vue3Lottie
        animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
        :height="200"
        :width="200"
    />
    <Vue3Lottie
        animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
        :height="200"
        :width="200"
        :scale="2"
    />
    <Vue3Lottie
        animation-link="https://lottie.host/ce7c97f6-e0ea-4ea6-b8c6-50d28928f288/jjsUvZSbD1.json"
        :height="200"
        :width="200"
        :scale="3"
    />
</template>

Using the pauseOnHover prop

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

<template>
    <Vue3Lottie
        animation-link="https://assets7.lottiefiles.com/packages/lf20_eOLhtkf7AY.json"
        :height="200"
        :width="200"
        :pause-on-hover="true"
    />
</template>

Using the playOnHover prop

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.

<template>
    <Vue3Lottie
        animation-link="https://assets7.lottiefiles.com/packages/lf20_bNKaWpBPt6.json"
        :height="200"
        :width="200"
        :play-on-hover="true"
    />
</template>

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.

<template>
    <Vue3Lottie
        animation-link="https://assets10.lottiefiles.com/packages/lf20_swnrn2oy.json"
        :height="200"
        :width="200"
        :pause-animation="playState"
    />
    <button @click="playState = !playState">
        Play/Pause Animation
    </button>
</template>

<script setup>
import { ref } from 'vue'

const playState = ref(true)
</script>

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.

<template>
    <Vue3Lottie
        animation-link="https://assets1.lottiefiles.com/packages/lf20_xvz0dpbn.json"
        assets-path="https://source.unsplash.com/user/wsanter"
        :height="200"
        :width="200"
    />
</template>

Listening to events

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

<template>
    <Vue3Lottie
        animation-link="https://assets4.lottiefiles.com/datafiles/i0DrGl1AyhF4rvhqpBUbia6zUEekgKoxRociBzZy/stopwatch.json"
        :height="200"
        :width="200"
        @on-loop-complete="completed++"
    />
    <span>
        This animation has completed {{ completed }} times.
    </span>
</template>

<script setup>
import { ref } from 'vue'

const completed = ref(0)
</script>

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.

<template>
    <Vue3Lottie
        ref="lottieAnimation"
        animation-link="https://assets2.lottiefiles.com/private_files/lf30_vcwnens3.json"
        :height="200"
        :width="200"
    />

    <button @click="play">Play</button>
    <button @click="pause">Pause</button>
    <button @click="stop">Stop</button>
    <button @click="toggleDirection">Reverse</button>
    <button @click="getFrameCount"># of frames</button>
    <button @click="getTimeCount"># of seconds</button>
</template>

<script setup>
import { ref } from 'vue'

const lottieAnimation = ref(null)

const direction = ref('forward')

const play = () => {
    lottieAnimation.value.play()
}

const pause = () => {
    lottieAnimation.value.pause()
}

const stop = () => {
    lottieAnimation.value.stop()
}

const toggleDirection = () => {
if (direction.value === 'forward') {
    pause()
    lottieAnimation.value.setDirection('reverse')
    play()
    direction.value = 'reverse'
} else {
    pause()
    lottieAnimation.value.setDirection('forward')
    play()
    direction.value = 'forward'
}
}

const getFrameCount = () => {
    alert(`This animation has ${lottieAnimation.value.getDuration(true)} frames`)
}

const getTimeCount = () => {
    alert(
        `This animation takes ${lottieAnimation.value.getDuration(false)} seconds`,
    )
}
</script>

Disclaimer

Edit this page on GitHub
Table of Contents