Workflow: GreenSock

In notebook:
FrontEndMasters SVG Animation
Created at:
animation libraries JavaScript
The issue with longer CSS animations:

If you have to chain 2-3 CSS animations after another then she recommends using GSAP.
It's only 20KB. 

It makes things a lot more stable. 

But the most important advantage is about workflow. 

In every animation you do, you always have to go back and change the timing of an animation. Now you need to update every other animation happening after this one. 

Also, very difficult with CSS to sync parallel animations. Each take the same amount of time and you want that things align at certain percentage value in the keyframes. 

On the other hand, if you're just doing simple things, like animating a menu open, it's easier just with vanilla CSS. CSS is very performant. 

About parallel ​transform​ animations:
CSS Trick article

So the problem is (was) that if you animate multiple ​transform​ values, they will not happen at the same time, but one after the other, even if they're in the same animation definition. (first rotates, then moves or scales). 
So in this case you need a help from JS.

Precision: if you define a CSS animation, then at every keyframe definition you need to explicitly set all the ​transform​ properties that are targeted in any other keyframe.
GSAP killer workflow features
  • simple syntax
  • timelines
  • nested timelines
  • draggable
  • drawSVG (SVG that draws itself)
  • Stagger (more details later)
  • MorphSVG - an industry game changer. Morph one SVG into another just specifying an ID. 
Cross browser issues

Transform origin rotation bug (Safari and Firefox don't calculate correctly the rotation centres in some cases) CSSTricks
Fixed now in Firefox. 

It's just one of the many "nasty" bugs...

SNAP SVG animation library.