Параметры: smooth и effects

GSAP (GreenSock Animation Platform) предоставляет богатый набор инструментов для анимации элементов на веб-странице. Среди множества возможностей особое внимание заслуживают параметры smooth и effects, которые позволяют создавать более плавные и визуально выразительные анимации.

Параметр smooth

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

Синтаксис:

gsap.to(element, {
  x: 500,
  duration: 2,
  smooth: 0.5
});
  • Значение smooth задается числом от 0 до 1 (иногда допускается превышение 1 для усиленного эффекта).
  • 0 — движение строго соответствует ключевым кадрам анимации, без сглаживания.
  • 1 — максимальное сглаживание, создающее эффект “инерции”.

Применение в практике:

  • Анимация скролла: при прокрутке длинного контента параметр smooth делает переход более естественным.
  • Плавное движение объектов по траектории: особенно полезно для анимации SVG-элементов или сложных сцен с несколькими объектами.

Пример с анимацией прокрутки:

gsap.to(window, {
  scrollTo: { y: "#section2" },
  duration: 1.5,
  smooth: 0.7
});

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

Параметр effects

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

Примеры встроенных эффектов:

  • fade — плавное появление или исчезновение элемента.
  • slide — движение объекта с указанного направления.
  • bounce — эффект подпрыгивания при завершении анимации.

Синтаксис использования:

gsap.to(element, {
  duration: 1,
  effects: "fade",
  opacity: 1
});
  • effects принимает как строку с названием эффекта, так и массив эффектов для комбинирования.
  • Комбинирование эффектов:
gsap.to(element, {
  duration: 1.5,
  effects: ["fade", "bounce"],
  opacity: 1,
  y: -50
});

В данном примере элемент одновременно проявляется и подпрыгивает вверх, создавая динамичное впечатление движения.

Создание пользовательских эффектов:

GSAP позволяет создавать свои эффекты через gsap.registerEffect:

gsap.registerEffect({
  name: "spinFade",
  effect: (targets, config) => {
    return gsap.to(targets, {
      rotation: 360,
      opacity: 0,
      duration: config.duration
    });
  },
  defaults: { duration: 2 },
  extendTimeline: true
});

gsap.effects.spinFade(".box", { duration: 3 });
  • name — название эффекта для последующего вызова.
  • effect — функция, возвращающая анимацию.
  • defaults — значения по умолчанию для параметров анимации.
  • extendTimeline — позволяет интегрировать эффект в последовательность timeline.

Совмещение smooth и effects

Использование этих параметров вместе позволяет создавать высокоэффективные, плавные и выразительные анимации:

gsap.to(".circle", {
  x: 400,
  duration: 2,
  smooth: 0.6,
  effects: ["fade", "bounce"]
});

В этом примере объект одновременно движется с плавным ускорением, проявляется и подпрыгивает, создавая эффект “живого” движения.

Особенности комбинирования:

  • Параметр smooth влияет на любую анимацию, включая эффектные трансформации.
  • При высоких значениях smooth анимации с эффектами типа bounce могут выглядеть более мягкими и органичными.
  • Эффекты можно комбинировать, но необходимо учитывать физическую логику движения, чтобы не создавать диссонанс в восприятии анимации.
Оглавление