← All Techniques
Typography
3/5

Kinetic Typography

Text that moves, transforms, and reveals — type as motion design.

Overview

Kinetic typography treats text not as static content but as a dynamic medium. Letters split apart, words assemble on scroll, sentences transform based on user interaction. When done right, it creates "wow" moments that are inseparable from the message. The technique ranges from subtle (a word fading in letter-by-letter) to dramatic (sentences rearranging on scroll). The key is that the motion must serve the message — text animation for its own sake feels gratuitous. Performance is critical: animating individual characters requires careful DOM management. CSS animations are preferred over JS for simple effects. For complex choreography, GSAP's SplitText plugin is the standard.

Why It Wins

  • Creates unforgettable first impressions
  • Merges message and medium — the animation IS the content
  • Extremely shareable on social media
  • Demonstrates technical sophistication and craft

Key Principles

  • 01Motion must serve the message, not distract from it
  • 02Limit kinetic type to 1-2 key moments per page
  • 03Ensure text is readable at the end state (animation is a journey, not a destination)
  • 04Use staggered delays for character-by-character reveals (30-50ms between chars)
  • 05Provide a static fallback for prefers-reduced-motion

Anti-Patterns

  • Every heading animated (dilutes impact)
  • Animations that make text unreadable during transition
  • Long animation sequences that block content consumption
  • Letter-spacing animations (looks broken, not cool)

Libraries

Performance

medium cost

Conversion

context-dependent

High engagement but can hurt conversion if it slows down the path to CTA. Use sparingly and only above the fold.

Audience

creativeluxury

Accessibility

Must be fully readable without animation. Screen readers should get the full text, not individual letters.

Pairs Well With

typographyanimationmotionkinetictext