Типы easing: ease, power, back, elastic, bounce

GSAP предоставляет гибкую систему easing, которая определяет, как изменяются значения анимируемых свойств во времени. Easing отвечает за плавность движения объектов, создавая эффекты ускорения, замедления, отскока или растягивания, что делает анимации более естественными и динамичными.

ease

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

  • Power0.easeNone — линейная анимация без ускорения, движение равномерное.
  • Power1.easeIn / easeOut / easeInOut — легкое ускорение в начале (easeIn), замедление в конце (easeOut) или комбинированное (easeInOut).
  • Power2, Power3, Power4 — усиленные версии, создающие более выраженное ускорение и замедление. Чем выше число, тем сильнее эффект.
gsap.to(".box", {duration: 2, x: 300, ease: "power2.inOut"});

Ключевой момент: Power easing применим к большинству анимаций и обеспечивает естественное движение объектов.

back

back добавляет эффект “отскока назад” перед движением к цели, создавая ощущение натяжения и пружинного старта. Основные параметры:

  • overshoot — величина выхода за конечную точку перед возвращением. По умолчанию около 1.70158.
  • easeIn / easeOut / easeInOut — задают направление эффекта: начало, конец или оба.
gsap.to(".box", {duration: 1.5, x: 300, ease: "back.out(2.5)"});

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

elastic

elastic создает эффект резины: объект колеблется вокруг конечного положения, постепенно замедляясь. Параметры:

  • amplitude (амплитуда) — величина колебаний.
  • period (период) — время одного цикла колебаний.
  • easeIn / easeOut / easeInOut — аналогично другим easing.
gsap.to(".ball", {duration: 2, y: 200, ease: "elastic.out(1, 0.3)"});

Особенности:

  • Высокая амплитуда создаёт драматический «подпрыгивающий» эффект.
  • Elastic идеально подходит для анимаций, имитирующих пружины или упругие материалы.

bounce

bounce имитирует физический отскок объекта от поверхности. Поведение зависит от типа easing:

  • easeIn — объект сначала «тонет» в направлении движения, потом отскакивает.
  • easeOut — объект падает и отскакивает к конечной позиции.
  • easeInOut — сочетает вход и выход с отскоком.
gsap.to(".ball", {duration: 2, y: 300, ease: "bounce.out"});

Характерные особенности:

  • Количество и высота отскоков настраиваются через амплитуду.
  • Отлично подходит для имитации гравитации и взаимодействия с поверхностями.

Сравнительная таблица

Easing Основной эффект Применение
ease / power Плавное ускорение/замедление Универсальные движения
back Отскок назад перед движением Выстрелы, броски, динамичные старты
elastic Колебания вокруг цели Пружинные эффекты, упругие объекты
bounce Отскок от поверхности Имитация падения и гравитации

Практические рекомендации

  • Для универсальных интерфейсных анимаций чаще всего подходят Power easing (power1–power4).
  • Для ярких динамичных эффектов применяют back и elastic.
  • Для имитации физики или падений — bounce.
  • Комбинирование easing внутри Timeline позволяет создавать сложные цепочки анимаций с реалистичной физикой движения.

Настройка параметров easing

Многие easing позволяют точную настройку через параметры:

  • back.out(2) — увеличивает overshoot.
  • elastic.out(1, 0.5) — регулирует амплитуду и период.
  • Использование кастомных функций easing (CustomEase.create) позволяет создавать уникальные кривые движения для любых объектов.

Эти типы easing формируют базу анимационных движений в GSAP. Их комбинация и точная настройка создают визуально выразительные и естественные анимации в любых веб-проектах.

Оглавление