Streamlit-Lottie: A Component for Python Animation Effects

Streamlit-Lottie: A Component for Python Animation Effects

by

Hello everyone, today we are going to learn about an interesting Python animation component: Streamlit-Lottie. Lottie is an animation library for web and mobile applications, and Streamlit-Lottie is a Python component developed based on Lottie, allowing us to easily add cool animation effects to our Streamlit applications.

Installing Streamlit-Lottie

First, make sure you have Streamlit installed. Then run the following command in your command line to install Streamlit-Lottie:

pip install streamlit-lottie

Importing Streamlit-Lottie

In your Streamlit application code, import the <span>streamlit_lottie</span> module:

import streamlit as st

from streamlit_lottie import st_lottie

Getting Lottie Animation Files

Lottie animations are usually provided in JSON file format. You can find various free or paid Lottie animations on some online resource websites like LottieFiles. Choose your favorite animation file and download it in JSON format.

Loading Lottie Animations

Use the <span>load_lottieurl()</span> function to load online Lottie animation files, or use the <span>load_lottiefile()</span> function to load local JSON files.

import requests


def load_lottieurl(url):

    r = requests.get(url)

    if r.status_code != 200:

        return None

    return r.json()


lottie_coding = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_fcfjwiyb.json")

Displaying Lottie Animations

Use the <span>st_lottie()</span> function to display the loaded Lottie animations in your Streamlit application. You can set parameters such as width, height, and whether to loop the animation.

st_lottie(lottie_coding, height=300, key="coding")

Tips: You can display multiple Lottie animations in the same application by setting different <span>key</span> parameters for each animation.

Real Application Scenarios

The Streamlit-Lottie component is great for adding vitality and appeal to web application interfaces. Here are some real application scenarios:

  • Add a welcome animation to the homepage of the application

  • Add fun interactive animations to the login and registration pages

  • Use animated icons to represent different metrics in a data visualization dashboard

  • Add loading animations during the application loading process to enhance user experience

Complete Example Code

Here is a complete example code for Streamlit-Lottie, demonstrating how to display multiple Lottie animations in the application:

import streamlit as st

from streamlit_lottie import st_lottie

import requests


def load_lottieurl(url):

    r = requests.get(url)

    if r.status_code != 200:

        return None

    return r.json()


def main():

    st.set_page_config(page_title="Streamlit-Lottie Demo", page_icon=":tada:", layout="wide")

    st.title("Streamlit-Lottie Demo")

    lottie_coding = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_fcfjwiyb.json")
    lottie_hello = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_V9t630.json")

    st_lottie(lottie_hello, height=300, key="hello")
    st_lottie(lottie_coding, height=300, key="coding")


if __name__ == "__main__":

    main()

Today’s Python learning journey ends here! Remember to get hands-on and try adding cool Lottie animations to your Streamlit application. Wishing everyone happy learning and continued progress in Python!

Leave a Comment