Анимация текста посимвольно

Анимация текста посимвольно позволяет создавать динамичные визуальные эффекты, при которых отдельные символы появляются, исчезают или трансформируются с задержкой, создавая впечатление «живого» текста. В GSAP это достигается за счёт комбинации библиотеки GSAP и вспомогательных методов для разбиения текста на символы.

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

Перед тем как анимировать текст, его необходимо разделить на отдельные элементы. В JavaScript это можно сделать с помощью метода split('') для строки или через более сложные DOM-структуры:

const textElement = document.querySelector('.text');
const text = textElement.textContent;
textElement.textContent = '';

text.split('').forEach(char => {
  const span = document.createElement('span');
  span.textContent = char;
  span.style.display = 'inline-block';
  textElement.appendChild(span);
});

Ключевой момент — каждый символ оборачивается в span с display: inline-block, что позволяет применять к нему трансформации.

Создание базовой анимации

После разбиения текста на символы можно применять анимации GSAP. Простейший пример — появление символов с постепенным увеличением прозрачности и смещением по оси Y:

gsap.from('.text span', {
  duration: 0.5,
  opacity: 0,
  y: 20,
  stagger: 0.05,
  ease: "power2.out"
});

Пояснения ключевых параметров:

duration — длительность анимации для каждого символа.
opacity и y — начальные значения свойства, от которых GSAP будет анимировать к текущему состоянию.
stagger — задержка между запуском анимации для каждого следующего символа, что создаёт эффект последовательного появления.
ease — тип кривой ускорения анимации, влияющий на плавность движения.

Анимация с масштабированием и вращением

Для более выразительных эффектов можно комбинировать несколько свойств. Например, анимация с масштабом и поворотом:

gsap.from('.text span', {
  duration: 0.6,
  opacity: 0,
  scale: 0,
  rotation: 360,
  stagger: 0.04,
  ease: "back.out(1.7)"
});

Особенности:

scale: 0 делает символы невидимыми по размеру в начале анимации.
rotation: 360 добавляет эффект вращения.
back.out(1.7) создаёт пружинящий эффект при завершении анимации.

Цепочка анимаций с Timeline

Для сложных последовательностей анимаций используется gsap.timeline(). Это позволяет объединять несколько анимаций в единую цепочку:

const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });

tl.from('.text span', { opacity: 0, y: 20, stagger: 0.05 })
  .to('.text span', { color: "#ff0000", stagger: 0.03 })
  .to('.text span', { y: -10, repeat: 1, yoyo: true, stagger: 0.05 });

Timeline позволяет:

Определять порядок анимаций.
Настраивать задержки и повторения.
Создавать плавные и синхронизированные эффекты для больших блоков текста.

Использование ScrollTrigger для анимации при прокрутке

Интерактивность можно усилить с помощью плагина ScrollTrigger, чтобы анимация срабатывала при появлении текста в области видимости:

gsap.from('.text span', {
  scrollTrigger: {
    trigger: '.text',
    start: "top 80%",
    end: "bottom 20%",
    toggleActions: "play none none reverse"
  },
  opacity: 0,
  y: 30,
  stagger: 0.05,
  duration: 0.5
});

Пояснения параметров ScrollTrigger:

trigger — элемент, на котором отслеживается прокрутка.
start и end — позиции триггера относительно окна.
toggleActions — действия при прокрутке (play, pause, reverse, reset).

Анимация с индивидуальной задержкой

Для более органичных эффектов можно задавать динамическую задержку через функцию:

gsap.from('.text span', {
  opacity: 0,
  y: 20,
  stagger: index => index * 0.03 + Math.random() * 0.02,
  duration: 0.5
});

Каждому символу присваивается уникальная задержка, создавая эффект живого текста с небольшой хаотичностью.

Комбинирование с цветом и размерами

Посимвольная анимация позволяет комбинировать движения с изменением цвета, размера или тени текста:

gsap.fromTo('.text span', 
  { opacity: 0, scale: 0.8, color: '#000' }, 
  { opacity: 1, scale: 1, color: '#ff6600', stagger: 0.05, duration: 0.6 }
);

Использование fromTo удобно для анимаций, где необходимо явно задать начальное и конечное состояние.