Implementing Text Animation (Typed.js, SplitText) on Your Website

When developing with Next.js or Nuxt, a common issue arises: text animates incorrectly during hydration—blinking, jerking, or complete absence. The cause is server-rendered static text that doesn't match the client version. We've learned to bypass these pitfalls: we write animations that work with SSR, don't break LCP, and don't affect CLS. Over 5 years, we've implemented over 30 projects with Typed.js, GSAP SplitText, and custom turnkey solutions, saving clients up to 40% development time.

How to Avoid Hydration Mismatch in React/Next.js

A typical mistake: a component with Typed.js renders as an empty <span> on the server and then receives the text array on the client. Result: console errors and animation reset. Solution: use dynamic import with ssr: false or wrap it in ClientOnly. Example configuration:

const DynamicTyped = dynamic(() => import('../components/TypedText'), { ssr: false }) 

Performance with Character-by-Character Animation

Manual splitting of text into 500+ spans creates DOM overhead. GSAP SplitText solves this 2x faster thanks to virtual DOM and batched updates. We tested: for 1000 characters, GSAP delivers 60fps, manual implementation gives 45fps. The choice is clear for large volumes.

Compatibility with ScrollTrigger and Intersection Observer

Often clients want text to appear on scroll. We integrate animations with ScrollTrigger (GSAP) or Web Animations API. The second option is lighter (no plugin), but doesn't support stagger with different directions. For complex wave effects—only GSAP.

Our Approach: Stack and Case Study

We use React 18 / Next.js 14 or vanilla TypeScript. For animations—latest Typed.js, GSAP + SplitText (paid plugin), or Web Animations API. Configuration is stored in a separate JSON so that managers can change strings without modifying code.

Case Study: A job aggregator client needed a typewriter animation on the homepage: a list of professions cycling with a typing effect. Stack: Next.js, Tailwind. We implemented a TypedText component with props for speed, pause, and loop. Additionally, we added a custom cursor (SVG line, not a character). Timeline: 4 hours. Result: LCP < 1.2s, CLS < 0.1. One client noted: The animation works flawlessly even on mobile devices.

Typical Typed.js Configuration for Complex Cases

{ strings: [ '<span class="text-blue">frontend</span> developers', '<span class="text-purple">backend</span> engineers', '<span class="text-pink">product</span> designers' ], typeSpeed: 70, backSpeed: 40, backDelay: 2000, loop: true, showCursor: false, // use our own cursor contentType: 'html' } 

Process

Estimated Timelines

Cost is calculated individually—contact us and we'll evaluate within 24 hours.

What’s Included

• Source code of components with comments
• Configuration documentation (JSON for strings)
• Deployment instructions (if the project isn't ours)
• 30-day stability guarantee after delivery
• Bug fix support — 2 weeks free

Why Choose GSAP SplitText Over Custom Implementation?

GSAP SplitText is a paid plugin, but it offers built-in stagger, direction, lines, and integration with ScrollTrigger. A custom implementation with Web Animations API is free but requires more code for entrance/exit animations. For simple cases (a single block), manual splitting suffices. For complex ones (3+ sections with different effects), GSAP saves 2–3 development days.

Common Mistakes in Text Animation

• Forgetting to clear timers—memory leak. Use useRef and clearTimeout in the cleanup effect.
• Re-rendering the entire component if strings aren't memoized. Wrap the string array in useMemo.
• Animating without considering prefers-reduced-motion—a11y violation. Disable animation via @media (prefers-reduced-motion: no-preference).
• Generating spans in SSR—server renders a <div> with text, then client splits it into spans, causing layout shift. Solution: split only on client.

How We Guarantee Quality

Our specialists have over 5 years of experience with animations. We use code review, real-device testing, and Core Web Vitals checks. Every project gets its own branch and CI/CD. Contact us to discuss your project—get a free consultation.