Home
Blogger

How to add Lottie Animations to Blogger?

 We will add Lottie files animations in our blogger post or anywhere on the blog in this post.

Table of Contents

Introduction

Lottie is a library for iOS, Android, and React Native that renders After Effects animations in real-time, allowing native apps to use animations as easily as static artefacts. Lottie makes use of animation data exported as JSON files from Bodymovin, an open-source After Effects extension.

Some other features of Lottie

Providing animated after effects files with the ability to render them anywhere, on any platform is the best feature of lottiefile.com but other than that they also provide some additional functionalities on their website or as plugins for the tools we daily use. Some of their features are listed below:

  • You can download a Lottie file viewer as an app for windows, mac, android and iOS to preview the Lottie files anywhere.
  • Also, provide a Lottie editor on their own website and a plugin for After Effects.
  • Their plugins are also available for vscode and Figma to work flawlessly.
  • Lottie animations can be integrated anywhere. In iOS or Android apps, websites or in any programs for pc.
  • They provide both free and paid animations.

why this post

Today I got an idea when I saw a 404 page on my website.

Why not add some cool looking animations instead of casual 404 text

So I had some experience with Lottie because I used it many times in designing apps. So I started searching for a cool 404 animation on their website and found one. Got the HTML code provided by them to add Lottie animations to any website but had a little issue. 

My blog is hosted on blogger and blogger works differently. Its theme code is purely written in XML so blogger doesn't need to support every syntax of HTML then I searched google for "How to add Lottie animations in blogger" but there wasn't a single website to help. Then I decided to solve it myself and help others using blogger for their blog and add cool animations to attract readers. Then Let's see how I solved the problem.

Read also :

Adding Lottie animation

The code for embedding animations on HTML websites can be found on lottiefile.com but I am writing step by step here.

Step 1: Head over to the Lottie files website and find a great animation you want to use in your blog.

Step 2: Now go to your blogger dashboard and open the theme HTML page by navigating to the themes section and click on the down arrow next to customize button and click edit HTML.

Step 3: Copy the code below and paste it between the <head> and </head> tag of your theme.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
This will add the Lottie player javascript file which is needed to run the animation.

Step 4: Now go to the Lottie files website and click on any animation you want to add and copy the link to that animation(link will be in JSON format). The link will look something like given below

https://assets8.lottiefiles.com/packages/lf20_gexkho5u.json

Step 5: Now go to the code in your HTML where you want to add the Lottie animation and add the code given below.

<lottie-player src="url_of_the_animation"  background="transparent"  speed="1"  
style="width: 300px; height: 300px;" hover loop controls autoplay></lottie-player>

Before copy-pasting the code change the url_of_the_animation with the actual URL from step 4. Now just before pasting the code read the full post and learn about the attributes from the code.

  • hover: add this attribute in code to play the animation on hover else remove it.
  • loop: to repeat the animation infinitely.
  • controls: to show controls like play, pause below the animation. Remove the attribute if you don't want the controls to be visible.
  • autoplay: to start playing the animation when the page is loaded.

Step 6: Now here comes the issue while using the above code. Because blogger uses XML format for themes it doesn't support attributes without any value or a "=" sign. So we have to slightly modify the code and the modified code will look something like below.

<lottie-player src="https://assets8.lottiefiles.com/packages/lf20_gexkho5u.json"  background="transparent"  speed="1"  
style="width: 300px; height: 300px;" hover="" loop="" controls="" autoplay=""></lottie-player>

now copy this code and remove the attributes hover, loop, controls and autoplay if you don't want them to be in your animation.

Now you are ready to add cool animations to your blogger blog but and every time you want to add the animation just copy the above code and add an animation URL to it.

Tips

If you want to customize the animation more easily then when you open the animation on the Lottie website there is an option to integrate Lottie with HTML Android iOS etc. just select HTML and you will be redirected to a small editor where you can customize the animation height, width, speed and background etc. and get the code.

Hello! Myself Tejas Mahajan. I am an Android developer, Programmer, UI/UX designer, Student and Navodayan.