How to Add LottieFiles Animation on any Website

LottieFiles is an online library of animations for animators, and developers. It is a community-powered library of animations that are based on JSON file not GIF. We can add LottieFiles animation on any type of website and it works seamlessly on any platform like Web, iOS, Android, Windows, etc. We can add LottieFiles animation on an HTML website easily. It is completely open-source and the code is available on Github.

In this tutorial, we will learn How to add LottieFiles Animation on any website. But before that let’s have a look at the benefits of LottieFiles.

Benefits to Add LottieFiles Animation on Website

  1. Higher FPS: LottieFiles animation runs at 60 FPS seamlessly. Every animation of LottieFiles is crystal clear.
  2. Smaller File Size: You may be wondering that why don’t we use GIFs for animations. So, let me tell you that size of LottieFiles is 600% smaller than normal GIF images.
  3. Platform Support: They run on whatever platform you’re using from the Web, Android to Windows, and iOS. It works without any issues.
  4. Non-techies friendly: Either you’re a developer or just an animator with less to no knowledge of coding. It works for everyone.
  5. Lottie Editor: It provides Lottie Editor that lets anyone create animations with just drag and drop. Yup, you read that right, it’s that simple.
  6. After Effects and Figma: It can be used with Adobe After effects and Figma.
  7. Trust: LottieFiles are trusted by huge brands like Google, Microsoft, Spotify, and Netflix.

Now, we all know about the benefits of using LottieFiles Animation on the Website. So, let’s have a loot at the tutorial on how to add LottieFiles Animation on the Website.

Steps to Add LottieFiles Animation on Website

  1. Open LottieFiles website: The first step to add Lottiefiles animation on any website, you need to open the LottieFiles website. You can access the LottieFiles website by entering www.lottiefiles.com in the web browser of your choice.
    How to Add LottieFiles Animation on Website
  2. SignUp for LottieFiles account: The next step to add LottieFiles animation on any website, you need to signup for an account. You can easily signup with your email or you can use the social signup buttons through which you can signup with Google or Facebook.
  3. Choose your role: After signing up for an account, you need to choose your role between designer and developer. You can choose whatever suits you. How to Add LottieFiles Animation on Website
  4. Go to Dashboard: After successfully creating your account on LottieFiles, just go to their dashboard.How to Add LottieFiles Animation on Website
  5. Choose Animation to Add on the website: On the Dashboard, you will see tons of amazing animation. You need to choose one to add to your website.How to Add LottieFiles Animation on Website
  6. Choose HTML as Platform: When you choose an animation and choose one, you’ll get a box popped up, and when you scroll down it will ask you for a platform where you want to use it. You need to choose HTML from the list.Choose HTML
  7. Copy Embed Code: After choosing HTML, you’ll be redirected to a new page, where you’ll be given a lot of options and an Embed, you can modify the behavior of animation through those controls. And then copy the Embed Code by copying from the page, by clicking the Copy Code button.How to Add LottieFiles Animation on Website
  8. Open HTML File: After copying the code, you need to open the HTML file of your website. I am using CodePen for this tutorial.
  9. Paste the Embed Code: After opening the HTML file of your website, you need to figure out the particular section of your website where you want to show this animation. After that just paste the code you copied and hit save.
  10. Codepen

Now, the animation is added on your website, just refresh and see it in action.

Remove the LottieFile Player Controls from website

You may be getting player controls after embedding, and that’s depleting the beauty of your animation, so, here I am to help you to remove that player control from the animation.

  1. Open HTML File: Open the HTML file that you just saved and find out the code of the LottieFile Animation you just added.
  2. Edit the code: Find “loop controls” in the code like below and remove it.
  3. Remove Code
  4. Save the HTML File: Now, after removing that part just save the file.
  5. Preview: After saving file check the preview and you’ll see the player controls disappeared.

Conclusion

I loved the concept of LottieFile and its the best way to add animations to your website, without worrying about bulky files and scripts. I would recommend you to try it out. I am a Freelance web developer and I often add LottieFiles animations in my client websites, and it looks awesome. If you’re a designer, I would recommend you to please try their Lottie Editor and contribute your animations to their library as its a community-powered library. If you’re a web developer, I would recommend you to add LottieFiles animations in websites.

If you found this article helpful, then please share it on your social media and spread this piece of helpful article. Follow InnovativeBeast on Twitter and Reddit.

This Article is written by Abhishek Verma, you can follow him on Twitter and message them to talk about a particular topic.

Default image
Abhishek Verma
Abhishek Verma is a Blogger and WordPress developer. He is working on WordPress from about 2015. He started ChampHub in 2018 to share his knowledge about WordPress and Blogging with the whole world. Before starting InnovativeBeast, he was writing for few other online portals like ChampHub, StayMeOnline etc

One comment

  1. This is so great I think others could benefit from learning about it. Thanks, this is exactly what I was looking for. This is more than I expected.
    This is so great I don’t need to make any revisions to it at all.
    Well done—and ahead of deadline too!

Leave a Reply