Параметры анимации: duration, delay, ease

GSAP (GreenSock Animation Platform) предоставляет гибкий и мощный инструмент для создания высокопроизводительных анимаций в браузере. Основными параметрами, определяющими поведение анимации, являются duration, delay и ease. Их правильное использование позволяет контролировать продолжительность, начало и динамику движения объектов.

duration — продолжительность анимации

Параметр duration задаёт время, в течение которого анимация будет выполняться. Значение указывается в секундах и может быть как целым числом, так и дробным.

Пример базовой анимации:

gsap.to(".box", {
  x: 300,
  duration: 2
});

В этом примере элемент с классом .box перемещается на 300 пикселей по оси X за 2 секунды.

Особенности использования:

  • Если duration не указан, по умолчанию принимается значение 0.5 секунд.
  • Для плавных переходов часто используют дробные значения (например, 1.25), чтобы анимация выглядела естественно.
  • Параметр может быть динамическим, вычисляемым в зависимости от состояния страницы или других элементов.

delay — задержка перед запуском

delay определяет время ожидания перед началом анимации. Значение также указывается в секундах.

Пример:

gsap.to(".box", {
  x: 300,
  duration: 2,
  delay: 1
});

Элемент .box начнёт движение через 1 секунду после вызова анимации.

Особенности использования:

  • delay полезен для создания последовательных эффектов при множественных анимациях.
  • Можно комбинировать с таймлайнами (gsap.timeline) для точного управления очередностью.
  • Значение delay может быть отрицательным, что позволяет запускать анимацию раньше её стандартного времени в таймлайне.

ease — динамика движения

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

Пример использования:

gsap.to(".box", {
  x: 300,
  duration: 2,
  ease: "power2.out"
});

Типы easing:

  1. Линейное (linear) Движение происходит равномерно без ускорения или замедления.

    ease: "linear"

  2. С ускорением и замедлением (power1, power2, power3, power4)

    • .in — движение начинается медленно и ускоряется к концу.
    • .out — движение начинается быстро и замедляется к концу.
    • .inOut — сочетает ускорение в начале и замедление в конце.
    ease: "power3.inOut"

  3. Elastic и Bounce Эти функции создают эффекты «упругости» или «отскока», добавляя анимациям динамичность.

    ease: "elastic.out(1, 0.3)"
ease: "bounce.out"

  4. Custom easing Возможна настройка собственных кривых с помощью функций типа CustomEase.create или массива чисел в формате bezier.

Рекомендации по использованию:

  • Для интерфейсных элементов часто используют power1.out или power2.out для плавного завершения движения.
  • Для эффектов появления элементов или сложных сцен применяют elastic или bounce для наглядной динамики.
  • ease можно комбинировать с stagger в массивах анимаций для создания каскадного эффекта.

Комбинирование параметров

Часто все три параметра (duration, delay, ease) используются одновременно, чтобы создать сложные анимации с точным контролем времени и динамики.

Пример комбинированной анимации:

gsap.to(".box", {
  x: 300,
  y: 100,
  rotation: 45,
  duration: 2,
  delay: 0.5,
  ease: "power2.inOut"
});

Эта запись описывает:

  • Перемещение элемента по осям X и Y, а также его поворот.
  • Продолжительность анимации — 2 секунды.
  • Задержка перед стартом — 0.5 секунды.
  • Движение с плавным ускорением в начале и замедлением в конце.

Практические советы

  • Для последовательных анимаций элементов лучше использовать таймлайны, что упрощает работу с delay.
  • Значения duration и ease влияют на восприятие движения — короткая анимация с резким easing будет выглядеть агрессивно, длинная с мягким easing — естественно.
  • Эксперимент с различными ease позволяет создавать уникальные визуальные эффекты без написания сложного кода.

Использование duration, delay и ease — фундамент для управления анимациями в GSAP. Сочетая эти параметры, можно создавать как простые эффекты перемещения, так и сложные интерактивные анимации с высокой степенью контроля над временем и динамикой.

Оглавление