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
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,
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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