Lottie animation in Streamlit

There was a case where I wanted to experiment with Jinja to inject Python data in a HTML file before rendering with components.html.

Today, another use case, inject a Lottie JSON file into the Lottie HTML player, this time I tried Jinja.You should be able to play exported After Effects animations with Lottie in Streamlit now ahah. Maybe even do a loading screen while some computation is in effect :wink: and there’s even a gallery of Lottie files

If someone wants to do a static component package out of it (like for Folium)…

TLDR: use Jinja to pass Python data in a HTML template.

2 Likes

Fascinating! The jinja piece is more exciting to me than Lottie itself, glad to see it’s so easy to incorporate jinja :partying_face:

1 Like

So here’s a package: Streamlit-Lottie :tada: still alpha, it seems it uses a lot of CPU, but I really want to try using Lottie animations as a loading spinner or computation success animation XD.

Code: https://github.com/andfanilo/streamlit-lottie
App: https://share.streamlit.io/andfanilo/streamlit-lottie-demo/app.py

Sorry @randyzwitch no Jinja in there :slight_smile:

Have fun.
Fanilo

3 Likes

This is totally awesome @andfanilo :star_struck:

1 Like

Welcome streamlit-lottie 0.0.3!

  • Added st_lottie_spinner context manager, so your Lottie animation plays until the end of the code in the with statement
import time
import requests

import streamlit as st
from streamlit_lottie import st_lottie_spinner

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

lottie_url = "https://assets5.lottiefiles.com/packages/lf20_V9t630.json"
lottie_json = load_lottieurl(lottie_url)

with st_lottie_spinner(lottie_json):
    time.sleep(5)
    st.balloons()

Have a nice day,
Fanilo

3 Likes