Анимация разбитого текста

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

Разбиение текста на элементы

Для начала необходимо разделить текст на отдельные элементы. В GSAP чаще всего используют утилиту SplitText. Она позволяет автоматически разбить текст на три уровня: строки, слова и символы.

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

gsap.registerPlugin(SplitText);

const text = document.querySelector(".text");
const split = new SplitText(text, { type: "chars, words, lines" });
  • chars — отдельные символы.
  • words — отдельные слова.
  • lines — строки текста.

После этого каждый символ, слово и строка становятся отдельными HTML-элементами (<div> или <span>), что позволяет применять к ним анимацию независимо.

Анимация символов

Для создания эффектов появления по буквам используется метод gsap.from или gsap.to. Основная идея — задавать начальные состояния символов и плавно изменять их к конечному.

gsap.from(split.chars, {
  duration: 1,
  opacity: 0,
  y: 50,
  stagger: 0.05,
  ease: "back.out(1.7)"
});
  • opacity: 0 делает символы прозрачными в начале.
  • y: 50 задает смещение по вертикали.
  • stagger: 0.05 обеспечивает последовательное появление символов с задержкой 0.05 секунды.
  • ease: "back.out(1.7)" добавляет эффект пружины, создавая плавное и естественное движение.

Анимация слов

Анимация по словам позволяет создавать интересные эффекты, например, «волны» текста:

gsap.from(split.words, {
  duration: 1,
  opacity: 0,
  scale: 0.5,
  x: -30,
  stagger: 0.1,
  ease: "power3.out"
});
  • scale: 0.5 уменьшает слово до половины размера в начале анимации.
  • x: -30 смещает слова по горизонтали.
  • stagger: 0.1 позволяет словам появляться друг за другом с небольшой задержкой.

Анимация линий

Иногда эффект лучше смотреть на уровне строк:

gsap.from(split.lines, {
  duration: 1.2,
  opacity: 0,
  y: 30,
  stagger: 0.2,
  ease: "power2.out"
});

Строки текста появляются последовательно, создавая плавное вертикальное движение всего абзаца.

Комбинирование анимаций

GSAP позволяет комбинировать анимации с помощью Timeline. Это дает полный контроль над последовательностью появления символов, слов и линий:

const tl = gsap.timeline();

tl.from(split.chars, { duration: 0.8, opacity: 0, y: 20, stagger: 0.04, ease: "back.out(1.5)" })
  .from(split.words, { duration: 0.6, scale: 0.8, opacity: 0, stagger: 0.08, ease: "power1.out" }, "-=0.5")
  .from(split.lines, { duration: 1, y: 20, opacity: 0, stagger: 0.15, ease: "power2.out" }, "-=0.7");
  • Отрицательные значения во втором и третьем анимационных вызовах ("-=0.5", "-=0.7") позволяют накладывать анимации друг на друга, создавая более сложные и динамичные эффекты.

Настройка Ease и Stagger

  • Ease задает кривую анимации. Для символов часто используют back, elastic, power для естественных движений.
  • Stagger управляет временем задержки между элементами. Можно использовать числа, функции или массивы для создания хаотичных и синхронизированных эффектов.
gsap.from(split.chars, {
  duration: 1,
  opacity: 0,
  y: 40,
  stagger: {
    amount: 1.5,
    from: "random"
  },
  ease: "elastic.out(1, 0.5)"
});
  • from: "random" случайным образом выбирает порядок появления символов.
  • amount: 1.5 распределяет задержку по всей последовательности символов.

Анимация с повторением и циклическими эффектами

Для создания бесконечной анимации текста используется свойство repeat:

gsap.fromTo(split.chars,
  { y: 20, opacity: 0 },
  { y: 0, opacity: 1, duration: 0.8, stagger: 0.05, repeat: -1, yoyo: true }
);
  • repeat: -1 запускает анимацию бесконечно.
  • yoyo: true обеспечивает обратное движение после каждого цикла.

Применение к интерактивным событиям

Анимацию разбитого текста можно связывать с событиями пользователя: hover, scroll, click:

document.querySelector(".text").addEventListener("mouseenter", () => {
  gsap.to(split.chars, { y: -10, rotation: 15, duration: 0.5, stagger: 0.03, ease: "power2.out" });
});

document.querySelector(".text").addEventListener("mouseleave", () => {
  gsap.to(split.chars, { y: 0, rotation: 0, duration: 0.5, stagger: 0.03, ease: "power2.out" });
});
  • Символы реагируют на наведение, создавая эффект «живого» текста.
  • Поворот и смещение добавляют визуальную динамику.

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

  • Использовать will-change: transform в CSS для элементов, чтобы браузер заранее оптимизировал анимацию.
  • Не злоупотреблять большим количеством одновременно анимируемых символов.
  • Для повторяющихся эффектов применять timeline вместо отдельного вызова анимации для каждого символа.

Заключение по технике разбитого текста

Анимация разбитого текста с GSAP позволяет создавать визуально сложные и динамичные эффекты появления текста. Использование SplitText в комбинации с Timeline, Stagger и разнообразными Ease обеспечивает полный контроль над движением символов, слов и строк, позволяя интегрировать анимацию как в простые заголовки, так и в сложные интерактивные интерфейсы.

Оглавление