GSAP Letter by Letter Text Reveal on Scroll
Overview
A pinned paragraph that writes itself as you scroll: every letter rises out of its word, tilted and blurred, then sharpens from grey into the text colour. Highlighted words get a hand-drawn underline, and letters bounce under the cursor.
The section pins while it reveals. Each letter rises out of its word's mask, tilted and out of focus, then straightens and sharpens; a beat later it settles from a starting grey into the text colour, so a soft grey front runs just ahead of the finished words.
Details
- Category
- Text
- Interaction
- On Scroll + On Hover
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 20 componentsBuilt with the same techniques
No. 002 / Text
GSAP Masked Line Reveal on Scroll
On Scroll
No. 020 / Preloader
GSAP Column Preloader & Blooming Lily Hero Section
On Load · On Scroll · Mouse Move · On Hover
No. 019 / Scroll
GSAP Pinned Service Cards with Animated Reveals
On Scroll · On Hover · Mouse Move · On Click
(02)FAQ
GSAP Letter by Letter Text Reveal on Scroll — FAQ
01Can I use it without highlighted words?
Yes. highlight is optional: leave it out and every letter settles into the text colour, with no accent and no underline. To keep the accent but drop the line, pass underline={false}.
02Does it work on a dark background?
Yes. Set the text colour in className and pass a dark grey as fromColor, like the demo does, so the letters start dim instead of bright.
03How do I make the reveal faster or slower?
Pass scrollLength, the pinned scroll distance in % of the screen height: 150 is quick, 400 is slow. By default it's 6% per letter, kept between 150 and 400.
04Will the text flash before it animates?
No. The letters stay hidden until the animation takes over, and only when motion is allowed, so people with reduced motion just see the text.