search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.42k stars 2.86k forks source link

Is it possible to export a frame/preview programatically? #2002

Open good-idea opened 4 years ago

good-idea commented 4 years ago

I'm working with an animation team on a large number of lottie animations. Some of these will take some time to load, so I'm having them export the first frame of each one, which we can use on the frontend as a placeholder until everything is ready to go. It's a bit of a clunky process, and requires a re-export every time an animation changes.

Is it possible to somehow generate an SVG of a particular frame without using the bodymovin/AE plugin? Something on the command line like lottie svg --frame 0 myAnimation.json would be amazing.

Inventsable commented 4 years ago

I don't know of one that can export an SVG, but I've seen a puppeteer-CLI version that can export gif, mp4 or png (of a specified frame):

https://github.com/transitive-bullshit/puppeteer-lottie-cli

In the following form:

puppeteer-lottie -i fixtures/bodymovin.json -o 'frame-%d.png' --width 1024 --height 1024
bodymovin commented 4 years ago

Hi, you should be able to use puppeteer as well to render the first frame of the animation and then get the innerHtml of the svg element traversing the DOM. That would provide you a snapshot in an svg format that you could then optimize by using svgomg for example https://jakearchibald.github.io/svgomg/