GSAP – одна из самых популярных JavaScript-библиотек для создания анимаций. Её используют как новички, так и опытные front-end-разработчики. В этой статье я хочу рассмотреть несколько примеров ее применения – от самых простых до менее очевидных.

Работая над сервисом для анимации логотипов, я выбрал GSAP (GreenSock Animation Platform), потому что эта библиотека позволяет создавать анимации практически любой сложности. Причём речь идёт не только об изменении CSS-свойств, но и о работе с SVG, Canvas, аудио и многими другими элементами.

HTML/CSS

Начнём с самого простого. С помощью GSAP можно анимировать практически любое CSS свойство с числовым значением, включая цвета. В отличие от стандартных CSS анимаций, GSAP позволяет строить более сложные сценарии: запускать анимации нескольких элементов одновременно, задавать последовательности, а также использовать паузу и обратное воспроизведение.

Пример: анимация фона элемента – CodePen.

SVG

Подобно HTML и CSS, с помощью GSAP можно анимировать и SVG-элементы. Это могут быть как простые эффекты – например, отрисовка контура изображения, – так и более сложные сценарии, такие как морфинг, когда одно SVG плавно трансформируется в другое. Для подобных задач удобнее всего использовать специальный плагин – MorphSVGPlugin.

Пример: анимация контура SVG – CodePen.

Canvas

Вот тут уже становится интереснее! С технической точки зрения анимация элементов Canvas мало отличается от работы с CSS-свойствами – за тем исключением, что при каждом вызове onUpdate содержимое Canvas нужно перерисовывать заново. Дальше всё зависит только от вашего воображения и мастерства.

Библиотеки для работы с Canvas, например Fabric.js, могут заметно упростить задачу: они предоставляют готовые методы для изменения основных свойств элементов – таких как размер, положение и многое другое.

Пример 1: анимация изображения в стиле заставки Red Dead Redemption 2 – CodePen.
Пример 2: анимация логотипа московского метро – LogoSpark.

Audio

Наверное, один из самых неожиданных способов применения GSAP – работа со звуком. Эта библиотека может стать мощным инструментом для управления аудио в реальном времени, позволяя плавно изменять параметры звука, такие как громкость и частота. Кроме того, GSAP отлично подходит для синхронизации звука с визуальными эффектами.

Пример: генерация звука сирены и его визуализация на Canvas – CodePen.

Текст

Ещё один интересный способ применения GSAP – анимация появления текста. Для этого можно использовать специальный плагин – TextPlugin. Однако более простые эффекты, например «пишущей машинки», легко реализовать и стандартными средствами библиотеки с помощью метода onUpdate.

Пример: эффект “пишущей машинки" на Canvas – CodePen.

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

О себе

Меня зовут Евгений, я разрабатываю сервис по созданию автоматической анимации логотипов одним нажатием - www.logospark.ru. Оживите логотип своего веб-сайта за секунды - без кода, без дизайнера, без лишних хлопот.