Emit 'complete' event when an animation finishes

[dylanbhughes]

It would be helpful if a Lottie component emitted a complete event when the animation completed a loop

[LavrovE]

yeah

[siba2893-avantica]

Any progress on this?

[xing00]

you can use addEventListener, just like:

<template>
            <Lottie :options="defaultOptions" @animCreated="handleAnimation"></Lottie>
</template>
<script>
export default {
     methods:{
         onAnimComplete() {
        // do something

         },
         handleAnimation(ami) {
              this.ami = ami
             this.ami.addEventListener('complete', this.onAnimComplete)
    },
     }
}
</script>
`

more events see this link: https://github.com/airbnb/lottie-web

[tafhyseni]

Try this out

<template>
    <lottie :options="defaultOptions" v-on:animCreated="handleAnimation" />
</template>

<script>
    export default {
        methods: {
            handleAnimation(anim) {
                this.anim = anim;
                this.anim.addEventListener('complete', () => this.animationCompleted());
            },
            animationCompleted() {
                alert('Loading Completed!');
            }
        }
    }
</script>

You can find more animation instances methods and events at AirBnb Lottie Web