Анимация на основе GSAP

GreenSock Animation Platform (GSAP) - это всемирно известный набор инструментов для анимации на основе JavaScript, используемый на более чем 11 миллионах сайтов. Часть сайтов, которые используют GSAP, отмечены наградами. Этот набор инструментов облегчает жизнь разработчиков там, где нужно сделать сайт красиво и быстро. Основная библиотека содержит все необходимое для создания кроссбраузерных анимаций. Официальный сайт - gsap.com
В этой статье мы рассмотрим:

• Подключение GSAP к html-файлу
• Синтаксис GSAP
• Метод set()
• Метод to()<
• Какие единицы измерений использовать?
• Методы from() и fromTo()
• Функции play(), pause(), seek(), resume(), restart(), reverse()
• Обработчики событий анимации
• Timeline в GSAP
• Примеры

Подключаем GSAP к html-файлу

В этой статье мы и рассмотрим ряд методов для работы с GSAP, и начнем мы с того, где ее взять. Поскольку это js-библиотека, то подключить ее можно отдельным файлом к вашему html-файлу, скачав с оффсайта, или воспользоваться ссылкой с CDN. Имеенно последним способом мы и будем добавлять в html-код тег <script>.

Кроме основной библиотеки, существует еще много дополнительных плагинов, как платных, так и бесплатных, но здесь мы их задействовать не будем.

После того, как вы подключили GSAP, вам придется аналогичным образом подключить и свой js-файл, в котором вы будете писать код для ваших элементов. Коль вы здесь, предполагаю, что вы знаете, как это сделать.

Синтаксис GSAP

В самом начале синтаксис будет очень простым: вам нужно указать объект gsap, метод и в скобках целевой элемент(-ы) (target(s)) в виде css-селектора в кавычках и параметры в виде пар свойство: значение в фигурных скобках (vars).

Естественно, для ваших элементов должны быть заданы какие-то css-свойства, так как их довольно часто приходится менять в процессе анимации.

Целевой объект(-ы) в GSAP

Здесь все очень просто - как правило, вы указываете в качестве целевого объекта селектор нужного элемента, но также можно использовать переменную, заданную в js-коде. Несколько переменных можно указывать в виде массива.

Теперь давайте рассмотрим методы для создания анимации.

Метод set()

Метод set() позволяет установить какие-либо параметры для вашего объекта без анимации.

Метод to()

Метод to() позволяет запустить анимацию от того состояния, которое было у объекта до данного момента к тому, свойства которого вы описываете в фигурных скобках.

Здесь вы можете указывать какие-либо параметры в виде CSS-свойств, например,

• background, borderRadius, fontSize
• в виде координат:  x - смещение по горизонтали (аналог transform: translateX(число)), y - смещение по вертикали (аналог transform: translateY(число)), xPercent: 50 - аналог transform: translateX(50%), yPercent: 50 - аналог transform: translateY(50%);
• rotation: 360 - поворот на указанное цифрой количество градусов;
• scale: 2 - увеличение масштаба в 2 раза;
• duration - число секунд для анимации;
• delay - задержка перед анимацией в секундах;
• repeat - количество повторов анимации (целое число). При указании -1 вы создаете бесконечную анимацию;
• yoyo - повтор анимации от начала в конец, а потом наоборот - от конца в начало - вариант создания зацикленности;
• onComplete - функция, которая запускается после завершения анимации.

Все параметры вы найдете на официальном сайте и на странице Greensock Cheatsheet.

Пример для методов set() и to()

See the Pen GSAP set() and to() simple usage by Elen (@ambassador) on CodePen.

Какие единицы измерений использовать?

Для многих css-свойств в качестве единиц изменений подходят пиксели, поэтому они приняты в GSAP по умолчанию. Однако, есть еще ряд вариантов:

Методы from() и fromTo()

Методы from() и fromTo() используют те же параметры, что и метод to(), но from() задает, от каких параметров будет идти анимация до текущего состояния элемента.

Метод fromTo() предполагает, что вы задаете 2 блока параметров в фигурных скобках: первый отвечает за начальные значения анимации (аналогично методу from()), а второй - за конечные параметры анимации (аналогично методу to()).

В примере ниже для 2-х элементов задана GSAP-анимация, а 3-й указывает на их начальное положение на странице без анимации.

See the Pen GSAP from() and fromTo() simple usage by Elen (@ambassador) on CodePen.

Все методы еще раз можно посмотреть в примере от разработчиков GSAP

See the Pen gsap tweens by GSAP (@GreenSock) on CodePen.

Повторение анимации

Любую анимацию, которую вы назначаете с помощью методов gsap.to(), gsap.from() или gsap.fromTo() можно сохранить в переменную и повторить либо с начала, используя метод restart(), либо в обратном направлении с помощью метода reverse().

В примере ниже вы найдете такой код:

Это позволяет воспроизводить анимацию по клику в любом месте body  в любой момент времени.

See the Pen GSAP Stagger effect grid:auto by Elen (@ambassador) on CodePen.

Другие методы описаны ниже.

Также вы можете использовать функцию delayedCall() для того, чтобы повторить анимацию, сохраненную в переменной animateName.

Такой пример вы найдете чуть ниже.

Сама функция delayedCall() позволяет вызвать любую функцию через заданное время, причем полностью синхронизировать ее со всем циклом рендеринга (в отличие от метода, setTimeout(), который может срабатывать вне цикла обновления экрана браузера). При желании вы также можете передать в функцию любое количество параметров.

Общий вид ее таков:

Чтобы отменить/завершить отложенный вызов, сохраните ссылку на него в переменной, а затем вызовите для этой переменной метод kill() при необходимости:

Или, если вы не хотите сохранять ссылку на вызов delayedCall(), вы можете использовать метод gsap.killTweensOf():

Параметр stagger

Этот параметр позволяет указать задержку анимации каждого элемента из набора. Например, значение stagger: 0.1 приведет к тому, что между временем начала каждой анимации будет интервал 0,1 секунды. Отрицательное значение будет делать то же самое, но в обратном порядке, так что последний элемент начинает анимацию первым.

Для этого параметра существуют расширенные опции, например:

Опции перечислены в таблице ниже.

Пример от создателей GSAP

See the Pen Simple stagger demo - GSAP 3 by GreenSock (@GreenSock) on CodePen.

В этом примере можно раскомментировать параметр stagger: o.1 для того чтобы посмотреть, как меняется анимация появления и исчезновения кнопок с его добавлением. Чтобы повторить анимацию исчезновения кнопок, необходимо кликнуть в любом месте примера. Через 2 секунды кнопки снова появятся.

See the Pen GSAP 3 Staggered menu animation by GSAP (@GreenSock) on CodePen.

Пример ниже демонстрирует возможности анимации блоков в виде сетки с параметром stagger.  В коде закомментирован параметр axis: "x". Раскомментируйте его и снова запустите анимацию. Сделайте то же для параметра axis: "y".

See the Pen GSAP Stagger effect grid:auto by Elen (@ambassador) on CodePen.

В этом примере от создателей GSAP вы можете посмотреть, как различные опции влияют на вид анимации. Здесь вы можете задать настройки timeline сразу для множества объектов, используя сетку (grid) и получить очень интересные варианты анимации с помощью параметра stagger.

See the Pen Advanced staggers for embedding by GSAP (@GreenSock) on CodePen.

Параметр ease

Параметр ease уже встречался в таблице. В переводе это замедление, а по сути это вариант распределения анимации относительно временной шкалы.
Основные виды замедлений: none, power1, power2, power3, power4.(in, inOut, out), back, bounce, circ, elastic, expo, sine, steps. Дополнительные: rough, slow, expoScale, CustomEase.

Использование в коде:

По ссылке вы найдете интерактивный пример, в котором можно посмотреть на разницу в анимациях с разными видами ease.

Функции play(), pause(), seek(), resume(), restart(), reverse()

Вы можете управлять анимацией, останавливая ее на паузу, проигрывая с того места, где анимация была остановлена, и заново проигрывается с начала. За это отвечают функции play(), pause() и restart(). Если вы остановили анимацию кликом на кнопку pause, то запустить ее поможет метод play() (анимация проигрывается с начала и до конца) или resume() (проигрывает анимацию в том направлении в котором она шла до остановки), а начать анимацию с конца и воспроизвести ее к началу, т.е. в обратном порядке, позволит функция (или метод) restart(). Для повторения анимации предназначена функция repeat().

Функция seek(time) позволяет указать в скобках время, с которого начнется воспроизведение анимации.

Их использование представлено в примере ниже. Для их использования вызов одного из вышеописанных методов нужно сохранить в переменной.

See the Pen GSAP Tween play(), pause(), resume() by Elen (@ambassador) on CodePen.

Обработчики событий анимации

К обработчикам событий анимации относятся параметры, которые вы можете использовать для назначения неких функций. Вы можете выбрать из списка:

• onStart - наступает в начале анимации (когда ее время меняется с 0 на какое-либо другое значение, что может произойти более одного раза, если анимация перезапускается несколько раз).  Параметры в виде массива можно передать в onStartParams.
• onRepeat - наступает при повторении анимации. Параметры в виде массива можно передать в onRepeatParams.
• onReverseComplete - наступает по окончании обратной анимации. Параметры в виде массива можно передать в onReverseCompleteParams 
• onUpdate  -  функция, вызываемая каждый раз при обновлении анимации (при каждом «тике», перемещающем точку воспроизведения). Параметры в виде массива можно передать в onUpdateParams.
• onComplete - наступает при завершении анимации. Параметры в виде массива можно передать в onCompleteParams.

В примере ниже вы найдете использование функции для назначения свойства backgroundColor, а также использование onComplete для вызова обратной анимации с помощью anim.reverse() и повторение анимации при наступлении  onReverseComplete. Все то же самое можно было сделать параметрами {repeat: -1, yoyo: true }, но здесь целью было показать использование кастомных функций для обработки 2-х событий.

Кроме того, в консоли вы найдете вывод данных, которые можно получить из текущей анимации. Например, this.targets() - это функция, которая позволяет получить доступ к массиву объектов, участвующих в анимации, а this.vars.duration или this.duration() - к количеству секунд на воспроизведение анимации. Вообще объект this.vars содержить все ваши переданные параметры. Учтите, что для использования this в качестве доступа к Twen (анимации) вам понадобится функция, объявленная с помощью ключевого слова function () (так называемая Function Declaration).

See the Pen Untitled by Elen (@ambassador) on CodePen.

При назначении обработки всех событий вы можете использовать стрелочные функции. Но тут надо понимать, каким образом вы можете (или НЕ можете) использовать ключевое слово this. Нужно понимать, что стрелочные функции берут this из окружения, поэтому вы можете обращаться к объекту Window, а не к вашей анимации. Иногда выходом может быть указание параметра callbackScope или создание своего класса для объектов, как в примере ниже.

See the Pen GSAP tween onComplete by Elen (@ambassador) on CodePen.

Timeline в GSAP

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

При воспроизведении анимации она сначала отыграется для левого элемента, потом для центрального, потом для правого и снова для левого, который в конце окажется справа в силу того, что остальные элементы сместились.

See the Pen GSAP Timeline by Elen (@ambassador) on CodePen.

Примерно такого же эффекта можно достичь с помощью задержек (параметр delay), но управление Timeline намного эффективнее. Параметр stagger также позволяет получать воспроизведение анимаций для разных элементов друг  за другом, но сама анимация будет по сути одной и той же.

Во втором примере вы найдете параметры по умолчанию (defaults), которые сработают для всех элементов, перечисленных в анимации через Timeline.

Протестируйте сами.

See the Pen GSAP Timeline 12 example by Elen (@ambassador) on CodePen.

А теперь давайте рассмотрим, как можно использовать GSAP на страницах сайтов.

Примеры

Пример использования методов GSAP для анимации изображений

See the Pen GSAP Image Animation by Elen (@ambassador) on CodePen.

Анимация фигур

See the Pen Color swappy by Steve Gardner (@ste-vg) on CodePen.

Вариант появления элементов страницы сайта

See the Pen GSAP Simple Project by Elen (@ambassador) on CodePen.