Published on December 24, 2023
Let’s face it, everyone wants comfort. Be it decorating the living room of your house or the look of your webpage. The latter might seem a bit tricky in case you want to add animations but you don’t how to. Don’t fret on it much, Animoox got you covered.
Lottie, a JSON-based animation format, stands out as an incredibly efficient animation tool. If you’re keen on sprucing up your website, leveraging its advantages is a smart move. It’s lightweight and offers the flexibility to scale up or down without compromising the quality of resolution.
You may have come across a myriad of wonderful licensed animations on the LottieFiles website or you may have had the assistance of an animator to create bespoke animations and transferred it out from After Effects with the use of free LottieFiles for After Effects extension. Whichever way you choose, you’d get the Lottie or dotLottie format file. Now, you can add it to your webpage, blog, or any other platform if it lets you edit HTML.
We did our bit of research and with the help of the information provided by Lottie Files, we’ve covered the entire thing in a simple three-step process.
1. Adding the script tag to the LottieFiles web player component
To make things smoother for your web designing process, LottieFiles manages a tool called the <lottie-player> web component. By using this custom web component, you would be able to add a Lottie player anywhere you want on your unique webpage.
In order to add the <lottie-player> web component, the first thing you need to do is get hold of the script URL to the player. Then add the script URL to the <head> section of the page HTML or anywhere else you prefer on the page.
<script src=“https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”></script>
2. Getting the URL of the animation to host on the website
One way to get the URL of the animation is to upload the Lottie file to the website. This can be uploaded using the media or file manager that you generally use. You’ll receive an URL once the upload is complete.
Another way to get the URL is if you use community-made animation on Lottiefiles. In case you do, Lottiefiles will provide you with a public link to that particular Lottie file to let you use it on your website.
3. Adding the <lottie-player> element that points to the URL of the animation.
Copy the URL once you receive it. Afterward, you need to paste the code that is provided below into your webpage. Depending on your preference, you can even paste into your web app’s HTML. Use the URL to your Lottie file as a replacement of the text in <URL HERE>.
Ensure that the Lottie URL appears inside double quotes as seen in the code below.
lottie-player src=“<URL HERE>” background=“transparent” speed=“1” style=“width: 300px; height: 300px;” loop controls autoplay></lottie-player>
And there you go, you’re all set with the completion of the three steps. Save and preview your web page to see the impact of your animation. You can rewind the procedure in case you want to replace the animation.
