Animate svg image on js, which is better for this?

Question

Layout

There is a picture svg take.ms/ueHCf on it various objects, it is necessary that some of them are constantly in motion, some should be animated with certain user actions. at the end of them, for example, a popup should open. Those. you need the interaction of svg already ready and js. In which direction to dig, what is better for this, and what would be supported by both mobile and IE10+?

Answer 1

1. The CSS animations mentioned above should be used with care - IE has trouble integrating them with SVG. This option is not always suitable.
2. SMIL... To quote MDN: "Chrome 45 deprecated SMIL in favor of CSS animations and Web animations" . While everything works. What will happen next - who knows.
3. In VanillaJS, doing tricky animations with SVG is quite difficult. The option to generate CSS animations from JS has the same problems as using pure CSS animations.
4. For some reason, our people like to praise GSAP . But there are other tools, such as Anime.js - less pathos, it solves its task. I would give preference to the second option, but here the taste and color ...

Answer 2

1. CSS alone can animate svg example , codepen example
2. smil animation example
3. regular jacascript/jquery codepen example
4. plugin use codepen example 1 , codepen example 2 , codepen example 3 , codepen example 4