Step By Step Implementation of Lottie Js
Posted By : Saloni Arora | 20-Nov-2018
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.
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
CONCLUSION: By this we can implement svg animations in our project for the high quality animation graphics.
Hope, it will be helpful for you.