Урок GSAP 3.6 - Ease/Переходы gsap - Эпизод 3

У вашего броузера проблема в совместимости с HTML5

Мы уже говорили, что свойство ease отвечает за правило изменения некоторого свойства с течением времени. Другими словами, ease описывает плавность изменения свойства. Вы могли сталкиваться с подобным в CSS, когда работали со свойствами transition - переход и animation - анимация. Подобную временную функцию удобно представлять в виде квадрата с единичной стороной, на котором по горизонтали отсчитывается время - в нашем случае вся продолжительность анимации берется за единицу, а по вертикали - значение свойства - CSS или просто изменяемого свойства объекта, как мы уже делали.

На сайте https://greensock.com/ есть удобный визуализатор переходов ease - GreenSock Ease Visualizer. Первый вариант значения ease - строка ‘none’ обозначает линейное движение. Если вы после выбора ‘none’ выберите ‘Custom’ - пункт с пользовательской настройкой плавности перехода, то обнаружите SVG-путь, где M - SVG-команда для перемещения курсора, а C - создание плавной кривой на основе кубической кривой Безье. И путь тут описан как раз в рамках единичного квадрата. Важно заметить, что работа с собственной настройкой переходов через CustomEase доступна только по подписке, потому нам этот фрагмент интересен сейчас с теоретической стороны, плюс мы можем понаблюдать работу этого объекта с разными настройками.

Наверно чтобы быть дружелюбней к пользователям, были придуманы сокращения для типичных функций переходов, то есть самые часто используемые переходы. powerN - изменение свойства с замедлением, где N от 1 до 4, back - кратковременное превышение значения свойства, elastic - более раннее и крутое превышение значения свойства, bounce (подпрыгивать) - скачкообразное изменение свойства - будто подскакивания упругого мяча под силой тяжести, rough (грубое, неровное) - пилообразное движение (при включенном randomize: true становится ломаной линией ), slow - замедление в середине, steps - ступенеобразное изменение - изменения происходят равномерными скачками, circ - движение по окружности, expo - по экспоненте, sine - траектория синуса.

Также существует три типа, применяемых к переходам - in, inOut и out. in обозначает плавный старт, вход, out соответственно выход. inOut позволяет задать плавность так, чтобы сохранялась симметрия графика перехода относительно центра единичного квадрата.

???? Плейлист: https://www.youtube.com/watch?v=FkqJ-EnKUxM&list=PLOQDek48BpZFzxKS-2sLAeSBB83x-xILB&index=1
???? Станьте спонсором! https://www.youtube.com/channel/UCBLJEWATAm4O1Tp0k76cGFg/join

✔️ GSAP 3.6 №1 Начало работы - https://www.youtube.com/watch?v=FkqJ-EnKUxM
✔️ GSAP 3.6 №2 Меняем свойства JS-объекта - https://www.youtube.com/watch?v=809-Abmk—w
✔️ GSAP 3.6 №3 Ease/Переходы gsap - https://www.youtube.com/watch?v=fc1XGkc2NAw
✔️ GSAP 3.6 №4 Анимируем заголовок h1 - https://www.youtube.com/watch?v=_ysLmK1tovw
✔️ GSAP 3.6 №5 Шатаем stagger - https://www.youtube.com/watch?v=3jpkWSy2kow
✔️ GSAP 3.6 №6 Анимация и события - https://www.youtube.com/watch?v=bQEeTom9U7E
✔️ GSAP 3.6 №7 Timeline - https://www.youtube.com/watch?v=-T76YSPrHFk
✔️ GSAP 3.6 №8 Draggable плагин - https://www.youtube.com/watch?v=V61efiTiZec
✔️ GSAP 3.6 №9 TextPlugin плагин - https://www.youtube.com/watch?v=mOboX4tykuM
✔️ GSAP 3.6 №10 MotionPathPlugin плагин - https://www.youtube.com/watch?v=s114AKJgJg4
✔️ GSAP 3.6 №11 Вспомогательные методы https://www.youtube.com/watch?v=Dbu6xRhL7UU