SplitText Hero Reveal
DEMO COMMING SOON
Setup & Installation Guide
01 Set visibility hidden on the heading
Start with visibility hidden in the HTML attribute. This prevents the unstyled text from flashing before GSAP sets up the split.
02 Add line mask CSS
SplitText wraps each line in a span. The overflow hidden on .line clips the characters that start at yPercent 110 so they're invisible until animated.
03 Split inside document.fonts.ready + rAF
Wrap everything in document.fonts.ready.then(() => requestAnimationFrame(() => ...)) so SplitText measures text after your custom font has loaded. Skipping this causes incorrect split positions with web fonts.
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/SplitText.min.js"></script><h1 class="hero-heading" style="visibility: hidden">
Build with precision.
</h1>
.hero-heading {
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 500;
letter-spacing: -0.06em;
line-height: 1.02;
color: #0f0f0f;
}
/* SplitText injects spans — mask each line to prevent char tails clipping */
.hero-heading .line {
display: block;
line-height: inherit;
overflow: hidden;
}
// SplitText Hero Reveal — GSAP
// Requires GSAP + SplitText plugin (GSAP Club or free trial)
// <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
// <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/SplitText.min.js"></script>
gsap.registerPlugin(SplitText);
document.fonts.ready.then(() => {
requestAnimationFrame(() => {
const heading = document.querySelector('.hero-heading');
if (!heading) return;
// Split into chars inside line wrappers (mask lines to hide yPercent offset)
const split = SplitText.create(heading, {
type: 'lines,chars',
mask: 'lines',
linesClass: 'line',
});
// Hide chars below the line mask BEFORE making heading visible
gsap.set(split.chars, { yPercent: 110 });
heading.style.visibility = 'visible';
gsap.to(split.chars, {
yPercent: 0,
duration: 0.9,
stagger: 0.025,
ease: 'power3.out',
delay: 0.1,
});
});
});
Explore More
Custom Cursor
Build a two-part custom cursor — a sharp inner dot and a lagging outer ring — using GSAP quickTo for silky 60fps tracking.
Magnetic Button
Build a cursor-following magnetic button using GSAP quickTo. Drop in a single data attribute and the effect works on any button — no class name changes needed.