Если вы читаете наш блог то наверняка уже не раз видели подборки вариантов как сделать красивую анимацию для своего сайта разными способами, сегодня мы хотим показать еще один достаточно креативный способ. Речь пойдет об анимации для сайта при помощи SVG. Многие разработчики не до конца понимаю плюсы такой анимации это не только изменение разрешения без потери качества, но и удобная оптимизация для поиска, так что в любом случае попробуйте хоть раз такой подход к графике на сайте, я уверен, что вы останетесь довольны.

 

Наша SVG анимация представляет не нечто новое, разве что мы использовании, в этот раз, более сложный рисунок, который в основном сделан из штрихов, благодаря чему мы можем сделать достаточно оригинальный рисунок. Используя много разных цветов и добавляя некоторые другие анимации, мы получим уникальную иллюстрацию.

Для анимации мы использовали инструмент Gsap TimelineMax и DrawSVGPlugin.

Шаг 1. HTML

Давайте посмотрим на иллюстрацию SVG. Мы разделили рисунок на несколько групп, которые мы будем анимировать по отдельности:

Вся анимация состоит из следующих частей:

  • Появление рисунка;
  • Раскачивание;
  • Вращение колеса;
  • Рисование штрихов;
  • Переключение заливка.

Если вы посмотрите внутрь кода SVG, вы увидите, что он состоит из множества маленьких путей. Обратите внимание, что большая часть визуального эффекта происходит от того, что мы использовали много штрихов, которые запускаются в анимацию одновременно.

Шаг 2. GSAP

Мы используем GSAP от GreenSock и их плагин DrawSVG который позволяет нам контролировать свойства stroke-dashoffset и stroke-dasharray. Мы будем анимировать значение stroke-dashoffset в значении от «0-40%” до» 60%-100% » его максимальной длины. Таким образом, картинка никогда полностью не дорисуется  и будет начинаться сначала:

Мы используем метод под названием staggerFromTo. Это позволяет анимировать каждый шаг анимации с небольшой задержкой между ними (1.2 секунды). Вот как мы получаем этот «хаотичный» эффект в нашей анимации. Но если бы мы использовали его, как указано выше, у нас была бы большая задержка, прежде чем последние линии начнут анимироваться. Чтобы избежать этого, мы используем временную шкалу:

Мы надеемся, что вам понравилась такая анимация и вы найдете в нем вдохновление для создания собственных эффектов. Оставляйте в комментариях пожелание какие вы эффекты вы хотели увидеть в дальнейшем. Материал предоставлен tympanus и переведен в ознакомительных целях.

Вот и все. Готово!