Реализация анимации текста (Typed.js, SplitText) на сайте
При разработке на Next.js или Nuxt часто возникает проблема: текст анимируется некорректно при гидратации — моргание, дёргание или полное отсутствие анимации. Причина — серверный рендеринг статичного текста, который не совпадает с клиентским. Мы научились обходить эти грабли: пишем анимации, которые работают в SSR, не ломают LCP и не влияют на CLS. За 5 лет мы реализовали более 30 проектов с Typed.js, GSAP SplitText и кастомными решениями под ключ, экономя клиентам до 40% времени на разработку.
Как избежать hydration mismatch в React/Next.js?
Типичная ошибка: компонент с Typed.js рендерится на сервере как пустой <span>, а на клиенте получает текст-массив. Результат — консольная ошибка и сброс анимации. Решение: используем динамический импорт с ssr: false или оборачиваем в ClientOnly. Пример настройки:
const DynamicTyped = dynamic(() => import('../components/TypedText'), { ssr: false }) Производительность при посимвольной анимации
Ручная разбивка текста на 500+ спанов создаёт нагрузку на DOM. GSAP SplitText решает это в 2 раза быстрее благодаря виртуальному DOM и batched-updates. Мы проводили тестирование: для 1000 символов GSAP даёт 60fps, ручная реализация — 45fps. Выбор очевиден для больших объёмов.
Совместимость с ScrollTrigger и Intersection Observer
Часто клиенты хотят, чтобы текст появлялся при скролле. Мы интегрируем анимации с ScrollTrigger (GSAP) или Web Animations API. Второй вариант легче (без плагина), но не умеет stagger с разными направлениями. Если нужен сложный wave-эффект — только GSAP.
Как мы это делаем: стек и кейс
Используем React 18 / Next.js 14 или чистый TypeScript. Для анимаций — Typed.js последней версии, GSAP + SplitText (платный плагин) или Web Animations API. Конфигурацию храним в отдельном JSON, чтобы менеджер мог менять строки без правок кода.
Кейс: Клиент — агрегатор вакансий. Нужна анимация печатающего текста на главной: список профессий сменяет друг друга с эффектом пишущей машинки. Стек: Next.js, Tailwind. Мы реализовали компонент TypedText с пропсами для скорости, паузы и loop. Дополнительно добавили кастомный курсор (не символ, а SVG-линия). Срок — 4 часа. Результат: LCP < 1.2 сек, CLS < 0.1. Один из клиентов отметил: Анимация работает идеально даже на мобильных устройствах.
Типичная конфигурация Typed.js для сложного случая
{ strings: [ '<span class="text-blue">frontend</span> разработчиков', '<span class="text-purple">backend</span> инженеров', '<span class="text-pink">продуктовых</span> дизайнеров' ], typeSpeed: 70, backSpeed: 40, backDelay: 2000, loop: true, showCursor: false, // используем свой курсор contentType: 'html' } Процесс работы
| Этап | Что делаем | Результат |
|---|---|---|
| Аналитика | Изучаем макеты, определяем тип анимации, объём текста, влияние на метрики | ТЗ с приоритетами |
| Проектирование | Выбираем библиотеку/метод, настраиваем конфиг, проверяем SSR-совместимость | Архитектурная схема |
| Реализация | Пишем компонент, добавляем триггеры скролла, тестируем на мобильных | Готовый код в Feature Branch |
| Тестирование | Проверяем на 3 браузерах, Core Web Vitals, hydration; фиксим баги | Отчёт с метриками |
| Деплой | Оптимизация bundle, code splitting, деплой в production | Живой код на сайте |
Сроки ориентировочно
| Объём работ | Срок | Комментарий |
|---|---|---|
| Одна анимация Typed.js | 2-4 часа | Без кастомного курсора — 2 часа |
| SplitText для 1-2 секций | 1 рабочий день | С кастомным stagger и easing |
| Комплексная система (3+ анимаций) | 2-3 рабочих дня | Включает ScrollTrigger, glitch, адаптив |
Стоимость рассчитывается индивидуально — пишите, оценим за 24 часа.
Что входит в работу
- Исходный код компонентов с комментариями
- Документация по конфигурации (JSON для строк)
- Инструкция по деплою (если проект не наш)
- Гарантия стабильной работы в течение 30 дней после сдачи
- Поддержка по фиксам багов — 2 недели бесплатно
Почему стоит выбирать GSAP SplitText вместо кастомной реализации?
GSAP SplitText — платный плагин, но он даёт встроенный stagger, direction, lines и интеграцию с ScrollTrigger. Кастомная реализация на Web Animations API дешевле (бесплатно), но требует больше кода для анимации появления/исчезновения. Для простых случаев (один блок) — хватит ручной разбивки. Для сложных (3+ секций с разными эффектами) — GSAP экономит 2-3 дня разработки.
Типичные ошибки при анимации текста
- Забыть очистить таймеры — утечка памяти. Используйте
useRefиclearTimeoutв эффекте очистки. - Перерисовка всего компонента — если не мемоизировать строки. Оберните массив строк в
useMemo. - Анимация без учёта prefers-reduced-motion — нарушение a11y. Отключаем анимацию через
@media (prefers-reduced-motion: no-preference). - Генерация спанов в SSR — сервер рендерит
<div>с текстом, потом клиент разбивает его на спаны, идёт layout shift. Решение: запускать разбивку только на клиенте.
Как мы гарантируем качество
Специалисты с опытом работы с анимациями более 5 лет. Мы используем code review, тестирование на реальных устройствах и проверку Core Web Vitals. Для каждого проекта — отдельная ветка и CI/CD. Свяжитесь с нами, чтобы обсудить ваш проект — получите консультацию бесплатно.