Animated Text Section
A GSAP ScrollTrigger section that progressively reveals paragraph words as the user scrolls, with keyword highlighting.
AnimatedTextSection wraps <p> children in individual word spans and drives their opacity through a pinned ScrollTrigger. Words fade in sequentially during the first 70 % of the scroll range, then fade out again in the final 30 %, creating a typewriter-then-erase rhythm. Words matching a built-in keyword list (animations, visibility, react, components, etc.) receive a persistent highlight class throughout the sequence.
The component pins itself (pin: true) for the duration of the scroll animation, so give the page enough scroll room — the pin length scales with word count.
Installation
npx shadcn@latest add @adv/animated-text-sectionUsage
import AnimatedTextSection from '@/components/AnimatedTextSection';
<AnimatedTextSection>
<p>
Scroll-driven animations give visibility to your content. Build playful,
dynamic react components with useEffect and refs.
</p>
</AnimatedTextSection>Example
Scroll-driven animations bring visibility and dynamic life to static content. Words reveal on scroll using GSAP ScrollTrigger and highlight keywords like animations, react, and components.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Required. Should contain one or more <p> elements; their text nodes are split into word spans by the animation hook. |
className | string | "" | Additional classes applied to the outer <section> element. |