Работа с HTML-тегами внутри текста

GSAP (GreenSock Animation Platform) предоставляет мощный инструмент для анимации HTML-элементов, включая теги внутри текста. Анимация может быть применена как к отдельным элементам DOM, так и к структурам, содержащим текст с вложенными тегами. Для работы с текстом чаще всего используются методы gsap.to(), gsap.from(), gsap.fromTo(), а также плагины вроде SplitText для более тонкого контроля над отдельными символами, словами или строками.

Анимация отдельных HTML-элементов

Каждый HTML-тег в тексте можно рассматривать как отдельный элемент DOM. Для анимации свойств CSS (позиции, прозрачности, масштаба, поворота) используется синтаксис:

gsap.to(".classname", {
    duration: 1,
    opacity: 1,
    y: 20,
    ease: "power2.out"
});
  • duration — длительность анимации в секундах.
  • opacity — прозрачность элемента.
  • y — смещение по оси Y относительно начальной позиции.
  • ease — функция плавности анимации.

Использование селекторов позволяет анимировать сразу несколько тегов одновременно, что особенно полезно при работе с текстом, содержащим <span>, <strong>, <em> и другие inline-элементы.

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

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

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

gsap.from(split.chars, {
    duration: 0.5,
    opacity: 0,
    y: 30,
    stagger: 0.05,
    ease: "back.out(1.7)"
});
  • split.chars — массив всех символов.
  • stagger — задержка между анимацией последовательных элементов, создающая эффект «волны».
  • ease — сглаживание движения при появлении.

Такой подход позволяет анимировать текст динамично, создавая эффекты появления, рассеивания, вращения и другие.

Управление вложенными тегами

Вложенные теги, например <span> внутри <p> или <strong> внутри <span>, могут быть анимированы как отдельные единицы. Для этого используется комбинация селекторов и методов GSAP. Пример анимации текста с различными стилями:

gsap.from(".text span", {
    duration: 0.8,
    x: -50,
    opacity: 0,
    stagger: 0.1,
    ease: "power3.out"
});

Каждый <span> получает индивидуальную анимацию, при этом можно комбинировать эффекты для разных тегов:

gsap.to(".text strong", { scale: 1.5, duration: 0.5, ease: "elastic.out(1, 0.5)" });
gsap.to(".text em", { rotation: 15, duration: 0.5, ease: "power1.inOut" });

Анимация атрибутов HTML-тегов

GSAP позволяет анимировать не только стили, но и атрибуты HTML. Применение к тегам с атрибутами, такими как data-*, src, href, расширяет возможности анимации:

gsap.to("img", { duration: 1, attr: { src: "new-image.jpg" } });
gsap.to("a", { duration: 0.5, attr: { href: "https://example.com" } });

Работа с текстом в SVG и HTML одновременно

GSAP одинаково эффективно работает с текстом в <text> SVG и HTML-тегами. Для анимации SVG-текста можно использовать те же методы, что и для HTML, но при этом контролировать свойства x, y, fill, stroke:

gsap.from("svg text", {
    duration: 1,
    y: -20,
    opacity: 0,
    stagger: 0.1
});

Сложные последовательности анимаций

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

const tl = gsap.timeline();
tl.from(".text .word1", { opacity: 0, y: 20, duration: 0.5 })
  .from(".text .word2", { opacity: 0, x: 50, duration: 0.5 }, "-=0.3")
  .to(".text strong", { scale: 1.2, duration: 0.4, ease: "elastic.out(1, 0.5)" });

Использование смещения "-=0.3" позволяет перекрывать анимации, создавая более живую и естественную динамику.

Анимация inline-стилей и классов

GSAP легко взаимодействует с классами, добавляя или убирая их динамически, что особенно удобно при работе с большим количеством тегов с разными CSS-правилами:

gsap.to(".highlighted", { duration: 0.6, className: "+=active" });
gsap.to(".highlighted", { duration: 0.6, className: "-=active" });

Использование коллбэков для управления HTML

Коллбэки onStart, onUpdate, onComplete позволяют изменять содержимое или структуру HTML-тегов во время анимации:

gsap.to(".text", {
    duration: 1,
    opacity: 1,
    onUpdate: () => {
        document.querySelector(".text").innerHTML = "Анимируем текст!";
    }
});

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

Рекомендации по оптимизации

  • Использовать will-change: transform, opacity в CSS для тегов, которые анимируются, чтобы повысить производительность.
  • Минимизировать количество одновременно анимируемых тегов при сложных сценах.
  • Предпочитать transform вместо top, left для движения элементов.
  • При анимации текста с плагином SplitText освобождать ресурсы после завершения анимации через метод revert().

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

Оглавление