MASIGNASUKAv102
6510051498749449419

Lottie animation in vuejs

Lottie animation in vuejs
Add Comments
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

As an Engineering Lead with deep expertise in Artificial Intelligence, Cybersecurity, and Systems Architecture, I guide teams in building innovative, secure, and scalable solutions.I am passionate about tackling challenging technical problems, fostering engineering excellence, and delivering solutions that balance innovation, security, and performance. I actively share knowledge through blogging and community engagement, contributing to the advancement of AI and cybersecurity practices.

  1. I high appreciate this post. It’s hard to find the good from the bad sometimes. but I think you’ve nailed it! would you mind updating your blog with more information?
    Music streaming

    ReplyDelete