Releases: garbit/lottie-web-vue
v2.0.7
v2.0.4
Complete rewrite and new props + methods
Added Vue 3 support + Typescript and will continue to target Vue 3. Those using Vue 2.x you must use v1.2.1. The new plugin will continue to improve on Vue 3 now that it has been officially launched.
Summary
- Added new props, methods, and events
- Vue 3 support
New Props:
- speed to set playback speed
New Methods:
-
setSpeed [number: speed]
Usingthis.$refs.anim.setSpeed(2)you can set the playback speed to2. Default speed is set to 1. -
goToAndStop [Position: frame number or seconds, isFrame: boolean]
Usingthis.$refs.anim.goToAndStop(10, trueyou can set the specific frame you wish the animation to stop at. Pass in the frame number or seconds to play and if the first value is a frame or a time as true/false. This function will raise an emit (add @stopped="Yourfunction()" to your lottie-animation listen for it). -
goToAndPlay [Position: frame number or seconds, isFrame: boolean]
Usingthis.$refs.anim.goToAndPlay(50, true)allows you to specify the start time of the animation in either frame number (passing isFrame true/false if value is a frame or in seconds). -
setDirection [Direction: -1: reverse, 1: forwards]
Usingthis.$refs.anim.setDirection(-1)you can reverse your animation. You can pass in eitherAnimationDirection.to reverse the animation or1to play forwards. Default playback is1. -
getDuration [inFrames: true/false] (Using
this.$refs.anim.getDuration(true)you can retrieve the current duration of the animation in frames or seconds (false). If you pass true, function returns duration in frames, if false, duration is passed back in seconds. Default is false (returned in seconds). -
destroy
Usingthis.$refs.anim.destroy()you can destroy the animation from the DOM.
New Events:
- @segmentStart (Event is fired when the animation enters each animation segment)
- @stopped (Playing the animation using
goToAndStop()function will raise an event once the animation has stopped at the designated frame.)
