skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

masked-reveal

Creates staggered word-by-word text reveals on scroll using GSAP ScrollTrigger and overflow masks.

Updated May 5, 2026
Search Tags:#frontend#gsap#scrolltrigger#scroll animation#text animation#css mask#word reveal
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill masked-reveal-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: masked-reveal
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/masked-reveal
Command: npx skills add https://github.com/josippapez/ai-setup --skill masked-reveal-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Headlines and hero copy often appear statically on page load, missing the polished editorial feel of scroll-triggered motion. This Skill provides a complete pattern for revealing text word-by-word through an overflow mask as it enters the viewport, without requiring the paid GSAP SplitText plugin. ## Core Features & Use Cases - Masked Word Reveal: Splits text into word spans wrapped in overflow-hidden masks and animates them from yPercent 110 to 0 with a staggered sequence. - Accessibility & Reduced Motion: Preserves the original text via aria-label, keeps spaces intact, and shows static text for users with prefers-reduced-motion enabled. - React Integration: Includes a gsap.context cleanup pattern for SPA routes so ScrollTriggers are properly reverted on unmount. - Use Case: A landing page hero headline should rise word-by-word as the user scrolls to it; apply the data-masked-reveal attribute, include the CSS mask rules, and call initMaskedReveals(). ## Quick Start Add a masked staggered word reveal to my hero headline using GSAP ScrollTrigger with the data-masked-reveal pattern.

Frequently Asked Questions about masked-reveal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a word-by-word text reveal on scroll with GSAP?▼

Split the element's text into word spans wrapped in overflow-hidden mask spans, then animate each word from yPercent 110 to 0 with a stagger of 0.025-0.045s. Trigger the animation with ScrollTrigger when the element's top reaches about 82% of the viewport.

How to split text for animation without GSAP SplitText plugin?▼

Split the element's textContent on whitespace with a regex that preserves spaces, escape HTML entities, and wrap each word in a mask span and inner word span. Set aria-label to the original text so screen readers still get the full sentence.

Does GSAP ScrollTrigger text animation work with React?▼

Yes. Run the reveal initialization inside useLayoutEffect wrapped in gsap.context scoped to a root ref, and return ctx.revert() as the cleanup function. This ensures ScrollTriggers are destroyed on unmount in SPA routes.

How do I handle prefers-reduced-motion in scroll text animations?▼

Check window.matchMedia('(prefers-reduced-motion: reduce)') before initializing and skip the animation entirely. Also include CSS that forces the text visible and removes transforms under the reduced-motion media query.

Why is my masked text invisible before GSAP loads?▼

The CSS hides elements with data-masked-reveal only when the html element has a js class, which the script adds on load. If GSAP fails to run, text stays hidden, so ensure the script executes and sets autoAlpha to 1 after splitting.

When should I avoid word-splitting text animations?▼

Avoid splitting long paragraphs, text containing links, buttons, or meaningful inline markup, since splitting replaces innerHTML and breaks nested elements. Use the effect on short headlines, labels, and section intros for a calmer editorial feel.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

animating-scroll-reveals

Implements scroll-triggered animations with CSS classes and GSAP ScrollTrigger.

Official
Intermediate
langgeniuslanggenius

masked-reveal

Creates staggered word-by-word scroll reveal animations using GSAP ScrollTrigger and overflow masks.

Official
Intermediate
TenBeltzTenBeltz

gsap-scrolltrigger

Build scroll-driven web animations with GSAP and ScrollTrigger.

Official
Advanced
TMR1905TMR1905

scroll-animation

Implement scroll-driven animations using CSS, Intersection Observer, and GSAP ScrollTrigger.

Community
Intermediate