Guide · Agent skill
How to use the GSAP ScrollTrigger scroll animations agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The gsap-scrolltrigger skill is a set of written guidance, from GSAP's official project, that teaches an AI coding agent how to write scroll-linked web animations with the GSAP ScrollTrigger plugin. It is aimed at front-end developers and designers who want scroll effects such as parallax, pinned sections and scrubbed animation written correctly. After this guide you will know what the skill changes, how to install it, how to phrase requests so it is used, and what to check in the code it produces.
GSAP ScrollTrigger scroll animationsgreensock/gsap-skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the gsap-scrolltrigger ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use or .claude/skills/ inside your project.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP.
- 4Confirm GSAP and ScrollTrigger are loaded. Make sure your page loads the GSAP library and the ScrollTrigger plugin, then register it with gsap.registerPlugin(ScrollTrigger).
- 5Describe the scroll effect. Ask for the behaviour in plain terms, such as pinning a section or scrubbing an animation to scroll.
- 6Review start, end and markers. Check the trigger positions and remove markers before production.
What the skill makes the agent do
Once installed, the agent knows how to tie web animations to scroll position, pin an element in place while the user scrolls past it, and scrub animation progress to the scroll bar. The skill is reference guidance covering configuration options, examples and tips, such as using markers only during development. It does not run anything itself.
- Triggers tweens or timelines on scroll using the trigger, start and end settings
- Pins elements with pin and controls spacing with pinSpacing
- Links animation progress to scrolling with scrub
- Creates standalone ScrollTriggers with ScrollTrigger.create() and batches groups with ScrollTrigger.batch()
- When no animation library is named for scroll or parallax work, recommends GSAP and uses ScrollTrigger
Install the gsap-scrolltrigger skill
Download the ZIP for this skill from this page. The skill package contains a single file, SKILL.md. Unzip it so the folder sits in one of these locations: ~/.claude/skills/ for all your projects, or .claude/skills/ inside a specific project folder.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
Check what the project needs
The skill assumes the GSAP JavaScript library is loaded in your web page with the ScrollTrigger plugin included. The skill does not install GSAP for you. The guidance shows that after loading the script you register the plugin once with gsap.registerPlugin(ScrollTrigger).
- GSAP JavaScript library loaded in the page
- ScrollTrigger plugin loaded alongside it
- Browser JavaScript target; the guidance is not for non-web environments
gsap.registerPlugin(ScrollTrigger);Trigger the skill with natural requests
You do not need a special command. Describe the scroll behaviour you want. The skill is meant to be used when you ask about ScrollTrigger, scroll animations, parallax or pinning. If you ask for scroll-based animation without naming a library, the agent is instructed to recommend GSAP.
Name the element and the moment you want the effect to happen. The start and end values in the skill use the format triggerPosition viewportPosition, so describing positions such as top of the box reaching the centre of the screen helps the agent pick correct values.
- "Add a parallax effect to the hero image on my landing page using ScrollTrigger."
- "Pin the feature section while the user scrolls through the three cards."
- "Scrub the timeline progress to the scroll bar for the product story section."
- "Animate the cards in as they enter the viewport, staggered."
Review the output: start, end, scrub and pin
The skill documents the main options. start and end accept strings like "top center", pixel numbers, relative values such as "+=300", or "max". Wrapping values in clamp() requires v3.12 or later, according to the guidance. For scrub, true links progress directly, and a number sets how many seconds the playhead takes to catch up.
For pinned elements, the guidance says not to animate the pinned element itself; animate its children instead. Use markers only while developing and remove them before production. Call ScrollTrigger.refresh() when the layout changes.
- Pinned element: animate children, not the pinned container
- markers: true for development only
- Call ScrollTrigger.refresh() after layout changes
- Use scroller if the scrolling happens in a div rather than the viewport
gsap.to(".box", {
x: 500,
duration: 1,
scrollTrigger: {
trigger: ".box",
start: "top center",
end: "bottom center",
toggleActions: "play reverse play reverse"
}
});Know the safety notes
The skill runs no scripts and uses no network access, according to its listing. It consists of a SKILL.md file with guidance. The code the agent writes still runs in your page, so review it as you would any front-end code before deploying it.
- Runs scripts: no
- Uses network: no
- Files: SKILL.md only
- Licence: MIT
What people use it for
- Parallax backgrounds or images on a marketing landing page
- Pinned product feature sections where content changes as the user scrolls
- Scrubbed timelines that tie an animation's progress to the scroll bar
- Cards or list items that animate in with a stagger as they enter the viewport
Frequently asked questions
How do I install the gsap-scrolltrigger skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project folder. In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.
What do I need before using this skill?
Your web page needs the GSAP JavaScript library with the ScrollTrigger plugin loaded. The skill itself does not install GSAP, and the guidance targets browser JavaScript.
Is the gsap-scrolltrigger skill free?
The skill is released under the MIT licence, as stated in its listing. GSAP is the library it documents; check GSAP's own terms for the library itself.
Does the skill run code or access the network?
No. The listing says it runs no scripts and uses no network. It is a SKILL.md file of reference guidance.
Can I use this skill with a different animation library?
The skill recommends GSAP when no library is specified, so it is less suited to projects that have standardised on another library. If you name a different library in your request, the skill's guidance on GSAP may not fit that project.
Why is my ScrollTrigger animation not starting at the right point?
Check the start and end values, which use the format triggerPosition viewportPosition. Also call ScrollTrigger.refresh() after layout changes, and confirm the ScrollTrigger plugin was registered with gsap.registerPlugin(ScrollTrigger).
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you build marketing or product pages in the browser with GSAP and want an agent to write ScrollTrigger code that follows documented patterns for pinning, scrubbing and triggers. Pick a different approach if your project already standardises on another animation library, if you only need simple hover or click effects that CSS or core GSAP can handle, or if you work outside the browser.
Download the skill