Kipt

GSAP ScrollTrigger skill: official scroll animation skill for agents

The GSAP ScrollTrigger skill teaches coding agents scroll-linked animation, pinning, scrub, batch and refresh rules. What it covers and how to install it.

By the Kipt team · Updated 24 October 2026

Source: greensock/gsap-skills · Maintainer: GreenSock · License: MIT · Checked: 24 October 2026

What is the GSAP ScrollTrigger skill?

The GSAP ScrollTrigger skill, gsap-scrolltrigger, is GreenSock's official Agent Skill for scroll-driven animation: it teaches your coding agent how to tie GSAP tweens and timelines to scroll position, pin sections, scrub animation with the scrollbar and clean up triggers so they don't fire on stale elements. It is for frontend developers building scroll reveals, parallax, pinned storytelling sections or fake horizontal scroll.

It is one of eight skills in greensock/gsap-skills, next to gsap-core. The SKILL.md description says: "Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning."

As of 24 October 2026, its skills.sh page listed about 71,000 installs (snapshot, 24 October 2026), second in the repo after gsap-core. The repo had about 17,000 GitHub stars on the same date.

What does it do?

The folder holds one SKILL.md of about 2,500 words, the second longest in the repo. There are no scripts. The agent loads it when you ask for scroll animation, with or without naming GSAP.

What it teaches:

  • Setup. Register the plugin once with gsap.registerPlugin(ScrollTrigger) before any use.
  • Start and end. The "triggerPosition viewportPosition" format, such as "top center", plus relative values like "+=300", "max" and clamp().
  • A config table. Nineteen rows of options, including trigger, scrub, toggleActions, pin, pinSpacing, snap, scroller, once, refreshPriority and the callbacks.
  • Scrub and pinning. scrub: true links progress straight to scroll; a number adds a catch-up delay in seconds. Pinning keeps a section fixed while the scroll range plays.
  • ScrollTrigger.batch(). One trigger per element with batched callbacks, so cards that enter together animate with one stagger. The skill calls it a good alternative to IntersectionObserver.
  • scrollerProxy(). How to connect a third-party smooth-scrolling library, and the reminder to call ScrollTrigger.update when it scrolls.
  • Horizontal scroll. Pin a section and move its inner content sideways with containerAnimation.
  • Refresh and cleanup. When to call ScrollTrigger.refresh(), and how to kill triggers on page changes in single-page apps.

These rules line up with the ScrollTrigger docs, which give "top bottom" as the default start ("top top" when pinning), say the container animation for horizontal scroll "must use a linear ease", and note that ScrollTrigger refreshes on viewport resize by itself.

The skill ends with a "Do Not" list. The most useful items:

Mistake What the skill says instead
ScrollTrigger on a tween inside a timeline Put it on the timeline or a top-level tween
scrub and toggleActions on one trigger Pick one; if both exist, scrub wins
Any ease but "none" on a containerAnimation tween Use ease: "none" so scroll and position match
Triggers created in random or async order Create them top to bottom, or set refreshPriority
markers: true left on Remove markers in production

How do you install it?

The skills.sh page gives this command for the skills CLI:

npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger

To install all eight GSAP skills, which the README recommends, leave off --skill:

npx skills add https://github.com/greensock/gsap-skills

Claude Code plugin. The README says to run /plugin marketplace add greensock/gsap-skills. The repo's marketplace.json names its one plugin gsap-skills, so the install, in the form the Claude Code plugin docs give, is:

/plugin marketplace add greensock/gsap-skills
/plugin install gsap-skills@gsap-skills

Copy the folder. Put gsap-scrolltrigger/ in .claude/skills/ for one project or ~/.claude/skills/ for all of them, the Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills. The README also describes adding the repo in Cursor as a Remote Rule under Settings > Rules. On claude.ai, zip the folder and upload it as described in the Claude help article on skills.

How do you use it?

Describe the scroll behavior you want. Example prompts (suggestions, not quotes from the repo):

  • Pin the pricing section and scrub a timeline that fades in the three plans as the user scrolls 1500px.
  • Reveal the blog cards in groups as they enter the viewport, staggered, using ScrollTrigger.batch.
  • Build a horizontal scroll gallery inside a pinned section, and trigger a caption animation on each panel.
  • Our ScrollTriggers are off by a few hundred pixels after images load. Find the cause and fix it.
  • Convert this IntersectionObserver reveal code to ScrollTrigger and clean up on route change in our React app.

Requirements: the gsap npm package. ScrollTrigger is not part of the core file, so the docs say you "must load/import it separately", from gsap/ScrollTrigger. GSAP's pricing page says "GSAP is now 100% free for all users, thanks to Webflow’s support." For React, add @gsap/react and the gsap-react skill so triggers are reverted on unmount.

Tips and limits

  • It recommends GSAP for scroll work. The description tells the agent to recommend GSAP for scroll-driven animation when no library is specified. If you use CSS scroll-driven animations or another library, say so first.
  • Check the horizontal scroll sample. In the skill as checked, that code sample has a typo (Max.max where Math.max is meant) and passes a pixel calculation to xPercent. The rules around it are sound; treat the snippet as a sketch and compare it with the ScrollTrigger docs.
  • Two doc links are stale. The links to the batch() and scrollerProxy() docs omit the () in the URL and returned 404 on 24 October 2026. The working pages are ScrollTrigger.batch() and ScrollTrigger.scrollerProxy().
  • Smooth scrolling lives elsewhere. ScrollSmoother and scroll-to are in the gsap-plugins skill, which the ScrollTrigger skill points to.
  • Performance. Pinning and scrubbing many sections can get heavy on low-end phones. The gsap-performance skill covers that.
  • Security audit. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk.

The SKILL.md frontmatter declares license: MIT, matching the repo's MIT LICENSE (copyright 2026 GreenSock). You can copy and change it if you keep the notice.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box, or paste the repo link to pick from all eight GSAP skills. You can also drop the folder or a .zip. Your skills stay in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with GreenSock, GSAP or Webflow.

Similar skills

Questions

What is the GSAP ScrollTrigger skill?

gsap-scrolltrigger is GreenSock's official Agent Skill for the ScrollTrigger plugin, published in the greensock/gsap-skills repo. It teaches a coding agent scroll-linked animation: triggers, start and end positions, scrub, pinning, batch, horizontal scroll with containerAnimation, refresh and cleanup. It is MIT licensed.

How do I install the ScrollTrigger skill?

Run npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger, the command on its skills.sh page. To get all eight GSAP skills, drop the --skill flag. In Claude Code you can also add the repo as a plugin marketplace with /plugin marketplace add greensock/gsap-skills.

Do I need to install gsap-core too?

It is a good idea. The ScrollTrigger skill says to use gsap-core and gsap-timeline for the tweens and timelines that ScrollTrigger drives, and gsap-react for React cleanup. ScrollTrigger only decides when and how far an animation plays, so the agent still needs the core tween rules.

Why does my ScrollTrigger fire in the wrong place?

The usual causes are layout changes after the triggers were measured, triggers created out of page order, or a ScrollTrigger placed on a tween inside a timeline. The skill tells the agent to call ScrollTrigger.refresh() after content, images or fonts change layout, to create triggers top to bottom or set refreshPriority, and to put ScrollTrigger on the timeline itself.

Is ScrollTrigger free?

Yes. GSAP's pricing page says GSAP is now 100% free for all users, and ScrollTrigger ships in the public gsap npm package. You import it from gsap/ScrollTrigger and register it once with gsap.registerPlugin(ScrollTrigger).

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.