GSAP — урок №1

GreenSock Animation Platform (GSAP) позволяет анимировать все, к чему имеет доступ JavaScript (свойства CSS, SVG, React, canvas, объекты и т. д.) и все это с невероятной скоростью (до 20 раз быстрее, чем jQuery). Более подробно о тестах производительности и о популярности данной платформы, можно посмотреть на офф. сайте — https://greensock.com.

Мы начнем с самых основ GSAP, и для начало рассмотрим, что происходит при запуске ваших анимаций на данной платформе.

Анимация сама по себе сводится к изменению значений свойств несколько раз в секунду, в результате чего, создается впечатление, что что-то движеться, исчезает, вращается и т.д.

GSAP берет начальное и конечное значение чего-либо и интерполирует их 60 раз в секунду.

GSAP не имеет заранее определенного списка свойств, которые он может обрабатывать. Это супер гибкий, приспосабливающийся почти ко всему, что вы передаете в него. GSAP может анимировать все следующее:

CSS: 2D и 3D преобразования, цвета, ширина, непрозрачность, border-radius, margin и почти каждое значение CSS (с помощью CSSPlugin).

Атрибуты SVG: viewBox, width, height, fill, stroke, cx, r, opacity и т. д. Такие плагины, как MorphSVG и DrawSVG, могут использоваться для расширенных эффектов.

Любое числовое значение: например, объект, который отображается в HTML5 <canvas>. Анимируйте положение камеры в 3D-сцене или фильтруйте значения. GSAP часто используется с Three.js и Pixi.js.

 

Из чего состоит платформа:

TweenLite — легковесное ядро ​​движка, которое оживляет любое свойство любого объекта. Его можно расширить с помощью дополнительных плагинов.

TweenMax — самый многофункциональный (и популярный) инструмент в арсенале. Для удобства и эффективности загрузки он включает TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin и EasePack (все в одном файле).

Так же, сюда входят несколько плагинов расширяющие возможности анимации и упрощающие разработку, но мы будем рассматривать пока самое основное.

Итак, мы подключим сразу TweenMax , внутри которого есть множество инструментов.

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

 

TweenMax основы

Первый метод, который мы рассмотрим будет TweenMax.to(), для создания простой анимации в него следует передать 3 параметра:

target : объект который мы собираемся анимировать, чаще всего это селектор по классу, например «.animating-item».

duration : продолжительность анимации в секундах.

vars : это объект в который передаются пары свойств для анимации (свойство:значение), например «opacity:0.5», и другие необязательные специальные свойства, такие как  onComplete.

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


Следует отметить, что при анимации css свойств transform, они указываются в таком виде:

x: 100 — transform: translateX(100px)

y: 100 — transform: translateY(100px)

rotation: 360 — transform: rotate(360deg)

rotationX: 360 — transform: rotateX(360deg)

rotationY: 360 — transform: rotateY(360deg)

skewX: 45 — transform: skewX(45deg)

skewY: 45 — transform: skewY(45deg)

scale: 2 — transform: scale(2, 2)

scaleX: 2 — transform: scaleX(2)

scaleY: 2 — transform: scaleY(2)

xPercent: 50 — transform: translateX(50%)

yPercent: 50 — transform: translateY(50%)

 

Замечание по производительности: браузерам гораздо проще обновлять x и y (transform), чем top и left, которые влияют на поток документов. Поэтому, чтобы что-то переместить, мы рекомендуем анимировать x и y.

from() tweens

До этого момента мы анимировали элементы с начальных данных до тех, что указали в объекте vars. Но иногда требуется сделать обратное, например переместить элемент с указанных позиций к нулевым, для этого есть метод from, и используют его так

 

Специальные свойства

В объекте vars как было сказано, есть место специальным свойствам:

delay — задержка перед выполнением анимации
onComplete — Функция обратного вызова после окончании анимации
onUpdate — функция вызываемая при проигрывании анимации
ease — как будет показываться анимация, посмотреть какие возможны значения можно здесь https://greensock.com/docs/Easing/Power2