Реалізація анімації тексту (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. Зв'яжіться з нами, щоб обговорити ваш проєкт — отримайте консультацію безкоштовно.