SVG Animations With No JavaScript

[SteveSargent]

I've had a request from a client to build a responsive animated SVG infographic but there's one problem: no javascript allowed! I would imagine it's going contain animated line drawing, mask animations, rotation, scaling and all the typical animations you see in infographics.  Apart from the fact that the process will be very long-winded, I'm wondering if it is even possible to get consistent, usable results across all platforms and devices using just SMIL and CSS. Am I correct in thinking that only a javaScript library like GSAP would produce acceptable results? Any opinions would be helpful.

[Jonathan]

Hello @SteveSargent and welcome to the GreenSock Forum!

 

You can see here that SMIL is not widely supported and has been deprecated in many modern browsers.

 

https://caniuse.com/svg-smil

 

Chrome has it deprecated, but un-suspended it in 2017, but still SMIL was replaced by the web animations API and CSS animations which in itself is still not very compatible or very consistent. And you wont be able to use SMIL in IE or MS EDGE since its not supported.

 

I really don't see you using SMIL unless you want inconsistent animations that wont work cross browser. You could use CSS animations but you wont have the control like you have with GSAP for complex transforms on the fly.

 

But that is just my two cents. Happy Tweening

 

 

[Carl]

Although SMIL never gained popularity in the post-Flash, modern web era I know some people were pretty impressed with it. 

My guess is that it will probably be more reliable and powerful than CSS where supported, but as Jonathan noted it's official support isn't something you can put too much stock in. If javascript is out, I think you'll have to proceed cautiously with fairly low expectations. 

[GreenSock]

There are a ton of browser inconsistencies and "gotchas" when animating SVG with CSS. For example, transform-origin issues: https://css-tricks.com/svg-animation-on-css-transforms/. There are many, many more that GSAP solves under the hood. Another example, IE and Firefox both have bugs that affect progressively drawing SVG lines, measuring path length, and Safari can leave rendering artifacts in certain cases. 

 

I'm curious: why did your client disallow JS for the animations? I'm biased of course, but I think it's a pretty bad tradeoff to dump JS for buggy (and headache-prone, verbose) CSS. Are they concerned about security or something? 

[SteveSargent]

I'm not 100% sure why javaScript is not allowed but they are very clear about not being able to use it in the brief. It looks like they want to be able to just copy and paste a block of code into an existing template that won't accept javaScript.
Anyway , thanks guys this has been very useful for me and I'm going to try and push back or at least warn them that there could be many issues and compromises along the way. Complex SVG animations can be a fiddly enough process as it is without an extra headache no GSAP!