GSAP SplitText: анимация текста по буквам и словам

После этого эти новые элементы становятся полноценными объектами для анимации с помощью GSAP. Ключевая мощь SplitText заключается в его простоте и универсальности. Всего одной строкой кода вы получаете полный контроль над каждым фрагментом текста.

Три типа разделения текста

Плагин предлагает три фундаментальных типа разделения, которые можно комбинировать:

1. chars (символы): разделяет текст на отдельные буквы, цифры, знаки препинания. Идеально для эффектов появления по буквам, «рассыпания» шрифта, волновой анимации.
2. words (слова): разделяет текст на слова, используя пробелы как разделители. Отлично подходит для анимации целыми словами, например, последовательного появления строк в параллакс-секциях.
3. lines (строки): самый интеллектуальный тип. Разделяет текст не по формальным признакам, а визуально, на основе текущей ширины контейнера и вычисленного расположения текста. Незаменим для анимации многострочных блоков, где каждая строка должна вести себя как единое целое.

Давайте рассмотрим простейший пример. Предположим, у нас есть заголовок на странице, и мы хотим подготовить его к анимации по словам и буквам одновременно.

<h1 class="main-heading">Привет, цифровой мир!</h1>

gsap.registerPlugin(SplitText);
// Инициализируем новый экземпляр SplitText для нашего заголовка
let headingElement = document.querySelector('.main-heading');
let textSplitInstance = new SplitText(headingElement, {
    type: "chars, words", // Разделяем и на символы, и на слова
    charsClass: "char-element", // Кастомный класс для символов
    wordsClass: "word-element"  // Кастомный класс для слов
});

// Теперь можно анимировать, например, символы
gsap.from(textSplitInstance.chars, {
    duration: 0.2,
    opacity: 0,
    y: -30,
    stagger: 0.05, // Эффект каскада, каждый следующий символ начинает анимацию с задержкой
    yoyo: true,
    repeat: -1,
    repeatDelay: 2
});

В этом примере после инициализации textSplitInstance.chars будет массивом всех отдельных букв, а textSplitInstance.words — массивом слов. Мы сразу использовали массив chars в анимации GSAP, чтобы буквы выезжали снизу с небольшой задержкой друг относительно друга (stagger).

Главные свойства (массивы элементов)

1. chars: Массив DOM-элементов, каждый из которых содержит один символ.
2. words: Массив DOM-элементов, каждый из которых содержит одно слово.
3. lines: Массив DOM-элементов, каждый из которых содержит одну строку текста (с учетом текущей ширины контейнера).

Эти свойства — ваша отправная точка для создания анимаций с помощью GSAP. Вы можете передать любой из этих массивов в функции gsap.to(), gsap.from() или gsap.fromTo().

Важные методы

.revert(): это, пожалуй, самый критичный метод. Он возвращает DOM в исходное состояние, удаляя все созданные плагином обертки (<span>). Всегда вызывайте этот метод, когда анимация завершена и разделение больше не нужно, особенно при работе с одностраничными приложениями (SPA) или динамическим контентом. Это предотвращает утечку памяти, накопление лишних элементов и конфликты стилей.

// Анимация завершилась, разделение больше не требуется
mySplitTextInstance.revert();

.split(): Позволяет повторно выполнить разделение с новыми параметрами. Может быть полезен, если изменился контент или размеры контейнера (например, после изменения размеров окна, особенно для типа lines).

Для комбинированного разделения (например, type:"words,chars") объект будет содержать все соответствующие массивы. Важно помнить, что структура становится вложенной: символы находятся внутри оберток слов.

Работа с плагином SplitText не ограничивается базовым разделением. Его настоящая мощь раскрывается при использовании дополнительных опций и комбинации с другими возможностями GSAP.

Ключевые опции при инициализации

• charsClass, wordsClass, linesClass: Позволяют задать пользовательские CSS-классы для создаваемых элементов. Это абсолютно необходимо для тонкой настройки внешнего вида (например, изменение display для символов) и для применения отдельных стилей.
• position: Управляет CSS-свойством position созданных элементов. По умолчанию используется relative, что удобно для анимации трансформаций. Но в некоторых случаях может потребоваться изменить значение на absolute или inline-block.
• absolute: При установке в true для типов chars и words элементы позиционируются абсолютно. Это сложный, но мощный режим, позволяющий вручную управлять потоком текста, однако он требует глубокого понимания CSS.

Анимация с проставлением задержек (stagger)

Одна из самых сильных сторон GSAP — эффект stagger. В комбинации с SplitText он позволяет создавать сложные последовательности буквально одной строкой.

// Разделяем текст на строки
let quoteElement = document.querySelector('.client-quote');
let splitQuote = new SplitText(quoteElement, { type: "lines" });

// Анимация появления строк снизу с задержкой и интерактивным исчезновением
gsap.from(splitQuote.lines, {
    duration: 1.2,
    y: 80,
    opacity: 0,
    ease: "power3.out",
    stagger: 0.15 // Каждая следующая строка начинает анимацию на 0.15 сек позже
});

// По клику на кнопку "скрыть цитату" возвращаем строки обратно
document.querySelector('.hide-btn').addEventListener('click', () => {
    gsap.to(splitQuote.lines, {
        duration: 0.7,
        y: -50,
        opacity: 0,
        stagger: 0.1,
        onComplete: () => splitQuote.revert() // После анимации очищаем DOM
    });
});

Даже с таким мощным инструментом, как SplitText, разработчики могут столкнуться с рядом проблем. Вот наиболее частые из них и способы их решения.

«Дергание» или смещение контента при инициализации

• Причина: плагин меняет DOM-структуру, добавляя элементы. Пока это происходит, браузер может пересчитывать макет (layout thrashing).
• Решение: частично помогает предварительное задание CSS-свойств для классов, которые вы указываете в опциях (charsClass и т.д.). Например, установите для символов display: inline-block и минимальную ширину. Иногда полезно инициировать разделение на скрытом (например, с opacity:0) элементе, а после завершения показать его и начать анимацию.

Некорректное разделение на строки (type:"lines") при изменении размера окна

• Причина: Строки определяются на основе фактической геометрии элемента в конкретный момент времени. При изменении размеров окна эта геометрия меняется.
• Решение: Необходимо вызвать метод .revert(), а затем заново инициализировать SplitText с теми же параметрами после изменения размера окна. Для этого можно использовать Debounce или Throttle, чтобы не перегружать браузер.

let mySplitInstance;
function setupTextSplit() {
    if (mySplitInstance) mySplitInstance.revert();
    let targetText = document.querySelector('.responsive-headline');
    mySplitInstance = new SplitText(targetText, { type: "lines", linesClass: "line-part" });
    // Запустить анимацию, если нужно
}
// Оптимизируем вызов функции при ресайзе
let resizeTimer;
window.addEventListener('resize', () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(setupTextSplit, 250); // Вызовем через 250 мс после окончания ресайза
});

Конфликты CSS-стилей после разделения

• Причина: Добавленные элементы могут наследовать или не наследовать стили родителя не так, как ожидалось (например, свойства шрифта, межбуквенные интервалы letter-spacing).
• Решение: Всегда используйте кастомные классы (charsClass) и явно прописывайте в CSS ключевые стили, которые должны сохраниться.

.custom-char {
    display: inline-block; /* Важно для корректной трансформации */
    font-family: inherit; /* Наследуем шрифт явно */
    font-weight: inherit;
    white-space: pre; /* Сохраняем пробелы */
}

SplitText раскрывает свой истинный потенциал в связке с другими плагинами GSAP, такими как ScrollTrigger (для привязки анимации к скроллу) и при создании эффектов с масками.

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

// Разделяем текст на строки
let storyText = document.querySelector('.long-story');
let splitStory = new SplitText(storyText, { type: "lines", linesClass: "story-line" });

// Инициализируем анимацию для каждой строки, но "замораживаем" ее
gsap.set(splitStory.lines, { y: 50, opacity: 0 });

// Для каждой строки создаем отдельную анимацию, привязанную к скроллу
splitStory.lines.forEach((line, index) => {
    gsap.to(line, {
        y: 0,
        opacity: 1,
        duration: 0.8,
        ease: "power2.out",
        scrollTrigger: {
            trigger: line, // Триггером выступает сама строка
            start: "top 85%", // Анимация начнется, когда верх строки будет на 85% от верха окна
            end: "top 30%",
            toggleActions: "play none none none", // Воспроизвести один раз
            // Небольшая задержка для каскадного эффекта
            delay: index * 0.1
        }
    });
});

Эффект «сборки» текста из разрозненных букв

Используем SplitText для разделения, анимацию from — для сборки, и маску (или фильтр blur) для усиления эффекта.

<div class="assembled-heading">Анимированный текст</div>

/* CSS для подготовки */
.assembled-heading .char {
    display: inline-block;
    filter: blur(5px); /* Начальное размытие */
    opacity: 0.5;
}

let title = document.querySelector('.assembled-heading');
let splitTitle = new SplitText(title, { type: "chars", charsClass: "char" });

// Анимация "сборки": убираем размытие, поднимаем и делаем непрозрачными
gsap.to(splitTitle.chars, {
    duration: 1.5,
    opacity: 1,
    filter: "blur(0px)",
    y: 0,
    stagger: {
        amount: 0.8, // Общая длительность всего stagger-эффекта
        from: "random" // Буквы появляются в случайном порядке! Эффектно.
    },
    ease: "power3.out"
});

Использование плагина SplitText, особенно на сложных страницах, требует внимания к производительности. Следуя нескольким правилам, вы сможете создавать плавные анимации без вреда для пользовательского опыта.

• Принцип «Разделил — выполни анимацию — убери»: всегда планируйте вызов метода .revert(). Не оставляйте сотни ненужных <span>-элементов в DOM, особенно на одностраничных приложениях (SPA) при переходе между «страницами». Делайте это в коллбэке onComplete анимации или в хуках жизненного цикла фреймворка (например, beforeDestroy в Vue.js или useEffect cleanup в React).
• Ограничивайте область разделения: не применяйте SplitText ко всему тексту на странице. Делите только ключевые элементы: заголовки, цитаты, призывы к действию. Анимация параграфов основного текста, как правило, излишня и ресурсоемка.
• Используйте кастомные классы для контроля стилей: это предотвратит неожиданное влияние ваших анимаций на глобальные стили проекта и упростит отладку.
• Комбинируйте с will-change осторожно: Вв некоторых случаях для элементов, которые будут активно анимироваться (особенно трансформациями), можно добавить CSS-свойство will-change: transform. Однако не применяйте его массово ко всем символам, так как это может дать обратный эффект. Используйте точечно и тестируйте.
• Тестируйте на реальных устройствах: сложные анимации с большим количеством элементов (например, посимвольное разделение длинного заголовка) могут подтормаживать на мобильных устройствах. Всегда проверяйте производительность и, при необходимости, упрощайте анимацию для мобильных (например, анимируйте слова вместо символов).

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

Вы увидели возможности GSAP, но чтобы создавать по-настоящему сложную анимацию, нужны глубокие знания. Наш онлайн-курс «Обучение GSAP с нуля до профи» поможет вам освоить все инструменты платформы на профессиональном уровне. А если нужен готовый результат — наша веб-студия создаст для вас сайт с безупречной и эффективной анимацией, которая усилит ваш бренд. Доверьте анимацию профессионалам — начните обучение или закажите создание сайта уже сегодня!