Анимация изменений layout

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

Работа с позиционированием

Позиция элемента определяется его свойствами CSS top, left, right, bottom и трансформациями x, y. GSAP рекомендует использовать x и y для анимации позиции, так как это обеспечивает аппаратное ускорение и уменьшает нагрузку на перерисовку браузера:

gsap.to(".box", {
  x: 200,
  y: 100,
  duration: 1.5,
  ease: "power2.out"
});
  • x и y изменяют позицию относительно исходного местоположения через CSS transform: translate().
  • ease задаёт кривую ускорения, делая движение более естественным.

Отличие от left и top: прямое изменение этих свойств вызывает перерасчёт layout (reflow), что может быть дорогостоящим при сложных интерфейсах.

Анимация размеров

Для изменения размеров элементов (width, height) применяется GSAP напрямую через свойства объекта:

gsap.to(".panel", {
  width: "400px",
  height: "200px",
  duration: 1,
  ease: "power1.inOut"
});

Особенности анимации размеров:

  • Анимация через width и height может вызвать перерасчёт layout, поэтому для сложных интерфейсов часто используется масштабирование (scaleX, scaleY):
gsap.to(".panel", {
  scaleX: 1.5,
  scaleY: 1.2,
  duration: 1,
  transformOrigin: "top left"
});
  • Свойство transformOrigin определяет точку, относительно которой происходит масштабирование. Это позволяет создавать эффект расширения или сжатия элемента без смещения других компонентов.

Плавные изменения отступов и маргинов

GSAP позволяет анимировать внутренние и внешние отступы, что важно при динамическом изменении layout:

gsap.to(".item", {
  marginTop: "50px",
  paddingLeft: "20px",
  duration: 1.2,
  ease: "power2.inOut"
});
  • Изменение отступов также влияет на перерасчёт layout, поэтому следует комбинировать с анимацией через x и y для плавности.
  • Для списков элементов можно использовать stagger, чтобы анимация элементов происходила последовательно:
gsap.to(".item", {
  y: 50,
  duration: 0.8,
  stagger: 0.2,
  ease: "power2.out"
});

Использование flip для сложных изменений layout

GSAP предоставляет модуль Flip для анимации изменений позиции элементов при перестройке DOM. Это особенно полезно при сортировке списков или динамическом изменении сетки:

import { Flip } from "gsap/Flip";
gsap.registerPlugin(Flip);

const state = Flip.getState(".card");

document.querySelector(".container").appendChild(document.querySelector(".card:last-child"));

Flip.from(state, {
  duration: 1,
  ease: "power1.inOut",
  absolute: true
});

Принцип работы:

  1. Сохраняется текущее состояние элементов (Flip.getState()).
  2. Изменяется DOM, например, переставляются карточки.
  3. GSAP анимирует переход из старого состояния в новое с плавной трансформацией позиции и размера.

Преимущества метода Flip:

  • Автоматическая оптимизация transform и layout.
  • Поддержка сложных переходов без ручного расчёта координат.
  • Высокая производительность при работе с большим количеством элементов.

Контроль порядка анимаций и timeline

Для сложных изменений layout используется gsap.timeline, позволяющий координировать несколько анимаций:

const tl = gsap.timeline({ defaults: { duration: 1, ease: "power2.out" } });

tl.to(".box1", { x: 100 })
  .to(".box2", { x: 200 }, "<0.5") // старт через 0.5 секунды после предыдущей анимации
  .to(".box3", { y: 50 }, "-=0.3"); // частичное наложение анимаций
  • Использование timeline позволяет синхронизировать движения нескольких элементов, создавая координированные эффекты изменений layout.
  • Стрелочные обозначения ("<0.5", "-=0.3") задают смещение начала анимации относительно предыдущей, что упрощает управление сложными переходами.

Анимация flex и grid

Изменения layout в flex и grid часто требуют анимации позиции и порядка элементов, так как прямое изменение left/top не применяется:

gsap.utils.toArray(".grid-item").forEach((el, i) => {
  gsap.to(el, {
    x: i * 120,
    y: Math.floor(i / 3) * 120,
    duration: 0.8,
    ease: "power2.inOut"
  });
});
  • Для сеток рекомендуется предварительно вычислять новые позиции и анимировать элементы через x и y.
  • Модуль Flip идеально подходит для анимации перестановки элементов в grid.

Производительность и оптимизация

Для плавной анимации layout важно:

  • Использовать x, y, scaleX, scaleY вместо прямого изменения left, top, width, height.
  • Минимизировать одновременные анимации большого количества элементов.
  • Применять stagger для последовательного движения, снижая нагрузку на браузер.
  • Использовать Flip при динамических изменениях DOM для автоматического расчёта трансформаций.
Оглавление