Streaming live at 10am (PST)

Can AirBnb Lottie web files be used with Webflow?


#1

Would love to find out if and how this new web standard could be integrated:

http://airbnb.io/lottie/


#2

For now, you can use the embed links provided by lottiefiles.com using iframe. Eg
<iframe width="500" height="500" src="https://lottiefiles.com/iframe/439-love-explosion" frameborder="0" allowfullscreen></iframe>


#3

Thank you very much!


#4

I don’t suggest the above implementation. Lottie was created for React Native and Mobile apps and an Iframe is… well, not that elegant.

For web, just use BodyMovin.js There’s lots of tutorials out there on how to make this work. You can download the .json file from lottiefiles and then implement on your own site. We use BodyMovin in almost every project. Animations are the best way to get the wow factor from the user and I’m glad more people are trying to implement it :slight_smile:


#5

Thanks @DigitalPanda

thanks for the feedback. What’s the downside of using Lottie with an iframe?

I added it here, seems to be working on desktop and mobile: https://www.geekwrapped.com/interests


#6

Mainly that you can’t control the animation if you are using an iframe. With JS and CSS you can do a lot, including playing segments, taking control of timing, and even changing colors. With an iFrame you are also at the mercy of the thirdparty hosting it. If they take it down, you have a hole in your site with a tiny 404 window.


#7

Thanks @DigitalPanda that’s really smart. Do you know of any tutorial on how to integrate Lottie via BodyMovin.js to Webflow? I couldn’t find any on Google. Thanks for your help! :+1:

PS Do you have a website for your work, would love to check it out.


#8

Sorry for the late reply, We finally launched our site at www.thedigitalpanda.com Check it out and let me know if you need any further help.


#9

@DigitalPanda Your new site rocks!

Love the animation, colour scheme and overall design.


#10

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.