My Lottie .json animation is spotty on any other browser besides Chrome. What am I missing?

I rendered out an AE animation using BodyMovin’ and placed that .json file inside a div using webflow. There’s an intro animation that I want played before the site opens, and then I have a second json file that starts playing halfway through the site. They both work great in Chrome, but are very spotty when using mobile or Firefox or IE. I can’t figure out what I’m doing wrong, and need to get this site on the web as soon as I figure this out. Anyone have any suggestions?

This is the site:
https://light-project2cc-5d08fb0a-8c50a8555fc85.webflow.io/

Share site:
https://preview.webflow.com/preview/light-project2cc-5d08fb0a-8c50a8555fc85?utm_medium=preview_link&utm_source=dashboard&utm_content=light-project2cc-5d08fb0a-8c50a8555fc85&preview=c5806971ea01adaf04d3c34dd0eff733&mode=preview

Thanks in advance!

Nice site.

Not that I have a solution but just wanted to let you know I’m seeing the flashing happening in Firefox too. I’ve tried updating and also disabling hardware performance in FF, no avail.

Fine on Chrome and Edge.

I’ll keep looking…

Thank you, Alan!
I think I’ve figured this out… I’ll post a reply below with the info.

I think I know why this is happening. When I created the shape change animation in AE, I exported creating a .png sequence, then imported the images into AE and created a lottie using Bodymovin’. In the settings under Assets, I selected “Include in json”, which is how I was taught how to do all that.
I just found out that because I was rendering the lottie in Weblfow as “SVG”, it would play back flickered. SVG doesn’t like image-based lotties (maybe one day somebody could fix that).
Setting the lottie render to “Canvas” instead worked! But now you have to enter in some javascript to be able to resize to get 100vw (which is what I needed).
Fortunately, I found out this can be done:

Hope this helps someone in the future.

2 Likes