Scale и fade эффекты

GSAP (GreenSock Animation Platform) предоставляет мощный инструмент для создания динамических анимаций в веб-приложениях. Основными эффектами при работе с визуальными элементами являются масштабирование (scale) и изменение прозрачности (fade). В GSAP эти эффекты реализуются с использованием свойств scale, scaleX, scaleY и opacity.

Свойство scale

Свойство scale управляет размером элемента относительно его исходного состояния. Значение 1 соответствует исходному размеру, 0.5 уменьшает элемент в два раза, а 2 увеличивает его в два раза.

Пример анимации изменения масштаба:

gsap.to(".box", {
  duration: 2,
  scale: 1.5,
  ease: "power2.inOut"
});

Ключевые моменты:

  • duration задаёт длительность анимации в секундах.
  • ease управляет плавностью изменения, power2.inOut обеспечивает естественное ускорение и замедление.
  • Масштаб применяется относительно центра элемента. Если нужно изменить точку масштабирования, используется свойство transformOrigin:
gsap.to(".box", {
  duration: 2,
  scale: 1.5,
  transformOrigin: "top left"
});

Масштаб по осям X и Y

Иногда требуется изменить размер только по одной оси. Для этого используются scaleX и scaleY.

gsap.to(".box", {
  duration: 1.5,
  scaleX: 2,
  scaleY: 0.5,
  ease: "elastic.out(1, 0.3)"
});

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

  • scaleX и scaleY можно комбинировать с scale, при этом индивидуальные оси имеют приоритет.
  • Эластичные эффекты (elastic) создают ощущение упругости и динамики.

Эффекты прозрачности (fade)

Свойство opacity управляет прозрачностью элемента. Значение 0 полностью скрывает элемент, 1 делает его полностью видимым.

Простая анимация появления:

gsap.to(".box", {
  duration: 1,
  opacity: 1
});

Исчезновение элемента:

gsap.to(".box", {
  duration: 1,
  opacity: 0
});

Особенности работы с fade:

  • Часто комбинируется с масштабированием для создания эффекта “всплывающего” или “исчезающего” объекта.
  • Свойство autoAlpha полезно для одновременного управления прозрачностью и видимостью элемента:
gsap.to(".box", {
  duration: 1,
  autoAlpha: 0
});

autoAlpha устанавливает opacity и автоматически скрывает элемент (display: none) при достижении нуля, что предотвращает кликабельность невидимого объекта.

Комбинированные эффекты: scale + fade

Часто анимации выглядят более органично при сочетании масштабирования и изменения прозрачности. Пример анимации всплытия:

gsap.from(".box", {
  duration: 1,
  scale: 0,
  opacity: 0,
  ease: "back.out(1.7)"
});

Пояснения:

  • gsap.from() задаёт начальные значения, от которых анимация “вырастает” до текущего состояния элемента.
  • Использование back.out создаёт эффект небольшого отскока при появлении.

Цепочка анимаций (timeline)

GSAP позволяет объединять несколько анимаций в Timeline, что упрощает последовательное управление масштабом и прозрачностью.

const tl = gsap.timeline();

tl.to(".box", { duration: 0.5, scale: 1.2, ease: "power1.out" })
  .to(".box", { duration: 0.5, scale: 1, opacity: 0.5, ease: "power1.inOut" })
  .to(".box", { duration: 0.5, opacity: 1 });

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

  • Синхронизация нескольких анимаций без коллизий.
  • Легко повторять или реверсировать анимацию.
  • Позволяет комбинировать эффекты масштабирования, прозрачности и других трансформаций.

Дополнительные приёмы

  • Параметры задержки (delay) позволяют управлять временем старта анимации.
  • Повторение (repeat) и йо-йо эффект (yoyo) создают циклические анимации:
gsap.to(".box", {
  duration: 1,
  scale: 1.3,
  opacity: 0.5,
  repeat: -1,
  yoyo: true,
  ease: "power1.inOut"
});
  • События анимации (onComplete, onStart) дают контроль над логикой после завершения или старта эффекта.

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

Масштабирование и эффекты прозрачности — фундаментальные инструменты GSAP, которые при грамотном сочетании дают полный контроль над динамикой элементов на странице.

Оглавление