Exporting animated vector based graphics for web use

[mattb2461688]

Is there such a thing? I have a 'flat' animations (such as icons and a short clip as well) that I'd rather not export as an animated GIF, PNG or JPG.

I've tried Bodymovin, and that sort of works, but the transparencies etc of the animation get lost and it looks like it has a hard time interpreting overlapping shapes.

I'd like to get sharp, crisp animations, while at the same time reducing file size.

Is there a way, or best practice for exporting animations for use online?

[Mylenium]

Well, not meaning to be rude, but exactly this...:

I'd like to get sharp, crisp animations, while at the same time reducing file size.

...could turn out to be utter nonsense. You already bumped into the limitations of this process which not necessarily is the fault of the script you are using. There are simply limitations in AE itself. That said, you probably should learn to compromise and/ or start out in Animate CC to begin with. There is nothing wrong with animations being baked into pixel imagery just like there will always be limitations as to how far vector-based animation can go even if you manage to produce clean SVGs, HTML canvas code and CSS animation from Animate. You simply need to understand these things and not expect the programs to do magic. That being so, and returning to my original point, it could quite well be that your vector output is just a series of static states/ poses, which would result in SVG files much bigger than even a hunky animated GIF, so again, from where I sit you simply have wrong expectations because you you're not aware of the underlying technical stuff. In any case, without actually seeing your artwork, nobody can realyl tel lyou which route might be best.

Mylenium

[mattb2461688]

this is the animation I'm trying to 'optimize'

[Mylenium · Accepted solution]

I see nothing in there that would warrant obsessing about vector output. You use al lthe trimmings that screw with performance like transparencies and (animated?) paths for the interpolated curves. Conversely, since there is effectively only a handful of colors, you could create a 4k GIF from it and it would still be a small file. Unless you plan on adding considerably more elements that would e.g. make the 256 color palette run out in a GIF or wanted an interactive SVG, I see no reason at all to change anything.

Mylenium

[mattb2461688]

Thanks.

For this one I should be ok, but I like the scalability of vector and generally a reduction in file size.

I think going forward I'll just have to consider Animate when I want to have scalable vector animations.

[mattb2461688]

OK I've had limited experience with animate, but you can do basically what I'm looking to do with that?