Nuxtjs + Lottie

We all heard about Nuxtjs and Lottie. Anyway just for a short introduction, Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. And Lottie is a JSON-based animation file format that you can use on any platform as easily as static assets.

Animation created using ‘Adobe After Effects’ converted using Lottie can be used in Nuxtjs.

This article says how to add a lottie animation to your Nuxtjs project step by step.

1. Getting started

In your project add the below code to the file nuxt.config.js

head: { 
//...... 
script: [ 
{src:'https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js'},       {src:'https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js'},       {src:'/js/lottie.js'}     
] 
}

This will add external resources of Lottie-player and Lottie-interactivity to the project. The ‘lottie.js’ is the source of your Lottie animation where you are going to add the Lottie code.

2. Add the Lottie-interactivity

In the ‘static’ folder in the Nuxtjs project, create a new folder named ‘js’ and inside it a file ‘lottie.js’. Add the below code :

document.addEventListener('DOMContentLoaded', function() {    LottieInteractivity.create({   
mode: 'scroll',   
player: '#firstLottie',  
actions: [             
{ 
visibility:[0,0.3], //animation start when 30% of viewport reached             type: "stop",             
frames: [0]         
},           
{             
visibility: [.3, .8], // percentage of the viewport             type: 'seek',             
frames: [0, 42]           
}         
] });  });

‘firstLottie’ is the name of the player ie; ID set to the Lottie web component on the Html page. The animation occurs while scrolling (mode:’scroll’). Initially, there will not be any animation, when the 30% of viewport reached (visibility:[0,.3]) animation starts. According to the required visibility, you can set the percentage of the viewport.

To know more about Lottie-interactivity refer to the link

Lottie Player - Interactivity Guide

3. Add the Lottie-player

Lottie-player can be added to the required Vue page where you want to place the animation.

<lottie-player id="firstLottie" class="plugin_img" src="(add your source file)" />

Remember the ID in the Lottie-interactivity and Lottie-player should be the same.

Enjoy the Lottie animation in your Nuxtjs project.