Integrate Lottie Animations Inside Your Streamlit App!

👉 Explore All My Excel Solutions: pythonandvba.c...
𝗗𝗘𝗦𝗖𝗥𝗜𝗣𝗧𝗜𝗢𝗡
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
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: lottiefiles.com/
► GitHub Lottie Files: github.com/and...
📝 𝗦𝗔𝗠𝗣𝗟𝗘 𝗖𝗢𝗗𝗘:
► GistHub: gist.github.co...
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: github.com/and...
Lottie Files: 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("assets9.lottie...")
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 (𝗠𝘆𝗧𝗼𝗼𝗹𝗕𝗲𝗹𝘁): pythonandvba.c...
📊 Dashboard Excel Add-In (𝗚𝗿𝗮𝗳𝗹𝘆): pythonandvba.c...
🎨 Cartoon Charts Excel Add-In (𝗖𝘂𝘁𝗲𝗣𝗹𝗼𝘁𝘀): pythonandvba.c...
🤪 Fun Emoji Excel Add-In (𝗘𝗺𝗼𝗷𝗶𝗳𝘆): pythonandvba.c...
📑 Excel Templates: pythonandvba.c...
🎓 My Courses: pythonandvba.c...
📚 Books, Tools, and More: pythonandvba.c...
𝗖𝗢𝗡𝗡𝗘𝗖𝗧 𝗪𝗜𝗧𝗛 𝗠𝗘
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
🔗 LinkedIn: / sven-bosau
📸 Instagram: / codingisfun_official
💻 GitHub: github.com/Sve...
💬 Discord: pythonandvba.c...
📬 Contact: pythonandvba.c...
☕ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲?
If you want to support this channel, you can buy me a coffee here: pythonandvba.c...

[@andfanilo]

😱 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)

[@CodingIsFun]

And I thank YOU, Fanilo, for creating this fantastic & easy-to-use library! Your library makes integrating Lottie animations into Streamlit so easy & fast. I love it ❤

[@kareemrasheedbabatunde9026]

Fanilo, pls how does st_loitte_spinner works

[@compass1046]

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

[@christopheanfry2425]

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. 😎

[@CodingIsFun]

Hey, really appreciate the kind words! So glad to hear my videos are sparking more Python interest for you, especially while working through CS50. Keep enjoying the Python ride and best of luck with the course! 👍

[@christopheanfry2425]

@@CodingIsFun thank you, I definitely will!!!

[@ricardo.alves.campos]

Excellent as always.!

[@CodingIsFun]

Happy to hear that you enjoyed this one too! Thanks for the comments and support, as always!

[@thiruppugazhan]

There was an issue in changing background color of the Lottie images. even if i use the features given in the website it was not working in right way.

[@CodingIsFun]

Thanks for watching. Hard to tell from a distance why you are facing an error.

[@ArminEskandary]

brah how to change the position of animations

[@CodingIsFun]

Use st.columns

[@bakelites]

Thanks again Sven !!!!

[@CodingIsFun]

A pleasure! Thanks for watching! :)

[@rashmisingh6712]

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

[@CodingIsFun]

Thanks! Check out the following video: kzbin.info/www/bejne/pqq6oqprrqiBmtE

[@rimx4872]

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?

[@CodingIsFun]

Thanks for watching. Yes, Lottie files can have a transparent background

[@rimx4872]

@@CodingIsFun Thank you for replying, can you please let me know how or recommend me a video if you have done one. i can't seem to find it.

[@omkarhankare3264]

Woooww... Thanks for this video ☺️

[@CodingIsFun]

Glad you like it. Thanks for watching & your comment!

[@zorexq]

Thanks for this video.

[@CodingIsFun]

My pleasure! Thanks for watching :)

[@MatthewNorthamgplus]

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!

[@CodingIsFun]

I am not sure about which channel you are referring to. I recommend using the latest version of streamlit ("pip install streamlit-lottie --upgrade") and then run the example code from GitHub: github.com/andfanilo/streamlit-lottie

[@user-Zohaib15]

Love 💕

[@CodingIsFun]

❤️

[@arcanum360YT]

Great Tutorial. Anyone knows how to position it on the page?

[@CodingIsFun]

Thanks for watching. You could use Streamlit columns: docs.streamlit.io/library/api-reference/layout/st.columns Happy Streamlit-ing!

[@hnclienteshn4501]

fantastic, thank you

[@CodingIsFun]

My pleasure! Thank you for watching!

[@ramsvault]

thanks for the tutorial !! to the point ..

[@CodingIsFun]

Thank you! Glad you liked it.

[@anaghakrishna5611]

Anyway my webpage can open with these animation and make them go to the side of the screen?

[@CodingIsFun]

Thanks for watching. Sorry, but I don't understand your question.

[@anaghakrishna5611]

@@CodingIsFun for example, when i open my webpage, it should first display the animation and then load my my page, is that possible?Thanks for replying.

[@chaithanyavamshi2898]

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?

[@CodingIsFun]

Thanks for watching. Glad you liked the video. Regarding your question: You could use the streamlit layout elements, e.g. containers. Have a look here to learn more about it: docs.streamlit.io/library/api-reference/layout I hope it helps! Happy Coding!

[@chaithanyavamshi2898]

@@CodingIsFun Thanks a ton Sven for your inputs. You are a lifesaver! I have created streamlit app. Please review and share your thoughts. Here is the demo video: kzbin.info/www/bejne/e6GVZXl5pbRld80

[@RahulRana-fo6pm]

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 !! ?

[@CodingIsFun]

I assume you are calling your Python file from a different environment / Python interpreter (that does not have streamlit-lottie installed)

[@user-Zohaib15]

When I click on any animation I can't tind any url

[@CodingIsFun]

The interface slightly changed. I am sure you will find it. Cheers, Sven

[@iqbalkurrianaputra179]

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

[@CodingIsFun]

Thanks for watching. You could use st.columns. Happy Coding!

[@Koaxjo]

Hello, how to create a modal window with streamlit ?

[@CodingIsFun]

Thanks for watching. Streamlit doesn't have native support for modal windows out of the box.

[@gerritvanrensburg6808]

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

[@CodingIsFun]

Thanks! Sorry, I do not know how to do that.

[@gerritvanrensburg6808]

@@CodingIsFun Ok no worries - thanks for replying. If I figure it out can let you know. :D

[@hansmaier4119]

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

[@CodingIsFun]

A Goethe cameo! Fear not, I'll soon transform you into a Streamlit maestro!

[@JaidMirajkar]

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.

[@CodingIsFun]

Thank you for watching the video. Your questions are great, but finding the time to answer them is difficult. Kindly understand that I receive many requests for individual solutions or modifications. That said, you might want to join our Discord server (pythonandvba.com/discord) and post your question there. Thanks for your understanding. Happy Coding!

[@ojasmittal]

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

[@CodingIsFun]

You can change the colors in the Lottie file: www.screencast.com/t/heDODoZOz

[@thepresistence5935]

you are great!

[@CodingIsFun]

Thank you very much! :)

[@fernandopenavlillalobos4903]

thank 4 share !!

[@CodingIsFun]

A pleasure! Thanks for watching!

[@nagendravishwamitra3652]

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

[@hemantsaw4175]

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.

[@CodingIsFun]

Thanks for watching the video & your question. You could use 'streamlit columns'. Please have a look at the following example: import requests import streamlit as st from streamlit_lottie import st_lottie def load_lottieurl(url: str): r = requests.get(url) if r.status_code != 200: return None return r.json() lottie_mail = load_lottieurl("assets8.lottiefiles.com/packages/lf20_eBcQGa.json") contact_icon, contact_link = st.columns((0.05, 1)) with contact_icon: st_lottie(lottie_mail, height=60, key="mail") with contact_link: st.subheader("[[e-mail]](pythonandvba.com/contact)") I hope this helps

[@hemantsaw4175]

@@CodingIsFun Thank you so much , really appreciate it 💖

[@prajjwalpathak2718]

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

[@CodingIsFun]

Thanks so much for watching the video and leaving a comment! Your request is definitely noted. However, I get a ton of requests for custom solutions and, as much as I'd love to help everyone out, I just don't have the time in my schedule to develop and test all of them. I hope you can understand. Happy Coding!

[@prajjwalpathak2718]

@@CodingIsFun Thankyou for replying, I just meant if it's possible to delete the Lotte animation after some time like 5 or 10 seconds.

[@gedeapriana2074]

how to make lottie animation center?

[@CodingIsFun]

Depends on your Streamlit layout. Use st.columns and then insert the Lottie animation in one of the columns.

[@junaidlatif2881]

Interesting 😍

[@CodingIsFun]

Thank you!

[@phucle1669]

thank your

[@CodingIsFun]

Thank you for your comments under my video. I appreciate your support! :)

[@AIdevel]

How can I display it on my sidebar

[@CodingIsFun]

Thank you for watching the video and for your question. Unfortunately, I do not know how to implement that right off the bat. I would also need to search the internet for a solution. Sorry that I cannot help!

[@izahamalia7688]

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!

[@CodingIsFun]

Thanks for watching and for your question. Hard to tell from a distance why you are facing an error. Sorry that I cannot help.

[@jamessteele53]

I had the same error: instead of Importing streamlit_lottie, this was the correct method: from streamlit_lottie import st_lottie

[@Team5FortuneInfra]

how to add more animations

[@CodingIsFun]

Thanks for watching. You can add multiple animations as shown in the video

[@paritoshdhiman6002]

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

[@CodingIsFun]

Thanks for watching. Sorry, but I am not sure how to implement that.

[@paritoshdhiman6002]

@@CodingIsFun Thank you for reviewing the question. Love your content, thanks for spreading the knowledge!

[@forbidenfox3453]

Great

[@CodingIsFun]

Thank you!

[@nirajdasari6309]

login in page with authentication in streamlit please!

[@CodingIsFun]

Thanks for your video suggestion!