onRepeat и onReverseComplete

GSAP (GreenSock Animation Platform) предоставляет мощные инструменты для анимации элементов в JavaScript. Среди множества событий и коллбеков особое место занимают onRepeat и onReverseComplete. Эти функции позволяют выполнять действия при повторении анимации или при её полном обратном завершении, что открывает широкий спектр возможностей для управления сложными анимационными сценариями.

onRepeat

Коллбек onRepeat вызывается каждый раз, когда анимация повторяется, включая все циклы, заданные с помощью параметра repeat.

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

gsap.to(".box", {
  x: 300,
  duration: 2,
  repeat: 3,
  onRepeat: function() {
    console.log("Анимация повторилась");
  }
});

Ключевые особенности onRepeat:

  • Выполняется после завершения текущего цикла и перед началом следующего.
  • Можно использовать для изменения свойств элементов динамически между повторениями.
  • Работает для любых типов анимаций: to, from, fromTo, а также для таймлайнов (Timeline).

Пример динамического изменения свойств при повторении:

gsap.to(".circle", {
  x: 400,
  duration: 1.5,
  repeat: 4,
  onRepeat: function() {
    this.targets()[0].style.backgroundColor = getRandomColor();
  }
});

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

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

onReverseComplete

Коллбек onReverseComplete срабатывает, когда анимация или таймлайн полностью завершает обратное воспроизведение (reverse).

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

gsap.to(".box", {
  x: 500,
  duration: 2,
  onReverseComplete: function() {
    console.log("Анимация полностью воспроизведена в обратном направлении");
  }
});

// Запуск обратного воспроизведения через 3 секунды
gsap.delayedCall(3, () => gsap.to(".box", {duration: 2, x: 0, onComplete: () => gsap.globalTimeline.reverse()}));

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

  • Вызывается только один раз при полном завершении обратного воспроизведения.
  • Отличается от onComplete, который срабатывает при завершении прямого воспроизведения.
  • Идеально подходит для реализации «закрытия» анимации или возврата к исходному состоянию элементов.

Комбинирование onRepeat и onReverseComplete

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

gsap.to(".box", {
  x: 400,
  duration: 1,
  repeat: 3,
  yoyo: true,
  onRepeat: function() {
    console.log("Повтор цикла:", this.repeat());
  },
  onReverseComplete: function() {
    console.log("Обратное воспроизведение завершено");
  }
});

Пояснение:

  • repeat с yoyo: true создаёт эффект «туда-сюда».
  • onRepeat срабатывает каждый раз при смене направления.
  • onReverseComplete срабатывает один раз, когда анимация возвращается в исходное состояние после последнего цикла.

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

  • Использовать onRepeat для добавления интерактивности и разнообразия в цикличные анимации.
  • onReverseComplete особенно полезен для анимаций модальных окон, меню и эффектов возврата элементов на стартовую позицию.
  • При работе с таймлайнами (Timeline) коллбеки могут быть назначены как на весь таймлайн, так и на отдельные анимации внутри него.
  • Для сложных анимационных схем комбинируйте коллбеки с параметрами yoyo, repeat и динамическими свойствами, чтобы создавать визуально насыщенные эффекты.

Хотите, я сразу покажу полный пример таймлайна с несколькими элементами, где onRepeat и onReverseComplete используются вместе для интерактивной анимации?

Оглавление