Workflow: GreenSock
The issue with longer CSS animations:
Cross browser issues
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: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
GSAP killer workflow featurestransform properties that are targeted in any other keyframe.- 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.
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.