Animate word-by-word masked text reveals on scroll with GSAP ScrollTrigger.
npx skills add https://github.com/MengTo/Skills --skill masked-reveal
Please help me install this Agent Skill. Skill: masked-reveal Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/masked-reveal Command: npx skills add https://github.com/MengTo/Skills --skill masked-reveal
Masked staggered word reveals make headings and editorial copy feel premium without relying on paid text-splitting plugins or sacrificing spaces and accessibility.
Apply the data-masked-reveal markup to your heading text and initialize the GSAP ScrollTrigger word reveal behavior with the provided initMaskedReveals call.
High-intent search queries and answers about installing and using this skill.
Masked text reveal animations on scroll are created by splitting text into word wrappers with HTML spans and animating yPercent from an overflow mask using GSAP ScrollTrigger stagger. This approach avoids paid text-splitting plugins while preserving spaces.
You can animate scroll-triggered text reveals without the SplitText plugin by building word wrappers with HTML spans manually. This non-SplitText implementation preserves spaces and screen reader accessibility while achieving premium staggered headline motion.
GSAP ScrollTrigger text animations respect prefers-reduced-motion by showing static text for users who prefer reduced motion. The implementation keeps screen readers accurate via aria-label while hiding animated text until ready.
The best way to animate hero copy and section titles in a React web animation system is using GSAP ScrollTrigger with a masked overflow approach. This provides SPA-safe cleanup and word-by-word reveals suitable for editorial snippets and UI motion systems.
To initialize scroll reveal behavior, apply the data-masked-reveal markup to your heading text and call the provided initMaskedReveals function. This sets up the GSAP ScrollTrigger word reveal behavior for your web UI scenarios.
SensLiaoAutomate GSAP web animations including scroll interactions, text reveal, and parallax.
wubq511Implement declarative web animations with Framer Motion and React.
CrazySwamiCreate GSAP animations with ScrollTrigger and reduced-motion fallbacks.
MicrockAnimate text with GSAP SplitText, TextPlugin, and ScrambleTextPlugin.
