GSAP ScrollTrigger

Connect scroll progress to animation, including pinning, trigger ranges, refresh and teardown.

Motion & interactiongreensock/gsap-skillsMITSources checked: 2026-10-21

See installation steps View original Skill

Features

Set start, end, scrub and pin so motion follows real scroll distance.
Refresh after image loading or resize, and clean up triggers on unmount.

When to use it

Useful for product stories and scroll-based walkthroughs; mobile reading and scrolling need separate checks.

Before you start

Requires a working frontend project and GSAP. Installing this Skill does not add animation dependencies to your app; the GSAP runtime and plugins have their own license.

Usage example

Follow this illustrative workflow, replacing file names and goals with your own project details.

Build a scroll-led product walkthrough

What to prepare: Three product sections, matching images and an existing responsive page.
Workflow: Define section triggers and image progress, refresh after layout settles and keep a natural reading order on small screens.
Expected deliverables: A scroll walkthrough, mobile fallback and checks for duplicate triggers after navigation.

Recommended prompts

Replace the bracketed placeholders, then paste into an AI tool with this skill installed. Prompts follow the interface language; copying preserves the full text and line breaks.

Use the gsap-scrolltrigger Skill for the product walkthrough in [project path]. Read the existing components and interaction constraints, then make the smallest necessary changes while preserving content and keyboard behavior. Check late-loading images, viewport changes, route returns and reduced motion and provide a usable reduced-motion fallback. Report only checks actually run; do not claim unmeasured performance improvements.

Review the product walkthrough just implemented, focusing on late-loading images, viewport changes, route returns and reduced motion. Confirm that content remains readable and usable without motion, repeated navigation does not accumulate animations or listeners, and list fixes plus environments not yet verified.

Supported AI tools

Claude CodeTerminal in your project folder
CodexTerminal in your project folder
CursorTerminal in your project folder
Gemini CLITerminal in your project folder
OpenCodeTerminal in your project folder

These tools appear in the Skills CLI support list. Task results depend on the model, project and required runtime.

Installation

Requires Node.js 22.20 or later. The command selects this skill; follow the installer to confirm its location in the project.

Choose an AI tool

Run in: Terminal in your project folder

Install into the selected tool with Skills CLI. The original project also documents other installation methods.

npx skills add greensock/gsap-skills --skill gsap-scrolltrigger -a claude-code

Restart the tool or open a new session, then mention this skill when describing your task.

Check the official setup guide

Source and license

This guide summarizes the original skill definition, README and setup documentation. Models, accounts and external services are provided by their respective tools.

SKILL.md README License terms

The MIT license for GSAP Skills is separate from the GSAP runtime license. Review the GSAP Standard License before using its runtime or plugins. GSAP runtime license