Lottie animation in vuejs

Posted by Adarshreddy Adelli

Wednesday, September 2, 2020

Lottie is a JSON based animation file format that enables us to render After Effects animations in real-time as easily as shipping static images with less size. Lottie supports solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. we can also program our animation to respond to any interaction. In this, we will be adding Lottie animations in our vuejs template.

Let's get started:
For this, we will be using the lottie-vuejs library. use npm or yarn to install the library.

npm install --save lottie-vuejs

Add it to the global scope (i.e main.js file )

import Vue from 'vue'
import LottieAnimation from 'lottie-vuejs' // import lottie-vuejs
 
Vue.use(LottieAnimation); // add lottie-animation to your global scope
 
new Vue({
  render: h => h(App) 
 
}).$mount('#app')

Usage within the templates
If you don't have any Lottie json, you can get one from here
Basic usage:

<lottie-animation
    path="path/to/your/lottie-animation.json"
/>

Advanced usage:

<lottie-animation
    path="path/to/your/lottie-animation.json"
    :loop="false"
    :autoPlay="true"
    :loopDelayMin="2.5"
    :loopDelayMax="5"
    :speed="1"
    :width="256"
    :height="256"
    @AnimControl="setAnimController"
/>

@AnimControl returns the animation controller for custom event hookup.

That's all for now. Thanks for reading!
lottie-vuejs repository

Adarshreddy Adelli Wednesday, September 2, 2020 vuejs web development