Анимировать svg картинку на js, что лучше для этого подходит?

Question

[Александр Миранович]

Есть картинка svg take.ms/ueHCf на ней различные объекты, надо что бы некоторые из них были постоянно в движение, некоторые, должны анимироваться при определенных действиях пользователя. по их окончанию должен например открываться попап. Т.е. надо взаимодействие svg уже готового и js. В какую сторону копать, что лучше для этого подойдет, и что бы поддерживалось и мобильными и ие10+?

Answer 1

[Ivan Bogachev]

1. CSS анимации, которые упомянули выше, стоит использовать осторожно - IE имеет проблемы с интеграцией их и SVG. Такой вариант не всегда подойдет.
2. SMIL... Процитирую MDN: "Chrome 45 deprecated SMIL in favor of CSS animations and Web animations". Пока все работает. Что будет дальше - кто его знает.
3. На VanillaJS делать хитрые анимации с SVG достаточно сложно. Вариант с генерацией CSS анимации из JS имеет те же проблемы, что и использование CSS анимаций в чистом виде.
4. Почему-то у нас народ любит хвалить GSAP. Но есть и другие инструменты, например Anime.js - меньше пафоса, свою задачу решает. Я бы отдал предпочтение второму варианту, но тут уж на вкус и цвет...

Comments

[Dima Polos]

Как раз хотел gsap написать, но просто поставил Вам лайк)

Answer 2

[HamSter]

1. Одним лишь css можно анимировать svg пример, codepen пример
2. smil анимация пример
3. обычный jacascript/jquery codepen пример
4. плагин использовать codepen пример 1, codepen пример 2, codepen пример 3, codepen пример 4