Can AirBnb Lottie web files be used with Webflow?

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

1 Like

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>

1 Like

Thank you very much!

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:

4 Likes

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: Expert Reviews & Buying Guides | GeekWrapped

1 Like

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.

2 Likes

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.

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.

1 Like

@DigitalPanda Your new site rocks!

Love the animation, colour scheme and overall design.

1 Like

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