Is it possible to take a PNG sequence rendered in After Effects, batch convert it to WebP, bring it back into AE, and use Bodymovin?
I havent used Bodymovin nor Webflow yet, but I was wondering.
Ive seen in tutorials that Bodymovin has its own compression settings, but wouldnt WebP be better, even without BM’s compression? Thanks.
Great question! I’m also curious if this is possible.
While it is possible to create a webp sequence in photoshop using an extension like WebPShop, which you may find here: GitHub - webmproject/WebPShop: Photoshop plug-in for opening and saving WebP images
There is not currently an “import webp sequence” setting yet in adobe after effects.
Currently, those of us using Bodymovin to export lottie json files must use jpeg sequences and png sequences. The best way to keep the file size down is to compress your video/ animation sequences prior to exporting them as an image sequence and importing them into bodymovin. If you give bodymovin a set of images that are already very large in size, compression will not be as effective. It’s best to feed bodymovin images that you have compressed already. I also like to reduce my video frame rate on export, and adjust my lottie animation timing within webflow to meet the duration I’m aiming for.
Yes, it’s possible! If you follow the Webflow tutorial, but instead of using PNGs or JPGs, drag your WEBP images into After Effects. Then continue with the rest of the tutorial, but in the export settings of Bodymovin don’t enable compression, instead select the option above: Copy Original Assets. This literally halved the size of my JSON export.
