Page 1 of 1

JSON export for web SVG animation.

Posted: Wed Oct 14, 2020 9:12 am
by Maido H
I tried to search but I couldn't get the final NO so, therefore... would it be possible to export JSON files for web SVG animation (I might not understand fully the JSON and SVG relations here, but I hope the idea could be followed)? Has anyone tried and succeeded?

Characters are getting more and more into the web and to be honest After Effects is quite a terrible tool for character animation and MOHO would be a much better choice.

Thanks a lot!

Re: JSON export for web SVG animation.

Posted: Wed Oct 14, 2020 7:42 pm
by synthsin75
You can render to SVG or export to FBX in Moho. While the Moho file format is JSON, it does not export to JSON.

Re: JSON export for web SVG animation.

Posted: Thu Oct 15, 2020 12:30 pm
by Maido H
The answer seems to be still no then, SVG export is possible only for one frame and it's quite useless when we talk about animation (not sure if it would be possible to assemble SVG sequence back together later with some kind of programs).
FBX is also very limited in it's nature, even if it would be possible to get the JSON out of it later - manual reads:
Many Moho commands (point binding, curvatures, bone stretching, etc.) that are not supported in FBX format. When designing files for FBX export, we recommend that you use the View > FBX Preview command to preview your project before export. For additional information on how to address unsupported features, see “FBX Preview Mode (Pro Only)”.
Unfortunate, then AE it is for web characters :/

Re: JSON export for web SVG animation.

Posted: Thu Oct 15, 2020 3:11 pm
by Maestral
Hope you'd not mind my curiosity but what do you use for SVG & JSON in AE? Lottie or something more flexible?

Re: JSON export for web SVG animation.

Posted: Thu Oct 22, 2020 10:42 am
by Maido H
Maestral wrote: Thu Oct 15, 2020 3:11 pm Hope you'd not mind my curiosity but what do you use for SVG & JSON in AE? Lottie or something more flexible?
Yes, Lottie if you say so :). Like I mentioned I do not have a very clear connection between SVG, JSON, and Lottie, which is what and how it works.

Re: JSON export for web SVG animation.

Posted: Thu Oct 22, 2020 11:15 pm
by dkwroot
Maido H wrote: Thu Oct 22, 2020 10:42 am
Maestral wrote: Thu Oct 15, 2020 3:11 pm Hope you'd not mind my curiosity but what do you use for SVG & JSON in AE? Lottie or something more flexible?
Yes, Lottie if you say so :). Like I mentioned I do not have a very clear connection between SVG, JSON, and Lottie, which is what and how it works.
JSON (JavaScript Object Notation) is just a data storage format popularized by the programming language JavaScript. It just stores information in an easy format so that other programs can import it.
SVG (Scalable Vector Graphics) is an image format that stores vector drawing data. Browsers can import these files and display vector drawings.

The problem with animated SVG is that many browsers don't support them directly anymore. In the past, we could use SMIL to inject animation logic right inside of an SVG and it would work on the browser, but then Chrome came along and ceased support for it in exchange for CSS3. These days if you want an animated svg, you'll need 3 files to view it. An HTML file to load a webpage, an SVG file to hold the graphics data and a CSS file to hold the animation data.

If someone were to develop an exporter for Moho to animated web graphics, they would have to convert the moho animated data to CSS and the Vector data to SVG. Then we would load a skeleton HTML file to pull everything together. It would be pretty messy and if you aren't familiar with web development, it probably wouldn't be terribly useful to you.

Re: JSON export for web SVG animation.

Posted: Fri Oct 23, 2020 4:23 am
by SimplSam
dkwroot wrote: Thu Oct 22, 2020 11:15 pm The problem with animated SVG is that many browsers don't support them directly anymore. In the past, we could use SMIL to inject animation logic right inside of an SVG and it would work on the browser, but then Chrome came along and ceased support for it in exchange for CSS3. These days if you want an animated svg, you'll need 3 files to view it. An HTML file to load a webpage, an SVG file to hold the graphics data and a CSS file to hold the animation data.
I believe more typically now there are 4 components for in-browser animations: HTML page, Image data (vector or bitmap), CSS data (styling or functional) and JavaScript scripting. All of these components can be embedded in the same single html text file - although more typically they might be separated for modularity sake.

Also.. SMIL in Chrome was rescued, as Chrome devs suspended their abandonment plan.

Re: JSON export for web SVG animation.

Posted: Sun May 29, 2022 11:31 pm
by Bortyk