search

airbnb / lottie-web

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

Separate SVG and Lottie animation data #2687

Open aschmidtwork opened 2 years ago

aschmidtwork commented 2 years ago

Is it (technically) possible to separate the Lottie "animation data" and SVG?

We would like to load a "normal" SVG on page load, and after that invisibly "slap" the Lottie animation on it.

Cause at the moment it takes a "while" until we see the Lottie SVGs (Obviously cause they are done by JS after page load)

Or is there another way to speed up Lottie SVG appearance?

ps. sorry, i just learned about lottie, and haven't even looked at the json files or how lottie actually works.

bodymovin commented 2 years ago

hi, you can use the "Take snapshot" feature on the preview tab of the bodymovin plugin to get an svg of the frame you want to use. Or you can inspect the html on the browser and copy the svg content. In both cases, you might want to use some minifier tool like svgomg to get a smaller svg

aschmidtwork commented 2 years ago

hi, you can use the "Take snapshot" feature on the preview tab of the bodymovin plugin to get an svg of the frame you want to use. Or you can inspect the html on the browser and copy the svg content.

And then we can load just the lottie animation on that SVG?

bodymovin commented 2 years ago

you should replace the svg with the one lottie creates. You can remove it from the DOM, or hide it once lottie loads.