Параметр type: chars, words, lines

GSAP (GreenSock Animation Platform) предоставляет мощный инструмент для анимации текста с помощью плагина SplitText. Параметр type отвечает за способ разделения текста на анимируемые единицы. Возможные значения: chars (символы), words (слова) и lines (строки). Выбор зависит от требуемого эффекта анимации.

Разделение текста на символы (chars)

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

Пример:

import { gsap } from "gsap";
import { SplitText } from "gsap/SplitText";

const myText = document.querySelector(".text");
const split = new SplitText(myText, { type: "chars" });

gsap.from(split.chars, {
  duration: 0.5,
  opacity: 0,
  y: 50,
  stagger: 0.05
});

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

  • split.chars возвращает массив всех символов.
  • stagger позволяет задавать задержку между анимацией каждого символа.
  • Можно комбинировать с трансформациями: scale, rotation, x, y.

Разделение текста на слова (words)

Использование type: "words" разбивает текст на слова, что удобно для создания эффектов появления слов поочередно, увеличения или перемещения текста в блоке.

Пример:

const split = new SplitText(myText, { type: "words" });

gsap.from(split.words, {
  duration: 0.7,
  opacity: 0,
  y: 30,
  stagger: 0.1,
  ease: "back.out(1.7)"
});

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

  • Слова остаются цельными, внутренние символы не разделяются.
  • Можно задавать сложные кривые движения и индивидуальные задержки.
  • Удобно для динамических заголовков или интро текста.

Разделение текста на строки (lines)

При type: "lines" текст делится на строки. Каждая строка становится отдельным анимируемым элементом. Подходит для эффектов подъема строк, поочередного появления блоков текста, анимации цитат или параграфов.

Пример:

const split = new SplitText(myText, { type: "lines" });

gsap.from(split.lines, {
  duration: 1,
  opacity: 0,
  y: 20,
  stagger: 0.3,
  ease: "power2.out"
});

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

  • Линии воспринимаются как блочные элементы с собственными координатами.
  • Можно комбинировать с words и chars для сложных эффектов.
  • Позволяет управлять визуальной иерархией текста.

Комбинированные варианты

Плагин SplitText поддерживает сочетания: "words,chars", "lines,words", "lines,chars". Это позволяет создавать более сложные эффекты с контролем на нескольких уровнях. Например:

const split = new SplitText(myText, { type: "lines,chars" });

gsap.from(split.chars, {
  duration: 0.6,
  opacity: 0,
  y: 20,
  stagger: {
    each: 0.02,
    from: "start",
    grid: "auto"
  },
  ease: "power3.out"
});

Применение комбинированного разделения:

  • Анимация символов внутри строк с сохранением их линейной структуры.
  • Возможность применять разные эффекты к строкам и символам одновременно.
  • Управление задержкой через stagger на нескольких уровнях.

Практические советы по использованию параметра type

  • Для коротких заголовков чаще используют chars — анимация выглядит динамичной.
  • Для текстов средней длины удобнее words — легче контролировать тайминг.
  • Для длинных абзацев или цитат лучше использовать lines — появляется структурированная последовательность.
  • Комбинированные типы дают максимальную гибкость, но увеличивают количество DOM-элементов, что может влиять на производительность.

Взаимодействие с другими свойствами GSAP

  • stagger — основное свойство для поочередной анимации элементов, разделённых SplitText.
  • ease — позволяет задавать кривые ускорения для плавной анимации.
  • transform (x, y, scale, rotation) — комбинируется с любым type, создавая эффектные визуальные эффекты.
  • duration — корректируется в зависимости от количества элементов: при большом количестве символов рекомендуется уменьшить длительность отдельного анимационного шага.

Параметр type — фундаментальный инструмент для тонкой настройки анимации текста в GSAP. Он позволяет выбрать уровень детализации: символы, слова или строки, а комбинации открывают широкий спектр эффектов для заголовков, параграфов и интерактивного текста.

Оглавление