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
- Higher FPS: LottieFiles animation runs at 60 FPS seamlessly. Every animation of LottieFiles is crystal clear.
- 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.
- Platform Support: They run on whatever platform you’re using from the Web, Android to Windows, and iOS. It works without any issues.
- Non-techies friendly: Either you’re a developer or just an animator with less to no knowledge of coding. It works for everyone.
- 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.
- After Effects and Figma: It can be used with Adobe After effects and Figma.
- 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
- 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.
- 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.
- 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.
- Go to Dashboard: After successfully creating your account on LottieFiles, just go to their dashboard.
- 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.
- 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.
- 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.
- Open HTML File: After copying the code, you need to open the HTML file of your website. I am using CodePen for this tutorial.
- 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.
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.
- Open HTML File: Open the HTML file that you just saved and find out the code of the LottieFile Animation you just added.
- Edit the code: Find “loop controls” in the code like below and remove it.
- Save the HTML File: Now, after removing that part just save the file.
- 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.
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.