onStart, onUpdate, onComplete

GSAP (GreenSock Animation Platform) предоставляет мощный механизм управления анимацией с помощью колбэков, которые позволяют отслеживать жизненный цикл анимации и выполнять дополнительные действия в нужные моменты. Основными событиями являются onStart, onUpdate и onComplete. Эти обработчики позволяют интегрировать анимацию с логикой приложения, синхронизировать эффекты и управлять поведением элементов на странице.

onStart

onStart — это колбэк, который вызывается один раз в момент начала анимации. Он полезен для инициализации состояний или запуска внешних процессов параллельно с анимацией.

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

gsap.to(".box", {
  x: 300,
  duration: 2,
  onStart: () => {
    console.log("Анимация началась");
    document.querySelector(".box").style.border = "2px solid red";
  }
});

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

  • Вызывается только один раз, даже если анимация была приостановлена и продолжена.
  • Может быть использован для добавления визуальных эффектов до перемещения объекта, например, подсветки элемента.
  • Работает с любой анимацией GSAP: to, from, fromTo, timeline.

onUpdate

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

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

gsap.to(".circle", {
  x: 500,
  duration: 4,
  onUpdate: function() {
    const progress = this.progress();
    document.querySelector(".progress").textContent = `Прогресс: ${(progress * 100).toFixed(0)}%`;
  }
});

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

  • Колбэк вызывается каждую анимационную кадру (каждый tick анимации).
  • Можно получить текущий прогресс анимации через this.progress().
  • Используется для создания динамических визуальных эффектов: изменение цвета, размера, прозрачности или даже взаимодействия с другими библиотеками.
  • Может значительно нагрузить браузер при слишком частом обновлении сложных операций, поэтому следует избегать тяжелых вычислений внутри onUpdate.

onComplete

onComplete срабатывает один раз в момент завершения анимации. Это основной инструмент для запуска действий после завершения перехода.

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

gsap.to(".text", {
  y: 200,
  duration: 3,
  onComplete: () => {
    console.log("Анимация завершена");
    alert("Движение текста завершено!");
  }
});

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

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

Передача контекста в колбэках

Колбэки GSAP вызываются с контекстом анимации, что позволяет использовать this для получения информации о текущей анимации:

gsap.to(".square", {
  x: 400,
  duration: 2,
  onUpdate: function() {
    console.log(`Текущая позиция X: ${this.targets()[0].offsetLeft}`);
  },
  onComplete: function() {
    console.log(`Анимация для элемента завершена`);
  }
});

Методы и свойства контекста:

  • this.targets() — массив элементов, к которым применяется анимация.
  • this.progress() — текущий прогресс анимации (0–1).
  • this.time() — текущее время анимации.
  • this.duration() — длительность анимации.

Использование в таймлайнах

Колбэки могут применяться и внутри Timeline:

const tl = gsap.timeline({
  onStart: () => console.log("Таймлайн стартовал"),
  onUpdate: () => console.log("Таймлайн обновляется"),
  onComplete: () => console.log("Таймлайн завершен")
});

tl.to(".box", {x: 100, duration: 1})
  .to(".circle", {y: 200, duration: 1});

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

  • Таймлайн вызывает свои колбэки один раз, независимо от отдельных анимаций внутри.
  • Можно комбинировать колбэки таймлайна и анимаций для сложных последовательностей событий.

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

  • Использовать onStart для подготовки элементов перед движением.
  • onUpdate — для динамической синхронизации эффектов и визуальных индикаторов прогресса.
  • onComplete — для запуска последующих действий, чистки или запуска новых анимаций.
  • Избегать тяжелых операций в onUpdate для поддержания плавности анимации.
  • Всегда проверять контекст (this) для получения актуальной информации о текущей анимации.

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

Оглавление