Adding Lottie animation in Streamlit WebApp

In this article, we will see how we can embed Lottie Animation in our Streamlit WebApp using Python.

What is Lottie Animation?

An animation file format called a Lottie, which is based on JSON, makes it simple to ship animations across all platforms. They are compact files that may be scaled up or down without pixelation and are compatible with all devices. The simplest method imaginable to create, edit, test, collaborate on, and ship a Lottie is with LottieFiles.

Since its inception in 2017, LottieFiles has provided a platform for animators and developers to quickly test, share, and exhibit their animations on the web. The Lottie Animation-based File Format (JSON) enables designers to easily transfer animations across platforms.
Lottie employs a combination of vector and raster components to produce high-quality, cross-platform animation. It aims for specific animation elements and parameters, and it allows you to add interactivity and change parameters during runtime.
These are small files that can be scaled without losing quality and can be used on any device. Developers can reuse Lottie files in their programming.

Lottie was named after German film director Charlotte 'Lotte' Reiniger, who is widely regarded as the world's leading pioneer of silhouette animation. There are no restrictions on the platforms it supports. It is available on iOS, Android, and the web.

Required Modules

For this tutorial, we will need a total of 4 modules.

• Streamlit
• Streamlit-lottie
• JSON
• requests

Write the following commands to install them:

pip install streamlit

pip install streamlit-lottie

While installing please double-check the spelling and the cases. JSON and requests come pre-installed so we don't need to install them via pip.

Prerequisite:

Users need to be familiar with Python at least. Knowledge of Streamlit would be a bonus.

Stepwise Implementation

Here we will see 2 possible ways to embed Lottie Animation in Streamlit WebApp.

Method 1: Copy the JSON file link in the code

In the first method, we can directly copy-paste the link from the Lottie website into our web app.

Step 1:

Go to Lottie Animation Official website. Then click on Sign Up (If you don't have an account, creation of an account is necessary, otherwise we can't copy-paste the animation link). otherwise Login (If you already have an account).

Step 2:

Hover over Discover then from the dropdown menu click on Free Ready-to-use Animation. Then a list of animations will be opened. Click on any of them and then you will see a Lottie Animation URL in the bottom right corner, copy that URL. We will later paste that URL in our code.

Step 3:

Now it's time to code our WebApp in Python.

import json
import requests

import streamlit as st
from streamlit_lottie import st_lottie

url = requests.get(
    "https://assets2.lottiefiles.com/packages/lf20_mDnmhAgZkb.json")
# Creating a blank dictionary to store JSON file,
# as their structure is similar to Python Dictionary
url_json = dict()

if url.status_code == 200:
    url_json = url.json()
else:
    print("Error in the URL")


st.title("Adding Lottie Animation in Streamlit WebApp")

st_lottie(url_json)

Now firstly we will import our required modules. Then we need to fetch the URL using the requests.get() method, then we will create a blank dictionary to store the JSON file returned by that URL, now user can use a variable of type str also (url_json = ""). Then we have to check if the status code returned by that URL is 200 (URL is responding properly). If so then we will store the JSON file in the variable we created earlier, otherwise, we will print some message.

Then we will add a simple Title to our WebApp (trying to keep it as simple as possible). Then using the st_lottie() class of streamlit_lottie module we will pass our variable in which we have stored the JSON as its parameter.

Output:

We can modify our animation too, like resizing it, changing the speed of animation, adding a key, changing the animation mode to reserve, etc.

import json
import requests

import streamlit as st
from streamlit_lottie import st_lottie


url = requests.get(
    "https://assets2.lottiefiles.com/packages/lf20_mDnmhAgZkb.json")
url_json = dict()
if url.status_code == 200:
    url_json = url.json()
else:
    print("Error in URL")


st.title("Adding Lottie Animation in Streamlit WebApp")

st_lottie(url_json,
          # change the direction of our animation
          reverse=True,
          # height and width of animation
          height=400,  
          width=400,
          # speed of animation
          speed=1,  
          # means the animation will run forever like a gif, and not as a still image
          loop=True,  
          # quality of elements used in the animation, other values are "low" and "medium"
          quality='high',
           # THis is just to uniquely identify the animation
          key='Car' 
          )

Output:

Method 2: Download the JSON file and import it into our code

The second way to embed animation is to download the Lottie Animation JSON file and then using the JSON module we will add animation to our code.

Code:

import json
import streamlit as st
from streamlit_lottie import st_lottie

path = "<Provide entire Path of the downloaded JSON file>"
with open(path,"r") as file:
    url = json.load(file)



st.title("Adding Lottie Animation in Streamlit WebApp")

st_lottie(url,
    reverse=True,
    height=400,
    width=400,
    speed=1,
    loop=True,
    quality='high',
    key='Car'
)

Output:

Using both ways together 

Here we will use both ways together to add two different animations in our WebApp.

import json
import requests

import streamlit as st
from streamlit_lottie import st_lottie


# Directly via URL
url = requests.get("https://assets5.lottiefiles.com/packages/lf20_awP420Zf8l.json")
url_json = dict()
if url.status_code == 200:
    url_json = url.json()
else:
      print("Error in URL")

    # By Downloading and importing path
path = "D:\\Python Projects\\Streamlit_Lottie\\car\\lottie_car.json"
with open(path,"r") as file:
    url = json.load(file)



st.title("Adding Lottie Animation in Streamlit WebApp")

# Adding Car Animation (Downloaded JSON)
st_lottie(url,
    reverse=True,
    height=400,
    width=400,
    speed=1,
    loop=True,
    quality='high',
    key='Car'
)

# Adding Boy Animation (Dirctly URL)
st_lottie(url_json,
    height=400,
    width=400,
    speed=1,
    loop=True,
    quality='high',
    key='Boy'
)

Output:

dwaipayan_bandyopadhyay

Follow

Improve

Article Tags :

• Technical Scripter
• Python
• Technical Scripter 2022
• Python-streamlit

Practice Tags :

• python