Lottie animation issue: PNG sequence Lotties won't show

Hi :wave:

I’m having my first try at Webflow, but have been struggling with the integration of my Lottie animations.

I’ve been creating Lotties for a while now (mainly vector ones) and never had problems with them.
But for some reason, my very small, light png sequence doesn’t seem to get exported properly in the JSON file. Whenever I try to upload it to either the Lottie Website or my project on Webflow:

  • Lottie website : Uploads infinitely but never previews
  • Webflow : Uploads but no preview/looks like an empty file
  • Demo (local HTML file) : Works and previews perfectly

Video - Lottie won’t work

Access source file here

Does anyone know how to solve this? :pray:

Welcome to the community @Bolk!

Your Lottie file is pretty massive (63mb) so this is more than likely why you’re experiencing issues here. Webflow may allow you to upload the file, but it’s far too big to realistically included in your project.

I may have just missed the effect due to compression on the included video but is there a reason you can’t just use interactions here to achieve a similar effect? You can also try reducing the amount of frames and the quality of not only the compression in Bodymovin but also the image files used in AE. If that doesn’t get you below like 2-3mb (which I feel like is still pretty hefty) then you’ll want to consider another method to achieve the affect.

Without seeing what you’re trying to achieve I can’t really recommend specific solutions, so any additional information here would help in providing options.