Anyone else having lottie animations completely disappear only on Chrome?
I thought I had broken my (first weblow) site… but the problem now persists even on new projects!
Hey @RyanFoxhill . I totally freaked out about that, this morning. Then I exported my site and it was there and working perfectly (both in safari and chrome). I didn’t try to do anything about it in that moment, nor even tried to troubleshoot, just worked on other stuff and thought I’ll see what I have messed up later.
I opened up my project a couple hours later and it was showing again. I really did nothing that would affect it appearing or disappearing, so my only theory is that I had many tabs and apps opened and the RAMs could not preview it in the designer (although I have no idea if that is the case or not).
Yes, my only advice for now is, literally, try turning it on and off again 
If you exported your site and it still did not show, then the issue would have to be a layout (or simple z-index) problem. If that is the case, share your read-only link, maybe I could help you spot the issue.
I have the same problem with Lottie 
1 Like
Same. It just stops working. How can this be fixed?
1 Like
hmm weird, mine is working.
TBH I’ve found it to be as temperamental as it is cool. A Lottie heavy page needed me to delete all elements and start again to get it to work, rebuilt exactly the same and it worked.
I’m now more worried about the Firefox redraw problems that cause strobing when animations play!
@RyanFoxhill @Mr_Finn @Emin @Niall_Mc_Dermott @mrtowers I’m not sure if you’re having the same problem I was (Lottie animation disappearing after it finishes animating). But if you are, then I found out that for some weird reason/bug, that the last frame is often a blank frame.
Try going into your interaction and changing the Lottie’s final state from 100% (default) to 99% - or something similar. That way, it stops before it gets to that final blank frame.
4 Likes
Thanks for this info!
1 Like
i had the same problem, drove me crazy The easiest way was to simply replace the lottie file.
I just hit this issue; it wasn’t the 100% vs 99% quirk, actually. This Lottie file was working. In fact, even on my published live site and the Webflow Designer, one specific Lottie file stopped playing throughout Chrome. Just dead. I hadn’t re-published my live site in ages.
I moved to our staging domain, i.e., webflow.io: I attempted re-uploading the same Lottie file. Dead. Changing the name? Dead. The Lottie file played back perfectly on lottefiles.com.
But, in Webflow & on our domain, the Lottie did work in Incognito Mode. Thus, it looked like a bad cache (perhaps because we’d been using some custom code for lazyloading images that ended up trying and failing to lazyload the lottie file…and somehow caching the broken Lottie player / file).
The fix: clear cache and cookies on both Webflow.com (to fix the Designer) and your domain via Chrome’s Settings. Cookies aren’t enough, so I had to clear the entire browser’s cache.
Very peculiar bug: it even affected the Designer, which I always thought cleared its cache.
@TG2 I actually had a similar issue: Once I uploaded my site and activated Cloudflare Caching, all Lottie files disappeared. I remember having to do a weird workaround, purging the cache from Cloudflare, THEN clearing cache from my browser, then re-uploading the files from the cPanel (something like that). And I still have no idea what the issue was exactly, and I remember asking around in different forums without getting any answers.
I’m just glad to know I wasn’t doing something stupid, and that there is in fact some weird issue ^^
1 Like
I think I’ve figured it out. It has to do with how your timeline is setup in AE. Simply extend the layer beyond the OUT point of your animation. DO NOT trim the timeline simply render it and it will show up correctly in webflow.
I am also suffering with the same problem could you please help us to fix it?
Hey @olansi_china , the most common fix for this is usually setting your lottie duration to 99% instead of 100%, as the exported files tend to create one extra empty frame at the end of the animation. You could also try what @Mekki suggested to bypass this issue, if you are exporting from AE or some other program.
If the issue persists, it could be some caching issue which, I personally never understood but also did not encounter ever since my comment on this post.
1 Like
Typically when this happens I do the following:
- Click ‘Replace Lottie Sequence’ on the settings panel on the right
- Change out the lottie for a different, arbitrary animation
- Publish
- Change it back
- Publish