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 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.


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.

Abhishek Verma is a tech enthusiast and freelance tech journalist. He has been writing about technology for 4 years. He is passionate about every aspect of technology, especially Android. Abhishek’s articles have been referred by India Today, 360Gadgets, Times of India, MacRumors, AndroidPolice, AndroidAuthority, BGR, Zee News, and many more.



    Great post with effective steps to include LottieFiles animation on website. Lottiefiles is community powered online library of animations, whereas including Lottiefiles animation on website will provide several benefits.

    Your each of the suggested steps to add Lottiefiles animation on website and to remove Lottiefile player
    controls are clear, easy to understand and follow, whereas following these steps will be helpful.

    Truly helpful post and thanks for sharing.

  2. 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

Your email address will not be published.