Integrate Lottie Animations Inside Your Streamlit App!

Integrate Lottie Animations Inside Your Streamlit App!

Coding Is Fun

2 года назад

35,185 Просмотров

👉 Explore All My Excel Solutions: https://pythonandvba.com/solutions

𝗗𝗘𝗦𝗖𝗥𝗜𝗣𝗧𝗜𝗢𝗡
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Learn how to use Lottie Files in Streamlit! Animations make our web app more engaging and fun, and Lottie Files are the easiest way to do it! In this tutorial, I'll show you exactly how to do it.

🌎 𝗥𝗘𝗦𝗢𝗨𝗥𝗖𝗘𝗦:
► Lottie Files: https://lottiefiles.com/
► GitHub Lottie Files: https://github.com/andfanilo/streamlit-lottie

📝 𝗦𝗔𝗠𝗣𝗟𝗘 𝗖𝗢𝗗𝗘:
► GistHub: https://gist.github.com/Sven-Bo/31d98f80b5fed1d3f53cf98e5b61e7c9
import json

import requests # pip install requests
import streamlit as st # pip install streamlit
from streamlit_lottie import st_lottie # pip install streamlit-lottie

# GitHub: https://github.com/andfanilo/streamlit-lottie
# Lottie Files: https://lottiefiles.com/

def load_lottiefile(filepath: str):
with open(filepath, "r") as f:
return json.load(f)


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


lottie_coding = load_lottiefile("lottiefile.json") # replace link to local lottie file
lottie_hello = load_lottieurl("https://assets9.lottiefiles.com/packages/lf20_M9p23l.json")

st_lottie(
lottie_hello,
speed=1,
reverse=False,
loop=True,
quality="low", # medium ; high
renderer="svg", # canvas
height=None,
width=None,
key=None,
)


𝗧𝗢𝗢𝗟𝗦 𝗔𝗡𝗗 𝗥𝗘𝗦𝗢𝗨𝗥𝗖𝗘𝗦
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🆓【𝗙𝗥𝗘𝗘】Excel Add-in (𝗠𝘆𝗧𝗼𝗼𝗹𝗕𝗲𝗹𝘁): https://pythonandvba.com/mytoolbelt
📊 Data Visualization Excel Add-In (𝗚𝗿𝗮𝗳𝗹𝘆): https://pythonandvba.com/grafly
🤪 Fun Emoji Excel Add-In (𝗘𝗺𝗼𝗷𝗶𝗳𝘆): https://pythonandvba.com/emojify
📑 Excel Templates: https://pythonandvba.com/go/excel-templates
🎓 My Courses: https://pythonandvba.com/go/courses
📚 Books, Tools, and More: https://pythonandvba.com/resources


𝗖𝗢𝗡𝗡𝗘𝗖𝗧 𝗪𝗜𝗧𝗛 𝗠𝗘
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🔗 LinkedIn: https://www.linkedin.com/in/sven-bosau/
📸 Instagram: https://instagram.com/codingisfun_official
💻 GitHub: https://github.com/Sven-Bo
💬 Discord: https://pythonandvba.com/discord
📬 Contact: https://pythonandvba.com/contact


☕ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲?
If you want to support this channel, you can buy me a coffee here: https://pythonandvba.com/coffee-donation

Тэги:

#Integrate_Lottie_Animations_Inside_Your_Streamlit_App #coding_is_fun #streamlit_anitmation #streamlit_lottie_files #streamlit_lottie #lottie_animation_web_app #lotties_files_python #streamlit_tutorial #python_streamlit #lottie_tutorial
Ссылки и html тэги не поддерживаются


Комментарии:

Fanilo Andrianasolo
Fanilo Andrianasolo - 29.08.2021 11:56

😱 oh wow, this is an awesome tutorial! Let me binge watch your channel now 😎
Thanks for sharing, Lottie is a great replacement for GIFs that I feel not a lot of devs outside the frontend realm know about, so hoping to see more Streamlit apps with it 😉 (which means I’ll have to go build some more features inside streamlit-lottie)

Ответить
laurent JOLI
laurent JOLI - 10.09.2023 23:50

Hello, how to create a modal window with streamlit ?

Ответить
Iqbal Kurriana Putra
Iqbal Kurriana Putra - 04.08.2023 21:20

“How to code to change the background position of Lottie animation in Streamlit?”
how to place the animation beside the text ?

Ответить
Prajjwal Pathak
Prajjwal Pathak - 02.08.2023 21:05

I have a loading animation which I want to delete once the rest api is called, how to do it

Ответить
Team 5 Fortune Infra
Team 5 Fortune Infra - 25.06.2023 19:55

how to add more animations

Ответить
christophe anfry
christophe anfry - 29.05.2023 09:18

Just love your videos thanks. I’m doing the cs50 course and rediscovering Python and your videos just make me want to use more and more Python as I normally use JavaScript. Incredible to be able to build amazing things without html or css. 😎

Ответить
Hans Maier
Hans Maier - 17.04.2023 07:22

Da steh ich nun , ich armer Tor, und bin so klug als wie zuvor

Ответить
Rashmi Singh
Rashmi Singh - 17.04.2023 06:18

Such an amazing video..How can i add background colour only on home screen rather than full application?

Ответить
Ayaz
Ayaz - 08.03.2023 13:56

Thanks for this video.

Ответить
chaithanya vamshi
chaithanya vamshi - 01.03.2023 00:31

Hi Sven, Awesome tutorial and easy to follow. I was able to design a streamlit app with lottif animations but would you happen to know how to align/position (Center/left/right) animation in the app? Can you please advise?

Ответить
BAHAGEEL OSMAN
BAHAGEEL OSMAN - 14.01.2023 15:52

How can I display it on my sidebar

Ответить
Gede Apriana
Gede Apriana - 01.01.2023 08:01

how to make lottie animation center?

Ответить
Phuc Le
Phuc Le - 28.12.2022 06:23

thank your

Ответить
RIMX
RIMX - 16.11.2022 03:53

hello, my friend. easy and straight to the point tutorial, I love it. one question I have is, is it possible to make the background transparent?

Ответить
ojas mittal
ojas mittal - 24.09.2022 21:20

Is there any way to change text colour of these animations?

Ответить
paritosh dhiman
paritosh dhiman - 19.09.2022 04:06

Is there a way to add a hyperlink to lottie animation?

Ответить
ThePresistence
ThePresistence - 15.09.2022 02:20

you are great!

Ответить
Jaid Mirajkar
Jaid Mirajkar - 29.07.2022 15:46

Hello bro,

Can you please tell me how to disable/hide the lottie animation from the python code?

I am trying to show a particular animation on the welcome screen and then I want to hide/remove it after some time to display some other content on top of it.

Ответить
izah amalia
izah amalia - 21.07.2022 11:57

hello. i got notification "ModuleNotFoundError: No module named 'streamlit_lottie'" i already installed streamlit-lottie in the same environment. can you help me? your tutorial is so informative anywayyy, thank you!

Ответить
Matthew Northam
Matthew Northam - 08.06.2022 06:59

what channel does streamlit-lottie come in? I get the error that the package is not available from the current channels. Can't seem to find online either. Thank you for the video though! Love the content and can't wait to start my own data analysis website with streamlit!

Ответить
Rahul Rana
Rahul Rana - 24.05.2022 13:21

I am getting (No module named 'streamli_lottie' )
I have imported and also installed mentioned library in same project file ..
How to resolve this issue !! ?

Ответить
Armin Eskandary
Armin Eskandary - 13.05.2022 15:53

brah how to change the position of animations

Ответить
junaid latif
junaid latif - 20.04.2022 19:54

Interesting 😍

Ответить
bakelites
bakelites - 06.04.2022 18:58

Thanks again Sven !!!!

Ответить
Gerrit van Rensburg
Gerrit van Rensburg - 23.03.2022 08:22

This was great - but how can one add interactivity to the lottie? like animate on hoover or click?
Thanks!

Ответить
Niraj Dasari
Niraj Dasari - 06.12.2021 09:57

login in page with authentication in streamlit please!

Ответить
Ram's Vault
Ram's Vault - 25.10.2021 19:06

thanks for the tutorial !! to the point ..

Ответить
Fernando Peña Vlillalobos
Fernando Peña Vlillalobos - 24.10.2021 20:19

thank 4 share !!

Ответить
Hemant Saw
Hemant Saw - 15.10.2021 18:45

Thanks for this amazing informative video, but anyone can please tell how to place the animation beside the text ? Or Resize like a button for instance as he did in the 'Connect with me!' section....that would be great.

Ответить
Omkar Hankare
Omkar Hankare - 19.09.2021 17:21

Woooww...
Thanks for this video ☺️

Ответить
nagendra vishwamitra
nagendra vishwamitra - 09.09.2021 17:26

Hi your video is always fascinated sir could you please help me with a video on drop down command n filtering excel rows

Ответить
Awlled
Awlled - 07.09.2021 19:16

it shows load_lottieurl is not defined although I've installed and imported streamlit_lottie

Ответить
Compass
Compass - 29.08.2021 14:29

I am really glad that i found this video which helped me solve the issue at work.

Ответить
hnclientes HN
hnclientes HN - 29.08.2021 05:49

fantastic, thank you

Ответить
Forbiden Fox [ 禁じられた狐 ]
Forbiden Fox [ 禁じられた狐 ] - 29.08.2021 03:46

Great

Ответить
Ricardo Campos
Ricardo Campos - 28.08.2021 19:00

Excellent as always.!

Ответить