JSON export for web SVG animation.

General Moho topics.

Moderators: Fahim, Distinct Sun, Víctor Paredes, erey, Belgarath, slowtiger

Post Reply
User avatar
Maido H
Posts: 7
Joined: Thu Sep 10, 2020 12:13 pm
Contact:

JSON export for web SVG animation.

Post by Maido H » Wed Oct 14, 2020 9:12 am

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!
:!: Moho is great and let's make it even better :idea:
User avatar
synthsin75
Posts: 7309
Joined: Mon Jan 14, 2008 11:20 pm
Location: Oklahoma
Contact:

Re: JSON export for web SVG animation.

Post by synthsin75 » Wed Oct 14, 2020 7:42 pm

You can render to SVG or export to FBX in Moho. While the Moho file format is JSON, it does not export to JSON.
User avatar
Maido H
Posts: 7
Joined: Thu Sep 10, 2020 12:13 pm
Contact:

Re: JSON export for web SVG animation.

Post by Maido H » Thu Oct 15, 2020 12:30 pm

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 :/
:!: Moho is great and let's make it even better :idea:
User avatar
Maestral
Posts: 394
Joined: Tue Jan 27, 2009 5:44 pm
Location: Belgrade, Serbia

Re: JSON export for web SVG animation.

Post by Maestral » 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?
User avatar
Maido H
Posts: 7
Joined: Thu Sep 10, 2020 12:13 pm
Contact:

Re: JSON export for web SVG animation.

Post by Maido H » 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.
:!: Moho is great and let's make it even better :idea:
dkwroot
Posts: 663
Joined: Thu May 02, 2013 6:56 am
Location: USA
Contact:

Re: JSON export for web SVG animation.

Post by dkwroot » Thu Oct 22, 2020 11:15 pm

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.
User avatar
SimplSam
Posts: 166
Joined: Thu Mar 13, 2014 5:09 pm
Location: London, UK
Contact:

Re: JSON export for web SVG animation.

Post by SimplSam » Fri Oct 23, 2020 4:23 am

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.
Moho 12.5/13.02 » Win 10 Pro 64GB » NVIDIA GTX 1080ti 11GB

Sam
petersmith98
Posts: 1
Joined: Fri Oct 23, 2020 10:32 am

Re: JSON export for web SVG animation.

Post by petersmith98 » Mon Oct 26, 2020 4:45 am

You can render to SVG or export to FBX in Moho. While the Moho file format is JSON, it does not export to JSON.
Post Reply