What is the best way to animate svg?

Question

JavaScript

What is the best way to animate svg and why?
Not long ago I started making websites with svg, I know that there are a lot of ways to animate svg, but I don’t know which one is better to choose.
1. Js
2. js + library
3. Use standard svg animation.
4. using css3
Maybe there are some other ways?
How do you animate svg ?
canvas is not from this topic, maybe later I will learn how to combine)
Thank you!

Answer 1

Depends on what exactly you want to animate in the svg. For some, transformations are enough, but for some, complex animations for path with all sorts of custom stray are needed.
Universal options - GSAP and D3. Gsap is purely designed for animation, and there are a large number of ready-made solutions / plugins for svg. If you need to make a cool and complex animation, then this is probably the best option. D3 is also good, but it is more designed to work with data, and is not particularly suitable for all sorts of pretty animations.
There is also velocityJS and similar libs, but they are all essentially light versions of Gsap (despite the fact that Gsap itself has lighter versions of it).
CSS can do a lot, you can even animate path rendering and stuff like that, but it is not friendly with any IE when it comes to working with path (+ there are problems with transform-origin in FF). Examples of messing around with pure css svg loaders:
codepen.io/suez/pen/myvgdg
codepen.io/suez/pen/ogmMOM
codepen.io/suez/pen/MwJdRy
If you need to do something really custom and cool, and at the same time, you are not at all sure that they will help you with this (either there is no such functionality, or until you learn how to use it, you will go crazy), then you will have to write bicycles in js. requestAnimationFrame and into battle. Here are two example bikes - codepen.io/suez/pen/oXLroX and codepen.io/suez/pen/emjwvP
Oh yes, there are still SMIL animations (which are described right inside SVG) and they can do a lot (in many ways, js is even more convenient, without loss of functionality), but modern browsers are slowly abandoning them (and besides, they never supported in IE). So you can bypass them.