Methods

vue3-lottie has a few methods that you can call directly from your component if needed. Add a ref to the vue3-lottie component and then call the methods you want. Look at the examples provided in the examples section for how to use these methods.

If you are using the composition API, you can reference the element directly. This applies for the script setup syntax as well as the setup function.

play

You can call this method to play the animation. It will resume the animation if it is paused and will start the animation if it is stopped. This method takes no arguments.

lottieContainer.value.play()

pause

You can call this method to pause the animation. It will only pause the animation if it is playing. This method takes no arguments.

lottieContainer.value.pause()

stop

You can call this method to stop the animation. It will reset the animation to the first frame. This method takes no arguments.

lottieContainer.value.stop()

destroy

You can call this method to destroy the animation. It will remove the animation from the DOM. This method takes no arguments.

lottieContainer.value.destroy()

setSpeed

You can call this method to change the speed of your animation. This method takes a single argument which is the speed of the animation. The speed has to be a number > 0. You can also set this as a prop during initialization.

• speed: Any number greater than 0.

lottieContainer.value.setSpeed(2)

setDirection

You can call this method to change the direction of your animation. This method takes a single argument which is the direction of the animation. If you want the animation to alternate use the direction prop.

• direction: Either 'forward' or 'reverse'

lottieContainer.value.setDirection('forward')

getDuration

You can call this method to get the duration of your animation. This method takes one argument.

• inFrames: If true, returns duration in frames, if false, in seconds. This is set to true by default.

lottieContainer.value.getDuration(true)

goToAndStop

You can call this method to go to a specific frame of your animation. The animation will be stopped at the end of this call. This method takes two arguments.

• frame: numeric value
• isFrame: defines if first argument is a time based value or a frame based. This value is set to true by default.

lottieContainer.value.goToAndStop(10, true)

If you set the second argument to false you will be moving in seconds. (10 seconds in this example).

goToAndPlay

You can call this method to go to a specific frame of your animation. The animation will be played from this frame. This method takes two arguments.

• frame: numeric value
• isFrame: defines if first argument is a time based value or a frame based. This value is set to true by default.

lottieContainer.value.goToAndPlay(5, true)

If you set the second argument to false you will be moving in seconds. (5 seconds in this example).

playSegments

You can call this method to play a specific segment of your animation. This method takes two arguments.

• segments: array. Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.
• forceFlag: boolean. If set to false, it will wait until the current segment is complete. If true, it will update values immediately. This value is set to false by default.

lottieContainer.value.playSegments([10, 20], true)

setSubFrame

You can call this method to set the subframe value. This method takes a single argument.

• useSubFrame: If false, it will respect the original After Effects fps. If true, it will update on every requestAnimationFrame with intermediate values. Default is true.

lottieContainer.value.setSubFrame(true)

updateDocumentData

This method updates text on text layers. Refer to the lottie-web docs for how to use this method.

• documentData: An object with the document data (see below supported properties and meaning)
• index: index of the text keyframe. If the text source is not keyframed, you can skip this argument. If not skipped and the source text is keyframed, it will update the current source. This value is 0 by default.

All supported properties:

• t: text value
• s: font size
• fc: fill color - array with RGB values ranging from 0 to 1
• lh: font line height
• sc: stroke color - array with RGB values ranging from 0 to 1
• j: justify

lottieContainer.value.updateDocumentData({ t: 'new text', s: 20 }, 0)