Animate a hero with GSAP and SplitText
A local hero page with a coordinated GSAP entrance animation and reduced-motion fallback.
First win
Refreshing the page plays a clean GSAP entrance animation in the browser.
Best for
Web designers learning GSAP
Needs
Claude Code, Browser, Hero copy optional
Example outcome
Refreshing the page reveals a hero with intent.
This preview shows the entrance timeline: eyebrow, character-by-character headline reveal, subhead, button, and an SVG accent.
GSAP
Timeline
SplitText
Reduced motion
On-load entrance
A headline reveals one character at a time.
A single GSAP timeline fades the eyebrow, staggers the SplitText characters, lifts the subhead, scales in the button, and draws the accent in around 1.4 seconds.
Stagger
Power3 ease
matchMedia
01
Character reveal
SplitText splits the headline so each glyph rises with a short stagger.
02
Calm fallback
Reduced motion users see the final hero immediately, with no tweens.