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.
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.
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”
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