Как анимировать такую svg при скролле?

Question

[Mary Солнечная]

Всем добрый день, коллеги!
В моем рабочем проекте почти все картинки svg, некоторые из них надо анимировать.
Например вот такая картинка:

Необходимо сделать так, чтобы при скролле эта лампочка появилась и каждый отдельный луч света появился.

Было несколько идей:
1) Загрузить только плагин scrollr.js , а каждый отдельный луч (path) и саму лампочку заанимировать css3 хаками
2) Загрузить библиотеку scrollmagic и тоже попробовать поиграться и навешать анимации

Вопросы стоят такие:
1) Насколько хороши эти идеи для реализации данной svg анимации?
2)Как сделать лучше и правильнее? Как сейчас это делают?
3) Куда рулить, чтобы начать делать качественную и красивую анимацию?
Я не знакома с svg анимацией, а в интернете очень много разной инфы и библиотек.
Заранее всем спасибо за помощь!

Comments

[alex]

а что конкрентно вам нужно анимировать? если, например прозрачность только, то я бы сделал на css-animation/transition. добавил бы класс с анимацией когда иконка появится во вьюпорте. если нужно чтобы лампочка как бы рисовалась по контуру, то тут не подскажу, но там вроде как сложнее уже.

spoiler

[Mary Солнечная]

Спасибо вам) я думала много разных вариантов, в т.ч. и загрузка по контуру, но дизайнер хотел другого)

Answer 1

[Александр Филиппенко]

Проще всего наверное, через CSS. Навешиваем классы на контейнер при прокрутке, а у нужных лучей (path), меняем по классу свойство fill