I am trying to put a 3D model on a website which I created in Cinema 4D and rendered a sequence of 91 images. The png files are about 500kb each which I then imported to After Effects to use Bodymovin in order to export it as a JSON file. The exported JSON file weights 62 mb which is huge and I don’t know how to reduce the file size. Can anyone help me out or knows a trick to reduce the file size of the JSON file, especially for 3D models like on the Apple website (scroll animation)?
Apple doesn’t use Lottie image sequences on their site, they actually scrub through a video file which drastically reduces the file size. This isn’t something you can natively do in Webflow, but there are some techniques described in the link below that you can follow along with to achieve the effect:
While Lottie offers the functionality, I’d probably recommend almost never using the image sequences (outside of very few situations where it works well) as most of the time file sizes are far too large.
I had lots of luck getting the image sequences down by reducing my frame rate to 15fps, and using TinyPNG to transcode the jpegs.
My current hangup is somehow exporting via lottie/ae changes my 15-20mb of images to 160mb upon export for 105 frames. Did you ever figure out another option or the video-scrub?
Ideally this type of interaction would be possible natively in the Designer, but I haven’t heard any rumblings of this being worked on. That said, the team tends to be tight-lipped when it comes to sharing specific details on the roadmap so it may be a part of a planned interactions updated.
Coincidentally there is a live stream with Vlad this Wednesday and the team is asking users to submit questions here that can be answered in the Q&A section. I can’t say whether he’ll have any concrete information but it may be something he can weigh in on.
As far as solutions available now, I would forgo using Lottie image sequences for anything over a handful of frames as file sizes tend to be extremely large. Realistically 15-20mb is too big and I’d imagine you’d need a fair bit of compression to even get it to that point. Your best bet is using custom code to scrub through video frames as mentioned in my previous link.
Convert the file to a glb. Load the image into WEB GI. Documentation: WebGi SDK | WebGi SDK
Export reduced file size. The file size is generally less than 10 MB. You can host 3D file on Code Sandbox and use in Webflow.