revert() для возврата исходного состояния

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

Основные возможности revert()

  • Полный возврат к исходному состоянию: revert() отменяет все изменения, внесённые через GSAP, включая трансформации, стили и временные свойства.
  • Совместимость с Timeline: Можно применять как к отдельным анимациям, так и к целым временным линиям.
  • Поддержка цепочек: Метод можно использовать в цепочках методов GSAP, что упрощает организацию кода и управление состояниями.

Синтаксис

gsap.to(".box", {
  x: 300,
  rotation: 45,
  duration: 2,
  onComplete: () => gsap.revert(".box")
});
  • Цель анимации (target): селектор, DOM-элемент или массив элементов.
  • Опции: duration, ease, delay и другие стандартные параметры анимации.
  • Вызов revert(): может быть выполнен после завершения анимации или по событию.

Работа с временными линиями (Timeline)

revert() полностью интегрируется с gsap.timeline(), позволяя возвращать элементы к исходному состоянию после выполнения сложной последовательности анимаций.

const tl = gsap.timeline();

tl.to(".circle", { x: 200, scale: 1.5, duration: 1 })
  .to(".circle", { rotation: 90, duration: 1 })
  .add(() => gsap.revert(".circle"), "+=0.5");

В этом примере после выполнения всех анимаций объект .circle возвращается к исходным значениям всех CSS-свойств, которые были изменены через GSAP.

Сохранение исходного состояния

GSAP автоматически отслеживает исходные значения свойств элемента. При вызове revert() библиотека возвращает именно те значения, которые были до запуска анимации. Это отличается от методов set() или ручной установки стилей, так как:

  • Не требуется хранить исходные CSS-свойства в отдельной переменной.
  • Отмена анимации корректно работает даже при сложных последовательностях и множественных трансформациях.
gsap.to(".text", { x: 100, y: 50, scale: 2, duration: 1 });
gsap.revert(".text"); // возвращает x, y, scale к исходным значениям

revert() для интерактивных эффектов

Метод revert() идеально подходит для интерактивных интерфейсов:

  • Hover-эффекты: временная анимация при наведении и возврат к исходному состоянию при уходе курсора.
  • Модальные окна: анимация появления и скрытия с гарантией возврата исходного состояния.
  • Динамическое управление контентом: при смене состояния элементов на странице можно откатить временные стили.

Пример hover-эффекта:

const box = document.querySelector(".box");

box.addEventListener("mouseenter", () => {
  gsap.to(box, { scale: 1.2, rotation: 10, duration: 0.3 });
});

box.addEventListener("mouseleave", () => {
  gsap.revert(box);
});

Особенности и ограничения

  • revert() возвращает элемент только к состоянию, зафиксированному GSAP. Если CSS изменялся напрямую через style или сторонние библиотеки, revert() эти изменения не отменяет.
  • Метод полезен для временных эффектов, но для постоянных изменений требуется использование set() или стандартного CSS.
  • Можно комбинировать с from() и fromTo() анимациями для создания обратимых переходов.

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

  • Использовать revert() после сложных временных линий для быстрого сброса всех анимаций.
  • Для интерактивных интерфейсов обернуть вызов revert() в функции-обработчики событий.
  • Сохранять согласованность стилей: если исходные значения анимаций динамически меняются через JS, убедиться, что revert() вызывается после фиксации нового состояния.

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

const boxes = document.querySelectorAll(".box");

boxes.forEach(box => {
  box.addEventListener("mouseenter", () => {
    gsap.to(box, { x: 50, y: 50, rotation: 15, scale: 1.3, duration: 0.4 });
  });
  
  box.addEventListener("mouseleave", () => {
    gsap.revert(box);
  });
});

const tl = gsap.timeline({ repeat: 1, yoyo: true });
tl.to(".circle", { x: 100, duration: 1 })
  .to(".circle", { rotation: 180, duration: 1 })
  .add(() => gsap.revert(".circle"));

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

Метод revert() является мощным инструментом GSAP для контроля состояния элементов, позволяя создавать временные и обратимые анимации без ручного отслеживания начальных значений CSS.

Оглавление