domains / families / design / staggered-word-reveal

staggered-word-reveal

separate

Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view detection.

When to use

• short headline reveal
• intro text animation
• pull quote reveal
• premium portfolio headlines
• hero copy animation
• section intros
• short marketing text
• cinematic staggered reveal

When not to use

• long paragraphs
• heavy GSAP SplitText behavior
• text containing links
• text containing buttons
• text with meaningful inline markup
• letter-by-letter staggering
• bounce effects
• rotation effects

Skill page

Source