Плагин GSAP SplitText позволяет простым способом разбить текст на символы с помощью библиотеки GSAP, написанной на JavaScript, и анимировать его методами GSAP-анимации. Здесь мы рассмотрим, как использовать плагин GSAP SplitText на практических примерах.
Самый простой пример: всем знакомое выражение “Hello World” с помощью плагина GSAP SplitText превращается в массив букв [H, e, l, l, o, , W, o, r, l, d], а затем кодом можно задать анимацию каждой отдельной буквы в составе этого выражения. Это отлично смотрится при прокрутке контента с использованием другого плагина GSAP ScrollTrigger.
Подключение плагина
Ранее плагин GSAP SplitText был доступен только по платной подписке, но сейчас - о, слава разработчикам GSAP! - этот плагин бесплатен.
Для начала вам нужно подключить плагин к своей html-странице. НО следует помнить, что это плагин GSAP, поэтому сначала нужно подключить саму библиотеку GSAP для создания анимаций. Ну и конечно, нужно помнить, что это js-библиотека и js-плагин, соответственно, подключаем мы их с помощью тега <script>.
Способ 1. Подключение после скачивания плагина (файлы находятся в папке js вашего сайта)
| 1 2 | <script src="./js/gsap/gsap.min.js"> </script> <script src="./js/gsap/SplitText.min.js"></script> |
Способ 2. Подключение из Интернет, с CDN (можно совместить с подключением любых других плагинов)
| 1 2 3 | <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script> |
Также нужно добавить код подключения плагина и анимации в основном html-файле в теге <script> или во внешнем js-файле:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | document.addEventListener("DOMContentLoaded", (event) => { gsap.registerPlugin(SplitText) // Код gsap-анимации const split = new SplitText(".headline", { type: "chars, words" }); gsap.from(split.chars, { opacity: 0, y: 40, duration: 0.6, ease: "power2.out", stagger: 0.05 }); }); |
Способ 3. Подключение модуля для React/Vite/Webpack
Для начала вам придется скачать 2 пакета: gsap и gsap/SplitText в папку с другими Node-модулями, а затем импортировать их в файл проекта. Ну, и использовать в коде:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import { gsap } from "gsap"; import { SplitText } from "gsap/SplitText"; // обязательно зарегистрировать плагин gsap.registerPlugin(SplitText); const split = new SplitText(".headline", { type: "chars, words" }); gsap.from(split.chars, { opacity: 0, y: 40, duration: 0.6, ease: "power2.out", stagger: 0.05 }); |
Параметры (опции) плагина GSAP SplitText
| Опция | Описание |
|---|---|
type | Что разбивать: "chars", "words", "lines" или комбинации "chars, words". |
wordsClass | CSS-класс для каждого слова. |
charsClass | CSS-класс для каждой буквы. |
linesClass | CSS-класс для каждой строки. |
position: "absolute" | Можно задать, если нужно фиксировать каждую букву на месте для сложных анимаций. |
Базовая анимация
Плагин SplitText разбивает текст на буквы, слова или строки с назначением соответствующих классов, которые вы можете поменять:
| 1 2 3 4 5 6 | const split = new SplitText(".title", { type: "lines, words, chars", wordsClass: "word", charsClass: "char", linesClass: "line" }); |
Пример разбивки на буквы
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // 1. Разбиваем текст на буквы const split = new SplitText(".title", { type: "chars", charsClass: "border" }); // 2. Анимация выпадения букв снизу вверх gsap.from(split.chars, { duration: 0.6, // продолжительность y: 80, // смещение снизу opacity: 0, // из прозрачности ease: "back.out(1.7)", // мягкий отскок stagger: 0.05 // задержка между буквами }); |
Протестируйте пример, сначала разбив его на буквы, а затем запустив анимацию.
See the Pen GSAP SplitText basic animation by HTML-plus (@ambassador) on CodePen.
Что происходит в коде:
- Плагин SplitText разбивает html-элемент с классом
.titleна массивsplit.chars— каждую букву по отдельности, причем для каждой буквы мы задаем свой класс "border", для которого указываем css-свойства. По умолчанию происходит разбивка на буквы с классом "char". - Метод
gsap.from()анимирует все буквы, задавая им начальные параметры (y: 80, opacity: 0), а потом плавно возвращает в исходное положение. - Параметр
stagger: 0.05делает анимацию последовательной — каждая буква появляется чуть позже предыдущей.
В коде ниже у нас уже работают 3 последовательные анимации за счет использования GSAP Timeline.
See the Pen GSAP Split Text 3step animation by HTML-plus (@ambassador) on CodePen.
Ниже вы найдете пару примеров анимации теста с разбивкой на буквы (или на символы).
Эффект волны
See the Pen staggers: Better Text Animation by Snorkl.tv (@snorkltv) on CodePen.
Эффект волны с небольшим "подпрыгиванием"
See the Pen stagger: Very Nice Animation by Snorkl.tv (@snorkltv) on CodePen.
Пример с разбивкой по словам и анимацией появления каждого слова
Тут при разбивке на слова мы используем параметр type: "words". Параметр wordsClass: 'word' не является обязательным - он просто обводит рамкой уже не каждую букву, как в предыдущем примере, а каждое слово.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // 1. Разбиваем текст на слова и добавляем класс const split = new SplitText(".title", { type: "words", wordsClass: 'word' }); // 2. Начальные стили для слов (чтобы они вылетали снизу и крутились) gsap.set(split.words, { opacity: 0, y: 60, rotationX: 90, transformOrigin: "50% 100% -50" }); // 3. Анимация появления каждого слова по очереди gsap.to(split.words, { opacity: 1, y: 0, rotationX: 0, duration: 0.8, ease: "back.out(1.7)", stagger: 0.3 }); |
Сам пример:
See the Pen GSAP SplitText basic word animation by HTML-plus (@ambassador) on CodePen.
Что происходит в коде:
- Плагин SplitText разбивает заголовок на массив слов (
split.words). - Мы устанавливаем методом gsap.set() начальные свойства для всех слов (
opacity: 0, y: 60, rotationX: 90), чтобы они начинали невидимыми и повернутыми. - Затем за счет метода
gsap.to()каждое слово плавно “подлетает” вверх и разворачивается (rotationX: 0) с отскоком (ease: "back.out(1.7)"). - Параметр
stagger: 0.3добавляет динамику — каждое слово появляется чуть позже предыдущего.
Еще один пример разбивки по словам связан уже с созданием GSAP Timeline. Этот эффект повторяется многократно после завершения анимации за счет того, что при создании Timeline использован параметр yoyo: true.
See the Pen GSAP SplitText basic word animation by HTML-plus (@ambassador) on CodePen.
Пример с разбивкой по строкам и анимацией появления каждой строки
Такой эффект хорош для заголовков. Здесь при разбивке текст мы используем параметр type: "lines". Обводка с помощью рамок класса .border в большей степени нужна для наглядного понимания, как разбивается текст. Кроме того, в примере использовано css-свойство filter.
See the Pen GSAP SplitText lines animation by HTML-plus (@ambassador) on CodePen.
Код примера:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // Разбиваем текст на строки и добавляем класс let split = new SplitText(".title", { type: "lines", linesClass: 'border' }); // Скрываем все строки ниже экрана gsap.set(split.lines, { opacity: 0, filter: "blur(10px)", y: 100 }); // Создаем плавную анимацию по строкам gsap.to(split.lines, { opacity: 1, y: 0, duration: 1, filter: "blur(0px)", ease: "back.out(1.7)", stagger: 0.4 // задержка между строками }); |
И второй пример, посложнее, в котором каждая строка появляется с другой стороны (слева, справа, снизу).
See the Pen GSAP SplitText 3 lines animation by HTML-plus (@ambassador) on CodePen.
Здесь мы вручную задаём массив directions, а именно: const directions = ["-100%", "100%", "0%"]; Это значит, что:
- первая строка прилетает слева (x: -100%),
- вторая — справа (x: 100%),
- третья — снизу (y: 100%).
Затем на основе этого массива gsap.set() устанавливает стартовые значения, а gsap.to() плавно анимирует строки к позиции x: 0, y: 0.
Параметр mask
Параметр mask в SplitText позволяет обернуть каждый символ, слово или строку в дополнительный элемент с overflow: clip, что делает возможным создание эффектов маскировки. Это особенно полезно для анимаций, где текст появляется или исчезает из-за маски.
Пример кода с маской:
| 1 2 3 4 | const split = new SplitText(".headline", { type: "chars", mask: true }); |
В этом примере каждый символ в элементе с классом .headline будет обернут в дополнительный элемент, позволяя создавать эффекты маскировки.
В примере ниже:
- Текст разбивается на символы с помощью SplitText.
- Каждый символ оборачивается в дополнительный элемент с overflow: clip.
- С помощью GSAP анимируется свойство
clip-path, создавая эффект появления текста.
See the Pen CodePen Home Codrops Tip 1: Split Text Masking - Basic by HTML-plus (@ambassador) on CodePen.
Советы по использованию масок для SplitText
- Совместимость с шрифтами: убедитесь, что используемые шрифты не имеют значительных засечек или элементов, выходящих за пределы строки, так как это может повлиять на отображение маски.
- Производительность: маскировка может быть ресурсоемкой, особенно при анимации большого количества элементов. Оптимизируйте анимации и тестируйте производительность на целевых устройствах.
- Кроссбраузерность: некоторые браузеры могут иметь особенности в поддержке clip-path. Тестируйте анимации в различных браузерах для обеспечения совместимости.
В примере ниже мы маскируем буквы отдельных текстовых элементов (заголовков). За счет использования GSAP Timeline они появляются друг за другом, не отображаясь изначально, как текст.
See the Pen GSAP SplitText parameter mask by HTML-plus (@ambassador) on CodePen.
Еще один пример маскирования:
See the Pen SplitText with masking by Christian (@ceeplus) on CodePen.
А в этом примере можно посмотреть, как появляются из-под маски буквы, слова или строки.
See the Pen Masked Text Reveal (GSAP SplitText) by HTML-plus (@ambassador) on CodePen.
Параметр stagger
Что такое stagger в GSAP? Это параметр, который позволяет задать задержку для анимации каждого элемента. Когда вы анимируете массив элементов (например, буквы, слова, строки, блоки и т.д.), часто хочется не запускать анимацию всех одновременно, а с небольшим интервалом — так, чтобы элементы появлялись один за другим, или с каким-то паттерном. Именно это и даёт параметр stagger.
Например, в методе gsap.from() параметр stagger: 0.1 означает, что между стартом анимации каждого последующего элемента будет задержка в 0.1 секунды.
| 1 2 3 4 5 | gsap.from(elements, { opacity: 0, y: 50, stagger: 0.1 }); |
Расширенные возможности параметра stagger
Помимо простого числового значения, параметр stagger может быть объектом с дополнительными настройками:
| 1 2 3 4 5 6 7 | stagger: { each: 0.05, // задержка между элементами from: "start" // направление/точка старта amount: 0.5, // (опционально) общее время распределения grid: [rows, cols], // если элементы расположены в сетке axis: "x" | "y" // ограничивает распределение по одной оси } |
Ключевые свойства и значения параметра stagger в виде объекта:
each— задержка между стартами соседних элементов.from— стартовая позиция для распределения задержек. Может быть:"start"(по умолчанию) — начиная с первого элемента;"end"— начиная с последнего;"center"— начиная с центра массива/сплит-результата;"edges"— начиная с краёв к центру;index (число)— конкретный индекс как стартовая точка;random— случайный порядок.
amount— позволяет задать общее время распределения задержек, тогда each рассчитывается автоматически.gridиaxis— когда элементы расположены в сетке или двумерке: задают направление распределения.
Примеры использования параметра stagger для различных анимаций можно посмотреть в другой статье.
Что же касается плагина GSAP Split Text, то здесь можно также разнообразить анимацию, используя значения stagger для текста.
See the Pen Codrops Tip 2: Stagger Direction Visualizer by HTML-plus (@ambassador) on CodePen.
Дальше вы найдете пару примеров с эффектами для анимации текста, которые задаются именно с помощью stagger.
Вылетающий справа текст с цифровым значением stagger.
See the Pen stagger Elegant Text Animation by Snorkl.tv (@snorkltv) on CodePen.
Постепенное "всплытие" текста
See the Pen stagger in and out with mask by HTML-plus (@ambassador) on CodePen.
Интересный эффект появления текста из центра.
See the Pen stagger Fancy Text Effect by HTML-plus (@ambassador) on CodePen.
Примеры можно повторить, нажав на текст (здесь включена обработка события pointerdown).
Практические примеры использования плагина GSAP SplitText
Ниже вы найдете ряд примеров, основанных на разбиении текста плагином GSAP SplitText. Код из них может пригодиться для создания анимации заголовков или других важных элементов сайта. Каждый пример можно отредактировать на codepen,io, нажав кнопку 
.
Текст из центра
See the Pen Text Pull Back Animation by HTML-plus (@ambassador) on CodePen.
Анимация после зажатия, а затем отпускания кнопки мыши
See the Pen Text Pull Back Animation Interactive by HTML-plus (@ambassador) on CodePen.
Двойная анимация
See the Pen GSAP Homepage Animate (start) by HTML-plus (@ambassador) on CodePen.
Изменение анимации в зависимости от параметров elastic ease
See the Pen configure elastic ease by HTML-plus (@ambassador) on CodePen.
2 независимые анимации
See the Pen Text Effects Sequence : Independent Opacity Animation by Snorkl.tv (@snorkltv) on CodePen.
Несколько последовательных анимаций на одной позиции
See the Pen Text Effects Sequence : Overlap by HTML-plus (@ambassador) on CodePen.
Еще один вариант
See the Pen Text Effects Sequence : Overlap nested labels by HTML-plus (@ambassador) on CodePen.
Анимация + параметр wrap
See the Pen Codrops Tip 3: Basic Wrap by HTML-plus (@ambassador) on CodePen.
Построчная анимация
See the Pen line by line by HTML-plus (@ambassador) on CodePen.
Автором большинства примеров является Snorkl.tv
Анимация текста при прокручивании от GSAP
Прокрутите колесико мыши, чтобы увидеть текст. В примере использован также плагин GSAP ScrollTrigger.
See the Pen Start - Goodbye by GSAP (@GreenSock) on CodePen.
Анимация арабских букв от GSAP
See the Pen gsap Arabic issue solution by GSAP (@GreenSock) on CodePen.
Анимация нескольких предложений от Snorkl.tv
See the Pen vercel homepage v2 by HTML-plus (@ambassador) on CodePen.
Множественная анимация текста от Snorkl.tv
See the Pen Codrops Tip 7: Markers and Animation Menu by HTML-plus (@ambassador) on CodePen.
"Слетающийся" текст от Snorkl.tv
Вариант 1
See the Pen SplitText in a loop 2 by HTML-plus (@ambassador) on CodePen.
Вариант 2
See the Pen SplitText in a loop by Snorkl.tv (@snorkltv) on CodePen.
Анимация текста для страницы 404 от Selcuk Cura
See the Pen GSAP 404 typed message using SplitText by Selcuk Cura (@selcukcura) on CodePen.
Выпадающий сверху текст от Pete Barr
See the Pen Jello Stretchy Variable Font by HTML-plus (@ambassador) on CodePen.
Вращающийся текст от Pete Barr
See the Pen GSAP 3 & ETC Variable Font Caterpillar by Pete Barr (@petebarr) on CodePen.
А в этом примере плагин SplitText не используется, зато анимация GSAP применяется для вариативного шрифта.
See the Pen GSAP 3 ETC Variable Font Wave by Pete Barr (@petebarr) on CodePen.
