Автоматическая очистка анимаций

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

Основы автоматической очистки

При создании анимации через методы gsap.to(), gsap.from(), gsap.fromTo() или gsap.timeline() объекты анимации возвращают инстансы Tween или Timeline. Эти объекты содержат ссылки на DOM-элементы, свойства и внутренние таймеры. Если не очищать их вручную или не использовать встроенные механизмы GSAP, накопление этих ссылок может привести к:

  • Утечкам памяти
  • Конфликтам анимаций, когда старые твинны продолжают влиять на элементы
  • Непредсказуемому поведению при повторных анимациях

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

kill() и killTweensOf()

Метод kill() полностью уничтожает объект анимации:

let tween = gsap.to(".box", { x: 500, duration: 2 });
tween.kill(); // анимация прерывается и все ссылки удаляются

Метод gsap.killTweensOf(target) позволяет уничтожить все твины, связанные с конкретным элементом:

gsap.killTweensOf(".box"); // убирает все анимации элемента .box

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

autoKill для ScrollTrigger и других плагинов

Плагин ScrollTrigger поддерживает автоматическую очистку через опцию autoKill:

gsap.to(".section", {
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true,
    autoKill: true
  },
  x: 400
});

autoKill: true позволяет автоматически остановить и удалить анимацию, если элемент выходит за пределы видимой области или ScrollTrigger уничтожается.

Удаление событий и колбэков

GSAP позволяет добавлять колбэки через onComplete, onUpdate, onStart и другие. Если объект анимации не уничтожен, эти функции продолжают оставаться в памяти. Для предотвращения утечек:

let tween = gsap.to(".circle", {
  x: 300,
  duration: 3,
  onComplete: () => console.log("Анимация завершена")
});

tween.kill(); // колбэк onComplete больше не будет вызван

Аналогично, для timeline:

let tl = gsap.timeline();
tl.to(".box", { x: 100 });
tl.to(".circle", { y: 200 });

tl.kill(); // все твины внутри timeline очищаются

Timeline и управление внутренними твинами

Timeline — это контейнер для нескольких твинов, который также поддерживает автоматическую очистку:

  • tl.clear() — удаляет все твины из timeline, но timeline остаётся активным
  • tl.kill() — полностью уничтожает timeline и все его твины
let tl = gsap.timeline();
tl.to(".box", { x: 100 });
tl.to(".circle", { y: 200 });

tl.clear(); // очищает все твины
tl.kill();  // уничтожает timeline полностью

Использование clear() удобно при динамическом изменении последовательности анимаций, тогда как kill() применимо при окончательном завершении работы с анимацией.

Автоматическая очистка при удалении элементов

GSAP автоматически удаляет твины, если элемент удаляется из DOM при использовании autoRemoveChildren в timeline:

let tl = gsap.timeline({ autoRemoveChildren: true });
tl.to(".box", { x: 200 });
document.querySelector(".box").remove(); // GSAP автоматически убирает твины

Это предотвращает возникновение “висящих” твинов, которые ссылаются на несуществующие элементы.

Практические рекомендации

  1. Использовать kill() при динамическом удалении элементов — особенно важно для SPA-приложений, где DOM часто обновляется.
  2. Очистка timeline с помощью clear() перед перезапуском последовательности — предотвращает дублирование анимаций.
  3. Следить за колбэками — при массовом создании твинов использовать kill() или killTweensOf() для удаления всех функций.
  4. Использовать встроенные опции плагинов (autoKill, autoRemoveChildren) для минимизации ручного управления.

Автоматическая очистка анимаций в GSAP — это инструмент, который поддерживает производительность и стабильность приложения, снижая риск утечек памяти и конфликтов между твинами. Правильное использование методов уничтожения объектов анимации делает код более безопасным и предсказуемым при масштабировании проектов.

Оглавление