GSAP Masked Line Reveal on Scroll
freeOn Scroll
Loading preview
Overview
Headlines and paragraphs that rise out of their own masks, line by line, as they scroll into view. Built on SplitText with autoSplit, so lines re-flow correctly on resize and font load.
Every line sits in an overflow mask and rises into place with a short stagger, so a paragraph reads as one gesture instead of a list of parts. Switch to word-by-word for short phrases and pull quotes.
Details
- Category
- Text
- Interaction
- On Scroll
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 8 componentsBuilt with the same techniques
(02)FAQ
GSAP Masked Line Reveal on Scroll — FAQ
01Will the text flash before it animates?
No. The element stays hidden until it has been split, then the lines rise out of their masks.
02Can it replay when I scroll back up?
Yes: pass replay and it reverses when you scroll back above it, so it plays every time.
03Is SplitText free?
Yes. Since GSAP 3.13 every plugin, SplitText included, is free, including for commercial work.