Step By Step Implementation of Lottie Js

Posted By : Saloni Arora | 20-Nov-2018

ABSTRACT

 

In this, we are going to cover the concept of SVG animations that how to implement them with our code.  We will get a file with .json extension and we will have to implement with the help of Javascript.


Pre-Requisite: Before implementing this one should have the basic knowledge of Javascript.

 

Implementing SVG animations with the help of javascript.

 

Advantages of SVG animations over video animations.


1) It does not pixelate as we can stretch the SVG up to any pixel.

2) It opens on any browser as the video mp4 format is not supported by some browsers.

Let us go through the process of implementing it with our code.

Firstly, we will get a file named data.json.Then after that, we can follow. 

Steps to add bodymovin in our code.

 

1) npm install lottie-web

The above mentioned is the command for installing Lottie-web.

 

2) Adding code in index.html file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div id="bm"> </div>
     <script src="scripts/bodymovin.js"></script>
     <script src="scripts/index.js"></script>
</body>
</html>


In the above code, we are adding the links to the js files which are necessary to implement the bodymovin files. We will create a div with some Id and later on that Id will be used where the animation will be played. In js file, we will add this in the container property of the bodymovin HTML file 


3)In the index.js file,

 

we have to add the following things like :

renderer: SVG it implies that what type of file will be rendered.

loop: true means that the SVG animation will be played in the loop.

autoplay: true it means that the animation will play continuously.

path: in this, we need to define the path of the data.json file.

Container: In this, we are giving the Id of the section where the animation will be played

 

1
2
3
4
5
6
7
var animation = bodymovin.loadAnimation({
  container: document.getElementById('bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
})

 

 

CONCLUSION:  By this we can implement svg animations in our project for the high quality animation graphics.

 

Hope, it will be helpful for you.

Thanks,

 

 

About Author

Author Image
Saloni Arora

Saloni Arora is a very positive person she always likes to take things positively. she has a desire of being a talented Front end developer . and she is seeking to grab more opportunities in future

Request for Proposal

Name is required

Comment is required

Sending message..