Adding Lottie animation in Streamlit WebApp

Adding Lottie animation in Streamlit WebApp

To add Lottie animations in a Streamlit web application, you'll need to use the streamlit-lottie package, which is an extension that allows Streamlit to play Lottie animations. Lottie is a popular library used to add high-quality animations to websites and apps. These animations are usually exported as JSON files from Adobe After Effects using the Bodymovin plugin.

Here's a step-by-step guide on how to include Lottie animations in your Streamlit web app:

Step 1: Install Necessary Packages

First, you need to install streamlit and streamlit-lottie. You can do this using pip:

pip install streamlit streamlit-lottie

Step 2: Import the Libraries

In your Python script, import Streamlit and the streamlit_lottie package:

import streamlit as st from streamlit_lottie import st_lottie import requests

Step 3: Define a Function to Load Lottie URL

You will need a function to load Lottie animations from a URL. Lottie animations are usually stored online and can be loaded using their URL:

def load_lottieurl(url: str): r = requests.get(url) if r.status_code != 200: return None return r.json()

Step 4: Use the Function to Load an Animation

Find a Lottie animation that you want to use and get its URL. Then, use the load_lottieurl function to load the animation:

# URL for a Lottie animation lottie_url = "https://assets7.lottiefiles.com/packages/lf20_yr6zz3wz.json" # Replace with your own URL lottie_json = load_lottieurl(lottie_url)

Step 5: Display the Lottie Animation in Streamlit

Finally, use the st_lottie function to display the Lottie animation in your Streamlit app:

st_lottie(lottie_json)

Full Example Code

Putting it all together, here's a full example code for a Streamlit app with a Lottie animation:

import streamlit as st from streamlit_lottie import st_lottie import requests def load_lottieurl(url: str): r = requests.get(url) if r.status_code != 200: return None return r.json() def main(): st.title("Streamlit Lottie Demo") lottie_url = "https://assets7.lottiefiles.com/packages/lf20_yr6zz3wz.json" # Replace with your own URL lottie_json = load_lottieurl(lottie_url) st_lottie(lottie_json, speed=1, width=800, height=600, key="initial") if __name__ == "__main__": main()

Running Your Streamlit App

To run your Streamlit app, use the following command:

streamlit run your_script.py

Replace your_script.py with the name of your Python script.

Note:

  • Make sure your internet connection is active as the Lottie animation is loaded from an online URL.
  • Ensure that the Lottie animation URL you use is publicly accessible and correctly formatted.
  • This code assumes a basic understanding of Streamlit. If you're new to Streamlit, you might want to explore its documentation for more details on building web apps.

More Tags

flutter-packages twitter-bootstrap-2 scipy zoo subscribe rx-android valueconverter fetch subscriptions local-files

More Programming Guides

Other Guides

More Programming Examples