Разбиение текста на символы, слова и строки

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

Основные принципы работы

GSAP работает с элементами HTML, предоставляя методы для управления свойствами через gsap.to(), gsap.from(), gsap.fromTo() и gsap.timeline(). Для анимации текста с разбиением необходимо сначала преобразовать текст в отдельные элементы, которые будут анимироваться индивидуально.

Для этого используется плагин SplitText. Он позволяет автоматически разбивать текст на:

  • символы (characters) – каждая буква или знак становится отдельным элементом;
  • слова (words) – каждое слово помещается в отдельный элемент;
  • строки (lines) – каждая строка текста становится отдельным контейнером.

Подключение SplitText

SplitText является платным плагином от GreenSock, однако он критически важен для сложных текстовых анимаций. Подключение осуществляется через скрипт в HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/SplitText.min.js"></script>

После подключения создаётся объект SplitText для выбранного DOM-элемента:

const mySplitText = new SplitText(".text-element", { type: "words,chars,lines" });

Параметр type определяет способ разбиения. Можно комбинировать words, chars и lines в одной строке, чтобы получить более гибкий контроль.

Разбиение на символы

Разбиение на символы (chars) используется, когда требуется точная анимация каждой буквы. Это особенно полезно для эффекта “печатающейся строки” или динамичного появления текста. Пример:

gsap.from(".text-element .char", {
  duration: 0.8,
  opacity: 0,
  y: 50,
  stagger: 0.05,
  ease: "back.out(1.7)"
});

Ключевые моменты:

  • .char – класс, автоматически присвоенный каждому символу SplitText;
  • stagger – задержка между анимациями символов;
  • ease – сглаживание движения, создающее более естественный эффект.

Разбиение на слова

Разбиение на слова (words) позволяет анимировать текст целыми блоками, а не по буквам, что подходит для эффектов “выцветания” или “масштабирования” отдельных слов. Пример:

gsap.from(".text-element .word", {
  duration: 1,
  scale: 0,
  opacity: 0,
  stagger: 0.2,
  ease: "power2.out"
});

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

  • Анимация может применяться к свойствам scale, rotation, x/y с высокой наглядностью;
  • Можно комбинировать с анимацией символов для сложных последовательностей.

Разбиение на строки

Разбиение на строки (lines) полезно при анимации больших абзацев или текстовых блоков с несколькими строками. Каждая строка становится отдельным контейнером <div> или <span>, что позволяет управлять вертикальными сдвигами и эффектами появления текста по строкам:

gsap.from(".text-element .line", {
  duration: 1,
  y: 100,
  opacity: 0,
  stagger: 0.3,
  ease: "power3.out"
});

Применение строк особенно важно для:

  • Эффекта “слайд-ин” текста сверху вниз;
  • Создания последовательных анимаций блоков;
  • Контроля межстрочных задержек при параллакс-эффектах.

Создание сложных комбинаций

GSAP позволяет комбинировать разбиение по разным уровням, например, строки → слова → символы, и анимировать их в единой последовательности через Timeline:

const tl = gsap.timeline();

tl.from(".text-element .line", { y: 50, opacity: 0, stagger: 0.3, duration: 0.8 })
  .from(".text-element .word", { scale: 0, opacity: 0, stagger: 0.1, duration: 0.5 }, "-=0.5")
  .from(".text-element .char", { rotationX: 90, opacity: 0, stagger: 0.02, duration: 0.3 }, "-=0.4");
  • Первый шаг анимирует строки с задержкой;
  • Второй шаг накладывает анимацию на слова, создавая плавное перекрытие;
  • Третий шаг прорабатывает отдельные символы для финального эффекта.

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

  1. Использовать stagger для создания органичного движения: дробление по времени предотвращает ощущение “резкости” анимации.
  2. Комбинировать ease для разных уровней: строки могут двигаться плавно (power3.out), слова — более резко (back.out), символы — с пружинистым эффектом.
  3. Оптимизация DOM: при больших текстах большое количество символов может замедлить рендер. Использовать разбивку только там, где требуется детальная анимация.
  4. Адаптивность: при изменении ширины контейнера линии могут меняться. SplitText поддерживает метод revert() для восстановления исходного текста:
mySplitText.revert();
  1. Комбинирование с ScrollTrigger: анимацию можно запускать при прокрутке страницы, создавая эффект “выплывающего текста”:
gsap.from(".text-element .char", {
  scrollTrigger: ".text-element",
  y: 50,
  opacity: 0,
  stagger: 0.05
});

Итоговое понимание

Разбиение текста на символы, слова и строки в GSAP предоставляет точный контроль над визуальными эффектами. С помощью SplitText и gsap.timeline() можно создавать сложные, многослойные анимации текста, сочетающие плавность и драматизм, что делает веб-интерфейсы более живыми и динамичными.

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

Оглавление