Data-атрибуты: data-speed и data-lag

GSAP (GreenSock Animation Platform) предоставляет широкие возможности для создания сложной анимации в браузере, и использование data-атрибутов позволяет управлять поведением отдельных элементов без необходимости писать отдельные скрипты для каждого из них. Особенно полезны атрибуты data-speed и data-lag, которые дают возможность задавать динамическую скорость и задержку анимации прямо в HTML.

Атрибут data-speed

Атрибут data-speed определяет скорость анимации конкретного элемента относительно стандартной длительности. Значение указывается в виде числа, где 1 соответствует базовой скорости анимации, меньшее значение замедляет анимацию, а большее — ускоряет.

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

<div class="box" data-speed="0.5"></div>
<div class="box" data-speed="2"></div>

В JavaScript можно считывать значение атрибута и использовать его для настройки анимации:

gsap.utils.toArray(".box").forEach(box => {
  const speed = parseFloat(box.dataset.speed) || 1;
  gsap.to(box, {
    x: 300,
    duration: 2 / speed, // делим базовую длительность на скорость
    ease: "power1.inOut"
  });
});

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

Атрибут data-lag

Атрибут data-lag задает задержку запуска анимации для конкретного элемента. Значение указывается в секундах или десятичной части секунды.

Пример HTML-разметки:

<div class="item" data-lag="0.1"></div>
<div class="item" data-lag="0.5"></div>
<div class="item" data-lag="1"></div>

Пример применения в GSAP:

gsap.utils.toArray(".item").forEach(item => {
  const lag = parseFloat(item.dataset.lag) || 0;
  gsap.from(item, {
    y: 50,
    opacity: 0,
    duration: 1,
    delay: lag,
    ease: "power2.out"
  });
});

Использование data-lag особенно эффективно для стековых анимаций или при последовательной анимации нескольких элементов.

Комбинированное использование data-speed и data-lag

На практике оба атрибута часто используются вместе, чтобы создать индивидуальные и синхронизированные эффекты:

<div class="card" data-speed="1.5" data-lag="0.2"></div>
<div class="card" data-speed="0.8" data-lag="0.4"></div>
<div class="card" data-speed="1" data-lag="0.6"></div>
gsap.utils.toArray(".card").forEach(card => {
  const speed = parseFloat(card.dataset.speed) || 1;
  const lag = parseFloat(card.dataset.lag) || 0;

  gsap.from(card, {
    y: 100,
    opacity: 0,
    duration: 2 / speed,
    delay: lag,
    ease: "power3.out"
  });
});

Особенности и советы по использованию:

  • Значения data-speed и data-lag могут быть дробными (например, 0.3 или 1.25) для тонкой настройки анимации.
  • Атрибуты позволяют создавать шаблонные анимации, которые легко масштабируются при добавлении новых элементов.
  • При использовании в больших списках элементов комбинация этих атрибутов обеспечивает органическую и плавную анимацию, избегая эффекта “одинаковых движений”.
  • Значение по умолчанию следует задавать в JS (например, || 1 для data-speed), чтобы избежать ошибок при отсутствии атрибута.

Практический пример: параллакс-эффект с разной скоростью

<div class="layer" data-speed="0.5"></div>
<div class="layer" data-speed="1.2"></div>
<div class="layer" data-speed="0.8"></div>
window.addEventListener("scroll", () => {
  const scrollTop = window.scrollY;

  gsap.utils.toArray(".layer").forEach(layer => {
    const speed = parseFloat(layer.dataset.speed) || 1;
    gsap.to(layer, { y: scrollTop * speed, ease: "none", overwrite: "auto" });
  });
});

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

Использование data-speed и data-lag в сочетании с GSAP обеспечивает гибкость, масштабируемость и читаемость кода, делая анимацию более управляемой и визуально привлекательной.

Оглавление