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.
For this tutorial, we will need a total of 4 modules.
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.
Users need to be familiar with Python at least. Knowledge of Streamlit would be a bonus.
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.
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).
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.
Now it’s time to code our WebApp in Python.
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.
We can modify our animation too, like resizing it, changing the speed of animation, adding a key, changing the animation mode to reserve, etc.
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.
Using both ways together
Here we will use both ways together to add two different animations in our WebApp.
Please Login to comment...