This has recently caught my attention ,and some pretty good animators on Twitter are following -- Github azazdeaz / react-gsap-enhancer Use the full power of React and GSAP together. the demo/playground is great ! I just wish he would post a beginners tutorial. as I'm just learning React.

Since you used "SVG animations" in your question here i'm assuming you're asking about native SVG animations(SMIL) here.

Here's what I would do.. For simpler transitions, use CSS Animations for sure. Use and manipulate SVG elements with CSS for anything extra, Basically anything that is doable with CSS, Do it in CSS.

For complex situations however, Go with SMIL.

Simply because SMIL is capable of animating properties that CSS just can't currently animate – such as path data properties, for example.

You can do more awesome things with SVG using a library like snap.svg which is like jQuery for SVGs

Native SVG animation features are also being ported into CSS. so there are good things ahead :) Here's a nice guide that you can use to achieve them: css-tricks.com/smil-is-dead-long-live-smil-a-guid…

This is a great question I also asked myself several years ago. After a serious research and a couple of hours lost reading never-ending, 4-5 years old posts I found Web Fundamentals , a newly created(then) website by Google for web development best practices, design and overall web projects guidance.

Web Fundamentals has a great section on Animations, where they suggest the following:

Use CSS animations for simpler “one-shot” transitions, like toggling UI element states and JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind or slow-down.

When JavaScript is required for animation, use GSAP, as it's 20x faster than jQuery. Here is one comparison test you can check - Speed Test: GSAP vs CSS Transitions (Zepto) vs jQuery

CSS animations are preferred by most, because of their's hardware acceleration. Declaring your animations in CSS allows the browser to determine which elements should get GPU layers, and separate them up accordingly. Most don't know that JavaScript can do that too. The browser create a GPU layer for every 3D transform (translate3D() or matrix3d()). The GPU speed boost is not just for the CSS animations, it's for JavaScript animations too! Also, not every css animation get a GPU boost.

So, there is surely a place for JavaScript in the web animation world.

P.S I still voted for CSS animations ;)

I basically use CSS for all animations, except in cases where I have to do some things css does not yet support. For the demos you showed above, I will use css for the page transitions.