Split Text Stagger Reveal

1. Add the stylesheet and the optional pre-paint gate inside your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add a reveal target to your HTML <body>:

In your downloadThe working code for this step, in index.html.

3. Add GSAP, SplitText, optional ScrollTrigger, and the effect before </body>:

In your downloadThe working code for this step, in index.html.

ScrollTrigger is only required when using data-split-reveal-scroll. SplitText is free with GSAP.

The effect requires only a text element carrying data-split-reveal, GSAP, and SplitText. A trigger hook chooses when it runs; data-split-reveal-auto is the smallest setup. The cinematic preset looks best when a wrapping element clips the moving glyphs and the split target itself provides perspective:

In your downloadThe working code for this step, in style.css.

For a multi-line editorial lockup, wrap each designed line in a block with overflow: hidden, as the demo does; the same trick masks fade-left line reveals if you put overflow: hidden on the paragraph itself.

Two pieces of CSS are not decoration and are easy to miss:

• The .has-js pre-hide gate above. Without it the untouched text paints at full size and then jumps to the reveal's start state. It is gated on the class so a visitor with no JavaScript, or a blocked CDN, still sees the text.
• display on line targets. The script sets display: inline-block on every split target, which is what chars and words need and what lines must not have, or the lines flow into each other. When you use data-split-reveal-type="lines", add:

In your downloadThe working code for this step, in style.css.

Everything else in the demo is presentation: the grey ground, the blue accent, the Mona Sans display type, the masthead, the passage rules, the replay button and the spacing. Delete or replace them freely. script.js queries only the documented behavior hooks below and does not depend on any demo class.

Triggers can be combined. Use a real <button> for replay so keyboard operation works without extra code.

Initialization waits for document.fonts.ready before SplitText measures the headline. A debounced resize handler reverts and rebuilds each split so line and character positions follow responsive type changes. destroy() kills the instance timeline and calls SplitText.revert(); the page-level teardown also removes every registered listener, delayed call, owned ScrollTrigger, and split instance.

If your application swaps fonts after initial load, call instance.refresh() after the new font's FontFace.load() promise resolves.

• Reduced-motion visitors receive the complete, sharp title without animation in both CSS and JavaScript.
• If GSAP or SplitText is blocked, the script removes .has-js so the original text remains visible.
• With JavaScript disabled, the head gate never runs and the original document stays readable.
• Replay uses a native button, and hover-triggered reveals also respond to focus and touch.
• SplitText reverts to the original semantic text during cleanup.

Modern browsers with ES2015 support. Internet Explorer 11 is not supported.

• GSAP 3.15.0+
• SplitText 3.15.0+
• ScrollTrigger 3.15.0+ only for scroll-triggered reveals
• No Lenis dependency