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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

или

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

или

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

или

или

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

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

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

Синтаксис GSAP

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

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

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

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

// используем класс или ID
gsap.to(".box", { x: 200 });

// сложный CSS селектор
gsap.to("section > .box", { x: 200 });

// переменная
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// массив элементов
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })

// используем класс или ID

gsap.to(".box", { x: 200 });

// сложный CSS селектор

gsap.to("section > .box", { x: 200 });

// переменная

let box = document.querySelector(".box");

gsap.to(box, { x: 200 })

// массив элементов

let square = document.querySelector(".square");

let circle = document.querySelector(".circle");

gsap.to([square, circle], { x: 200 })

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

Метод set()

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

//Общий вид записи
gsap.set(element, { vars });
//Пример
gsap.set('.ball', { x: 100, opacity: 0.5 });

//Общий вид записи

gsap.set(element, { vars });

//Пример

gsap.set('.ball', { x: 100, opacity: 0.5 });

Метод to()

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

//общий вид
gsap.to(element, { vars });
//параметры анимации
gsap.to(".ball", { duration: 1, x: 100, opacity: 0.5, repeat: -1, yoyo: true });

//общий вид

gsap.to(element, { vars });

//параметры анимации

gsap.to(".ball", { duration: 1, x: 100, opacity: 0.5, repeat: -1, yoyo: true });

Здесь вы можете указывать какие-либо параметры в виде 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.0

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

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

x: 200, // по умолчанию в px
x: "+=200" // относительные значения
x: '40vw', // строка с любыми единицами
x: () => window.innerWidth / 2, // вы даже можете использовать функциональные значения для вычислений!
  
rotation: 360 // используйте градусы по умолчанию
rotation: "1.25rad" // используйте радианы

x: 200, // по умолчанию в px

x: "+=200" // относительные значения

x: '40vw', // строка с любыми единицами

x: () => window.innerWidth / 2, // вы даже можете использовать функциональные значения для вычислений!

rotation: 360 // используйте градусы по умолчанию

rotation: "1.25rad" // используйте радианы

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

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

//gsap.from()
gsap.from(element, { duration: 1, x: 100, opacity: 0.5 });

//gsap.fromTo()
gsap.fromTo(element, { x: -100 }, { duration: 1, x: 100 });

//gsap.from()

gsap.from(element, { duration: 1, x: 100, opacity: 0.5 });

//gsap.fromTo()

gsap.fromTo(element, { x: -100 }, { duration: 1, x: 100 });

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

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

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

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

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

Параметр `stagger`

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

gsap.to(".box", {
  y: 100,
  stagger: 0.1, // 0.1 seconds between when each ".box" element starts animating
});

gsap.to(".box", {

y: 100,

stagger: 0.1, // 0.1 seconds between when each ".box" element starts animating

});

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

gsap.to(".box", {
  y: 100,
  stagger: {
    // оборачиваем дополнительные параметры в объект
    each: 0.1,
    from: "center",
    grid: "auto",
    ease: "power2.inOut",
    repeat: -1, // Повторяется немедленно, не дожидаясь завершения других анимаций.
  },
});

gsap.to(".box", {

y: 100,

stagger: {

// оборачиваем дополнительные параметры в объект

each: 0.1,

from: "center",

grid: "auto",

ease: "power2.inOut",

repeat: -1, // Повторяется немедленно, не дожидаясь завершения других анимаций.

});

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

Свойство	Описание
`amount`	[Число]: общее количество времени (в секундах), которое распределяется между всеми колебаниями. Таким образом, если так и есть 100 элементов, которые колеблются линейно, между временем начала каждого субанимации будет 0,01 секунды. Если вы предпочитаете указывать определенный промежуток времени между каждой анимацией, используйте вместо этого свойство `each`
`each`	[Число]: интервал времени (в секундах) между временем начала каждого субанимационного анимации. Таким образом, если да (независимо от количества элементов), между временем начала каждого субанимации будет 1 секунда. Если вы предпочитаете указать общее количество времени для разделения между ступенями, используйте вместо этого свойство `amount`
`from`	[Строка \| Целое число \| Массив] : позиция в массиве, из которой будет исходить шатание. Например, чтобы начать с конкретного элемента, используйте число, представляющее индекс этого элемента в целевом массиве. Итак, для того чтобы начать с 5-го элемента массива, используйте `from:4` (поскольку в массивах используются индексы, отсчитываемые от нуля). Анимация для каждого элемента начнется в зависимости от близости элемента к значению «from» в массиве (чем ближе оно, тем раньше оно начнется). Вы также можете использовать следующие строковые значения:`"start"`, `"center"`, `"edges"`, `"random"`, or `"end"`или (`"random"` было добавлено в версии 3.1.0). Если у вас есть значение `grid` , вы можете указать десятичные значения, указывающие прогресс по каждой оси, например, `[0.5,0.5]` - по центру, `[1,0]` - верхний правый угол и т. д. По умолчанию: 0
`grid`	[Массив \| «auto»] : если элементы отображаются визуально в сетке, укажите количество строк и столбцов (например, `grid:[9,15]`), чтобы GSAP мог соответствующим образом рассчитать близость. Или используйте `grid:"auto"` , чтобы GSAP автоматически рассчитывал строки и столбцы на основе `element.getBoundingClientRect()` (отлично подходит для адаптивных макетов). Предполагается, что сетки располагаются сверху слева в правом нижнем углу (как текст, который обтекает правый край). Или, если ваши элементы не расположены в единой сетке, воспользуйтесь созданной нами вспомогательной функцией distributeByPosition()
`axis`	[строка] : если вы определяете `grid` , сдвиги основаны на общем расстоянии каждого элемента до значения "from" по осям x и y, но вы можете сосредоточиться только на одной оси, если хотите (`"x"` или `"y"`) . Используйте приведенную ниже демонстрацию, чтобы увидеть эффект
`ease`	[Строка \| Функция]: Распределения времени начала анимации. Например, для значения "power2" мы начнем с больших промежутков, а затем к концу сгруппируемся более плотно. По умолчанию: `"none"`

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

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

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

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

Параметр ease

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

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

gsap.to(".box", {
 duration:2.5,
 ease: "power4.out",
 rotation: 360
});

gsap.to(".box", {

duration:2.5,

ease: "power4.out",

rotation: 360

});

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

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

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

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

Timeline в GSAP

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

let TL = gsap.timeline();

TL.to('.ball1', {
  duration: 2,
  scale: 0,
  opacity: 0,
  delay: 1
}).to('.ball2', {
  duration: 2,
  x: -200
}).to('.ball3', {
  duration: 2,
  x: -200,
  borderRadius: 0,
  rotate: 360
}).set('.ball1', {
  duration: 2,
  scale: 1,
  opacity: 1,
  x: 130
})

let TL = gsap.timeline();

TL.to('.ball1', {

duration: 2,

scale: 0,

opacity: 0,

delay: 1

}).to('.ball2', {

duration: 2,

x: -200

}).to('.ball3', {

duration: 2,

x: -200,

borderRadius: 0,

rotate: 360

}).set('.ball1', {

duration: 2,

scale: 1,

opacity: 1,

x: 130

})

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

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

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

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

let TL = gsap.timeline({
  defaults: {
    duration: 1, 
    borderRadius: 0,
    ease: "bounce"
  }
});

TL.to('.text h2', {
  color: "red",
  fontSize: '2.5em',
  y:50
}).to('.ball1', {
  backgroundColor: "pink",
  x: -100,
}).to('.ball2', {
  backgroundColor: "crimson",
  y: 100
}).to('.ball3', {  
  backgroundColor: "#8B0000",
  x: 100,
})

let TL = gsap.timeline({

defaults: {

duration: 1,

borderRadius: 0,

ease: "bounce"

}

});

TL.to('.text h2', {

color: "red",

fontSize: '2.5em',

y:50

}).to('.ball1', {

backgroundColor: "pink",

x: -100,

}).to('.ball2', {

backgroundColor: "crimson",

y: 100

}).to('.ball3', {

backgroundColor: "#8B0000",

x: 100,

})

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

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

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

Примеры

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

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

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

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

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

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

Синтаксис GSAP

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

Метод set()

Метод to()

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

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

Параметр `stagger`

Параметр ease

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

Timeline в GSAP

Примеры

1 Комментарий

Добавить комментарий Отменить ответ

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

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

Синтаксис GSAP

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

Метод set()

Метод to()

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

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

Параметр stagger

Параметр ease

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

Timeline в GSAP

Примеры

1 Комментарий

Добавить комментарий Отменить ответ

Параметр `stagger`