Can't get JASON file for Lottie animation smaller

Can’t get JASON file for Lottie animation smaller

Hi all, I exported an animation from Blender and first made the mistake of exporting everything as PNG (about 10MB per image). After exporting to AE with Bodymovin the JSON file had 22-40MB depending on the compression.

When I realized that JPEGs have a smaller size, I rendered again and now the images have a size of about 130-200KB. However, after exporting to AE the JSON file still has a size of about 30MB at 40% compression and even that is too much because the image quality doesn’t look good that way.

I would try to compress the images further down before After Effects but since there was no difference between the first and second attempt I don’t know if that helps or where my mistake is.

Does anyone have an idea how to get the JSON files smaller without using the compression inside the Bodymovin extention?

Thanks for any help!

https://portfolio-website-e0d64e.webflow.io/sushi-transport-box

Howdy @Amelie_Str and welcome to the community! :wave:

This is a fairly common issue that I’ve seen on a number of times around here (here, here, and here are some threads for reference) and the short answer is that there’s not much you can do to compress long Lottie image sequences outside of compressing the quality into oblivion — and even then these tend to be larger than what you’d want to use on most projects.

While Lottie is a super awesome library for adding motion to the web, but in reality they work best with vector animations and really should only be used with very short image sequences.

The suggestion I always recommend is the same solution folks like Apple use for their marketing pages which is scrubbing through a video file instead. The link below is what I reference in those threads which gives you an idea of some solutions:

It’s getting a bit old now (going on 3 years) so I’d imagine there are some other options out there, but hopefully that points you in the right direction. Good luck with the project! :webflow_heart: