Built for Motion
Log in

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 components

Built 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.