Lottie-web: can i export Svg animation files instead of js/json files?

Created on 12 Jul 2017 · 7Comments · Source: airbnb/lottie-web

I am using bodymovin to create web animations and am rendering them in bodymovin as .json files. Lately I found that .Json files are having big file sizes and are not preferred when we are having a lot of animations in our site as they will substantially increase the web page size.
I want to render my animations from after effects as pure svg animations which give me a simple .svg file.

Is there anyway to render after effects animations as svgs, or atleast can i convert a .jason/.js file into .svg file?

Thank you.

Source

Onlypar2

Most helpful comment

A couple of things:

#47 covers converting bodymovin to SVG filmstrips.
If it helps, I've also written a tool to help with this outside of the library. Upload a bodymovin json file to it and it'll render separate SVG files on the screen. Click any of them to get a text file of all the SVGs together. I'm not currently supporting it, but I'm happy to open source it if it helps!

jkosoy on 14 Jul 2017

👍12 ❤7 🚀2

All 7 comments

No, unfortunately there is no way to export an animated svg from After Effects, since svg doesn't have a full supported animation native language.
Exporting a sequence of stills embedded in a single svg would make the filesize even larger.
What's the filesize of the animations you're working with?

bodymovin on 13 Jul 2017

👍2

Im getting 1mb to 2mb json files for a 1366*130 size animations. and if i have to use 5 to 6 of such kind of animations, then the web page size will go upto 10 mb or so. so i would like to avoid it. Also devs are reporting that jsons are not good for website's health. So, im deperately looking for an alternative.

Onlypar2 on 13 Jul 2017

Have you tried usin jsons gzipped? Their size will be reduced considerably.
Can you share an .aep?
Regarding website's health, I'm not sure what they mean.

bodymovin on 13 Jul 2017

A couple of things:

#47 covers converting bodymovin to SVG filmstrips.
If it helps, I've also written a tool to help with this outside of the library. Upload a bodymovin json file to it and it'll render separate SVG files on the screen. Click any of them to get a text file of all the SVGs together. I'm not currently supporting it, but I'm happy to open source it if it helps!

jkosoy on 14 Jul 2017

👍12 ❤7 🚀2

Wow. Your tool sounds very promising. I thought of writing one as well. Any chance you will release the code of yours? May be we can join forces...