Making animations for websites, HTML5, snap.svg

Hi, I’m trying to create animations for websites.

I have tried easelsif, but I ran into compatibility issues and I’ve now disregarded HTML5 canvas as it is not true vector and therefore no good for retina. That leaves animated .svgs, which led me to snap.svg, which led me to the snap plugin for Adobe Animate CC. This seemed to be the solution, however, having spent a day pulling my hair out with Animate, I have achieved a fraction of what I can do to a far better degree in Synfig in minutes!

Am I wrong in my findings? Adobe Animate is awful but can produce what I need. Synfig is superb but can’t. :cry:

Can anyone help solve this problem? Is anyone working on integrating snap.svg or similar to Synfig?

Cheers.

Hi,
technically this is not a problem.
Synfig is not designed for SVG/HTML5, easelsif is a “workaround”.
And this topic has been discussed a lot of times already.
Maybe one day, who knows?

It would be very logical that a vector animation program would have vector svg export and or vector animation export, but Since the current development of Synfig is highly influenced by a certain russian project that does not need svg export or svg animation it’s very unlikely that those features will be implemented in the future.
Greetz!

SVG implementation would be complicated and costly in CPU, the philisophy is not at all the same.
Synfig is not the only 2D animation system and you can see SVG is not supported everywhere (see this Godot discussion for example reddit.com/r/godot/comments … or_format/)

I’m not sure I appreciate the CPU argument. Assuming I’ve got to use some method of providing animation, for simple buttons and banners, the load can’t be much different. And for future proofing it’s got to be vector hasn’t it? With resolution and processing power increasing rapidly, it surely can’t be long before vector is the least power hungry method by some considerable difference.

It seems a real missed opportunity when Synfig is so easy to use.

What other animation software can anyone suggest? Is anything superior to Synfig?

Hi,
I am Luc, teacher at ENAC in Toulouse (France). For e-learning courses, we need to develop some animations. Due to network bandwidth, we can’t use video and SVG/HTML5 should be a good solution for us.
Currently, we are using a closed-source solution based on a presenter tool animation, not really usable due to closed licence and deprecated output format (Flash). Synfig should be a very good tool for that.

Great :smiley:

It seems to be difficult to integrate easelsif in our e-learning platform, difficult to use it in stand alone media (for some site without good Internet access), and SVG/HTML5 rendering is now supported by current browsers.

Perhaps it’s really waited, it should be interesting to evaluate this feature and some possibilities to finance it’s development.

Luc.

We have no choice but to pay a subscription to Adobe for Animate CC which is unintuitive, frustrating and creatively hampering. I’d rather put that money toward Synfig development any day of the week!

Sug Mon Kooky, which features do you need (supporting all synfig features is unrealistic) and how much funding are you willing to put into it?

Hi!
Basic SVG export without ofcourse Synfig only filters and features would be nice and maybe SMIL export, but to be honest I would rather put (donate) my money for decent import of rigged characters that have skeletons and bones in them.
Greetz!

SMIL seems to be dying these days in favour of css and js-based svg animation. So using some js lib like suggested might be a better choice. But anyway, i need more specific list and figures to say whether i’m willing to work on that.

As for skeleton importing, i have no idea of how bone system currently works. However, i’m slowly progressing with generic reusing feature (github.com/synfig/synfig/issues/272 / Non-destructive waypoint reusing (multiple timelines, etc)) and when i’m done, it shouldn’t be hard to implement skeleton-specific stuff (if it won’t work out of the box). But i think it’s better to discuss bones in a separate thread.

Hi!
I agree that smil is going down hill. But to move svg elements around and playback them frame by frame with lets say, javascript or css you need the actual svg’s first. So a basic frame by frame output from Synfig in svg would already mean a lot.
Your reuse system seems great. Can someone donate specifcally to one feature?
Greetz!

I haven’t looked too deep into svg animation, but i doubt that just exporting frames in svg and then gluing them with js will work. If it would, it might be the simplest way, cause we still have that cairo renderer around (even if it’s very limited) and cairo seems to support svg output.

I would gladly accept donations to specific features that i’m willing to work on. There’s also that bounty source thing, but they charge 10%, so it’s not the best option.

Hi!
Here is a simple example of frame by frame svg animation glued together with css3: https://medium.com/@fraudoudou/svg-css3-frame-by-frame-animations-with-png-and-js-fallback-da25ae7d7a92#.etuuzcr7j
Greetz!

That’s an interesting way to do it, but we need to test how it works with longer animations since it utilizes spritesheet approach.

Hi!
The focus of svg animation would not be on long animations, but more in the sense of animated logos, non complex looping vector animations, infographics, anitmated icons and or animated interface controls, of course all resolution independent.
Greetz!

That’s probably true, but still there’s a difference between 4 frames and even 5s at 24fps. But yeah, 5s/24fps runs almost smooth for me. So it might a viable approach. Thanks for bringing it.

Hi!
For shorter animations on a website in general you don’t need to go higher then 12fps. You just have to make the right keyframes and quick cuts from pose to pose to keep up the fluidity in order to make up for the loss of frames. It’s totally different then broadcast animation.
Greetz!

So AirBnB revealed an open source solution for animations called Lottie.

I wonder, if all these open source tools could be adapted somehow to help with the topic of this thread.

No matter what solution you use (pure svg, svg+js, canvas-based player), there still got to be code converting Synfig data to whatever other format. And there doesn’t seem to be anybody willing either to write that code or to sponsor writing it.