Scroll choreography
GSAP ScrollTrigger
Pinned sections, horizontal scroll, text reveals and parallax timelines with precise scroll control.
A cookbook for scroll-driven storytelling with GSAP: pinned panels, scrubbed timelines, parallax layers and text reveals that stay smooth.
- Scroll patterns
- 10+
- Plugin
- ScrollTrigger
- Cleanup
- React-safe
- Reduced motion
- Required
Live scene
GSAP ScrollTrigger
npm i gsapMITOverview
What GSAP ScrollTrigger actually does
GSAP ScrollTrigger gives precise control over how a page responds to scroll. This skill covers pinned sections, horizontal galleries, scrubbed progress, layered parallax and text reveals, with cleanup patterns for React.
It also includes timing tables and performance guidance, plus reduced-motion alternatives so a cinematic page remains usable.
Capabilities
What it helps your agent ship
Pin sections for controlled storytelling.
Build scrubbed timelines tied to scroll progress.
Create horizontal scroll galleries.
Animate text with line and character reveals.
Layer parallax elements without jank.
Clean up ScrollTrigger instances in React.
Workflow
The process the skill follows
A repeatable sequence keeps the agent from jumping straight into edits before it understands the job.
- 01
Plan the scroll story
Decide what the visitor should understand at each scroll stage before writing timelines.
- 02
Build the timeline
Create one master timeline with explicit labels and progress mapping.
- 03
Attach ScrollTrigger
Configure start, end, scrub, pin and markers for development only.
- 04
Add responsive behaviour
Disable or simplify pinned and horizontal effects on small screens.
- 05
Clean up and test
Kill triggers on unmount and verify performance and reduced-motion behaviour.
Inside the pack
References and modules
These are the load-on-demand files or command groups that make the skill useful beyond a single prompt.
Pinned sections
Pin containers, control spacing and avoid layout jumps.
Scrubbed timelines
Map scroll progress to animation progress with a single timeline.
Horizontal scroll
Convert vertical scroll into a horizontal gallery safely.
Text reveals
Line, word and character animations with readable timing.
Parallax
Layered depth without expensive layout reads.
React cleanup
useGSAP or useEffect cleanup for triggers and timelines.
Use cases
Where it earns its place
Product story page
Pin a product visual while copy and feature callouts advance beside it.
Portfolio case study
Use horizontal scroll and text reveals to guide the reader through the work.
Scroll performance review
Find triggers that cause layout thrash or conflict with reduced-motion settings.
Prompt starters
Try one of these first
Copy a prompt into your agent. Replace the example URL with your own project or page.
Build a pinned product section with a scrubbed GSAP timeline and a mobile fallback.
Add a horizontal scroll gallery with ScrollTrigger and clean it up safely in React.
Audit this scroll experience for performance, accessibility and animation overload.
Keep exploring
Related skills
Want a site that uses this skill properly?
We build Next.js websites with technical SEO, structured data, 3D scenes and motion that stays inside a performance budget.