How to Use Lottie Animations on Your Website?
Animations make your website pop and enhance the user experience. With interactive animations present on your landing pages, checkout page, or product catalogues, you can increase conversions up to 7% by hiding the load time of your website. You might argue that animations add an extra load on the website, leading to longer lead times. But that’s not the case if you are using Lottie Animations.
Lottie is a JSON-based file format introduced by Airbnb. Since it is a vector format, it redraws itself according to the resolution of the screen, which is why you will never find a pixelated Lottie Animation. Furthermore, Lottie animations are ten times faster to ship and 600 per cent smaller than GIF files!
Don’t believe us? Here is a size comparison of Lottie files with PNG and GIF from the lottiefiles.com:
By this point, you should be convinced of the several advantages that Lottie Animations can offer because this post will discuss how you can use Lottie animations on your website!
This post consists of two parts; in the first part, we will learn the technicalities (which are from minimum to none) of adding Lottie animations to your website. And in the second one, you will learn how to make basic customizations to your animations.
How to Add Lottie Animations to Your Website Using HTML Script
1. Find the Lottie Animation You Want to Add
Fortunately, there is a huge repository of Lottie files present on the internet, where you can either purchase animations or get them for free.
Simply go to lottiefiles.com and look for the Discover option at the top. You will find a list of options, including Free Animations and Marketplace. A similar yet powerful marketplace is about to get launched on Vidalgo. Using our AI-driven technology, people are going to be able to pick any animation they desire and personalize it according to their specific needs (Stay tuned!)
You can use either of the two, depending upon your current budget. However, most of the users find their needs fulfilled by the free Lottie Animations present on the web page, so they hardly ever resort to buying one.
If you are looking for something particular, let’s say ‘arrows,’ you can always use the search bar present at the very time. Search with a common keyword, and what you need will appear in front of you. Here’s what I got when I searched ‘arrows’:
You can scroll down and choose from hundreds of ‘arrow’ animations available for free.
2. Get the URL of Your Chosen Lottie Animation
Once you have your animation, click on it to open up this:
Below your animation, you will see a URL under the heading ‘Lottie Animation URL.’ This is a public link you need to add to you the Lottie web player.
If you have created an original Lottie animation, you will first need to upload it to lottiefiles.com by simply dragging it to the browser. From there, you can obtain the link of your ‘Private Animation’ as LottieFiles calls it, the same way.
3. Add a Lottie Web Player on Your Website
At this point, it is important to mention that this step involves accessing the HTML of your website or your webpage. If you do not have edit access, you will not be able to use LottieFiles unless you install some plugin.
A Lottie Web Player is a tool introduced and maintained by Lottie Files. It is a powerful yet convenient method to add Lottie animations to your WordPress, Wix, Shopify, or any other website.
To add the Lottie Player, copy the following script:
Now go to the HTML of your website, and paste this script either in the <head> section of your page or anywhere else you desire. Your website is ready to accept Lottie animations!
4. Add the Animation to Your Website
Once you add the web player to your website, the only thing left is to add the animation itself. You can do this by copying the following script, and adding it at the position where you want your animation to appear:
<lottie-player src=”<URL HERE>” background=”transparent” speed=”1″ style=”width: 300px; height: 300px;” loop controls autoplay></lottie-player>
What you see above is a Lottie web player component that points to your animation. It includes ‘URL HERE’ present in the brackets. At this point, you will make use of the copied URL of your desired animation. Place that URL to replace ‘URL HERE,’ and make sure it appears within double-quotes.
Save your webpage and preview the running animations!
5. Customizing Your Lottie Animation
The Lottie web component you just copied to run your Lottie Animations has some predefined settings. However, you can change these settings to better fit your webpage’s theme and the overall feel.
By default, the script keeps the background transparent, so your web page’s background is visible from behind. But if you are aiming for a different colour, change the word transparent in double-quotes to HTML supported colour attribute (these are the colours you can write in words instead of hexadecimal value, and HTML will recognize them) or a hexadecimal value. Background changing is an extremely useful tool. For instance, if you are looking to make your animation stand out instead of blending in with the rest of your webpage, you can change the background colour and do so.
The first attribute you can see in the script is background=”transparent.”
The second attribute you can find in the Lottie web player component script is speed=”1”.
You can slow down or speed up your Lottie animations by simply changing the number present in the double-quotes. It accepts fractional values like 1.5 and 3.5 as well.
How can it be useful, you ask?
Let’s say you have an animation of a moving car; speeding it up can make it seem like it’s racing. Also, some designers might feel that their creation looks best when sped up, but you want the viewer to capture the animation’s contents fully and want to slow it down. In this way, the speed attribute can come in very handy.
Height and Width:
If you have other media present on your web page, you can use the style=”width: 300px; height: 300px;” style=”width: 300px; height: 300px;” attribute.
Using it, you can better fit your animation with the rest of your webpage, and reduced pixels also take reduced space.
Now for some animations, you want to keep playing over and over again –for instance, the animations you add in your blog or in between texts. However, the ‘Thank you’ animations that appear over the webpage when a user makes a purchase or the ‘Congratulations’ animation once you direct your user to checkout can require a one-time play. By adding the loop attribute to your script, you make the animation play in the loop. Removing it does the exact opposite.
‘Controls’ shows the web player controls on the screen, including a start-stop-pause button and a running bar. If you want your viewers to start and stop the animations themselves, you can use this tool to do the deed. However, it is left absent from your HTML script as a design element.
Save Your Efforts with the Lottie Web Player!
Having zero understanding of HTML can make it quite hard to customize your animations. But there’s nothing to worry about –you can use the https://lottiefiles.com/web-player URL to jump to the Lottie web player customization tool and do it with a few clicks!
The page looks something like this:
Now, you can find all the options discussed as a part of the HTML attribute listed here.
As you edit the options, the script at the bottom of the web player gets edited simultaneously. This way, you no longer have to take care of brackets, double quotes, or whether the attribute will understand the word ‘magenta.’ You can make everyday clicks and get the code generated for you.
Add it to your web player component and watch your customized animation playing!
If you are looking to play, share or export your animations in JSON, GIF, MOV or MP4 format, use Vidalgo viewer. We have tons of animations you can utilize, including gift cards, holiday greetings and wishes!