Lottie animation comes out way to big

Hi guys!

I tried to do something similar like at the apple airpods website with the animation on scroll effect.
I already downsized my png files a lot. There are 75 files and all together they have 7mb.
When I export a lottie animation out of after effects with bodymovin and compression of 60 then the json-file has 27 mb. This is way to big to put into webflow and also has a very long loading time.

Any ideas why this happens?

This is the link to the website: https://cut-meridian.webflow.io
And this is the read only link: https://preview.webflow.com/preview/cut-meridian?utm_medium=preview_link&utm_source=designer&utm_content=cut-meridian&preview=ade4f977957099d339131c88506a5e87&mode=preview

Thank you guys!

Here is my public share link: LINK
(how to access public share link)

Unfortunately I haven’t found a good solution when using lots of frames, but using JPGs over PNGs (especially for images with lots of different colors) and potentially using a separate lossless compression (like tinypng.com) may help shave off some of the size.

That being said, I believe Apple uses a technique that scrubs through video frames instead of individual photos. This isn’t native to Webflow, but there’s an article here that discusses the technique.

Hi @mikeyevin, thanks for the quick reply!

I also had a look again and I actually figured out how to bring the lottie animation from 27mb to 8.5mb.
My png files are 1280x720px, I compressed them with a similar tool like tinypng and then there are some settings available in the Bodymovin plugin that I ticked that compresses the file:

Under “assets”/“enable compression”: I put it on 100
Under “advanced export settings”: I ticked “Remove expression properties” and “skip default properties”

And then somehow the file size got much lower.

Also thanks for the link! I will have a look!

8mb is still very large tbh. But the video-on-scroll solution @mikeyevin posted looks solid! Please let us know how it worked for you!

edit: the one issue I see is having transparent background.


Ah yes, as @dram mentioned, transparency is a no go here but I think that’s the necessary trade off in this situation. Let us know how it comes together

1 Like