Split-текст

ScrollMagic предоставляет мощные инструменты для создания анимаций при прокрутке страницы, и один из наиболее эффектных приёмов — анимация текста с разделением на отдельные символы или слова, часто называемая split-текстом. Такой подход позволяет создавать динамичные заголовки, интерактивные подписи и визуально привлекательные эффекты появления текста.

Разделение текста на отдельные элементы

Для начала необходимо разделить текст на управляемые DOM-элементы. На практике это можно сделать с помощью чистого JavaScript или специализированных библиотек вроде SplitText из GSAP. Пример ручного разделения текста на символы:

const textElement = document.querySelector('.animated-text');
const textContent = textElement.textContent;
textElement.textContent = '';

textContent.split('').forEach(char => {
  const span = document.createElement('span');
  span.textContent = char;
  span.style.display = 'inline-block';
  textElement.appendChild(span);
});

Ключевой момент: каждый символ помещается в отдельный span, что позволяет управлять его анимацией индивидуально. Для слов можно использовать .split(' ') и оборачивать каждое слово.

Создание сцены ScrollMagic

Для анимации split-текста при прокрутке создаётся сцена ScrollMagic:

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
  triggerElement: '.animated-text', // элемент, с которого начинается анимация
  duration: 300,                     // продолжительность анимации в пикселях прокрутки
  triggerHook: 0.8                   // точка срабатывания анимации (0 — верх, 1 — низ)
});

Особенности настройки:

  • triggerElement — DOM-элемент, который запускает анимацию.
  • duration — длина эффекта, чем больше значение, тем плавнее анимация.
  • triggerHook — регулирует момент срабатывания относительно видимой области окна.

Анимация символов с помощью Tween

Для управления каждым символом применяется библиотека анимаций, чаще всего GSAP:

const chars = document.querySelectorAll('.animated-text span');

const tween = gsap.fromTo(chars,
  { y: 50, opacity: 0 },
  {
    y: 0,
    opacity: 1,
    stagger: 0.05,  // задержка между анимациями символов
    ease: "power2.out"
  }
);

scene.setTween(tween);
scene.addTo(controller);

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

  • y и opacity задают движение и прозрачность символов.
  • stagger позволяет создавать эффект поочерёдного появления.
  • ease отвечает за плавность движения, рекомендуются power1.out, power2.out или back.out для «живой» динамики.

Использование callback-функций для сложной логики

ScrollMagic позволяет добавлять события на жизненный цикл сцены:

scene.on("enter", () => {
  console.log("Сцена активирована — анимация запущена");
});

scene.on("leave", () => {
  console.log("Сцена покинута — можно сбросить стили");
});

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

Комбинирование с параллакс-эффектами

Split-текст отлично сочетается с параллакс-анимацией фона или других элементов. Пример сдвига фона при появлении текста:

gsap.to('.background', {
  y: -100,
  scrollTrigger: {
    trigger: '.animated-text',
    start: "top 80%",
    end: "bottom 20%",
    scrub: true
  }
});

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

  • scrub: true синхронизирует движение фона с прокруткой.
  • Можно комбинировать несколько слоёв текста и элементов для сложной анимации.

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

Для больших текстов важно соблюдать несколько правил:

  1. Минимизировать количество DOM-элементов — разделять текст на слова, если символы слишком мелкие.
  2. Использовать GPU-ускоренные свойства (transform, opacity) вместо top или left.
  3. Удалять или отключать сцены вне области видимости, чтобы не перегружать рендеринг.

Дополнительные эффекты для split-текста

  • Цветовые переходы: через CSS transition или GSAP color/backgroundColor.
  • Повороты и масштабирование: эффект «взлетающего текста» или вращения отдельных символов.
  • Отсрочка анимации слов: комбинировать stagger с несколькими уровнями (chars внутри words) для каскадного эффекта.

Итоговая структура HTML и CSS

<div class="animated-text">Пример split-текста</div>
.animated-text span {
  display: inline-block;
  will-change: transform, opacity;
}

Совет: всегда использовать will-change для элементов, которые анимируются с transform/opacity, чтобы браузер заранее оптимизировал рендеринг.

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

Оглавление