Animate on Scroll
The official GreenSock skill for scroll animations with GSAP ScrollTrigger. Your agent gets pinning, scrub, and stagger entrances right, with the cleanup React needs.
Install the skill or give me an instruction how to install it - gsap-scrolltrigger from https://github.com/greensock/gsap-skills Free Open source Works in Claude, Cursor, Codex & more
What it does
Describe the scroll effect you want, parallax, pinned sections, or elements that animate in as they enter the view, and your agent writes it with GSAP ScrollTrigger the way GreenSock actually intends. This is the official GreenSock skill, so instead of the broken patterns a model tends to guess, you get correct triggers, pinning, scrub, and batched entrances.
The output is production-ready. A hero might get a headline that staggers in and stats that count up as you scroll, with reduced-motion handling built in so it respects a visitor's accessibility settings. It covers the ScrollTrigger patterns that are easy to get subtly wrong, which is most of them, so the motion stays smooth rather than janking on the first scroll.
When to use it
- You want animation that reacts to scrolling
Describe the motion, like parallax or a pinned section, and get production-ready ScrollTrigger code.
- Your agent keeps writing broken ScrollTrigger
This is GreenSock's official skill, so you get the patterns the library is actually meant to use, not a model's guess.
- You need scroll motion that respects reduced-motion
Entrances, scrub, and pinning come wired up with reduced-motion handling built in.
FAQ
Do I have to install GSAP myself?
Yes. The gsap-scrolltrigger skill is guidance, not the library. You add GSAP from the public gsap npm package and register the plugin once; the skill makes sure that setup and the animation code around it are correct.
Does it work outside React?
Yes. gsap-scrolltrigger is framework-agnostic and works in plain JavaScript, React, Vue, or Svelte. For React cleanup it points you to the separate gsap-react skill so animations get torn down properly on unmount.
Will the animations break on page changes?
No. The gsap-scrolltrigger skill covers refresh and cleanup, so it recalculates positions after layout changes and kills stale triggers when elements or pages swap out. That stops them firing on elements that no longer exist.
Is it up to date?
Yes. gsap-scrolltrigger targets GSAP 3, the current version, and uses recent APIs like clamp() from v3.12. The patterns follow GreenSock's official guidance rather than older tutorials.
Pairs well with
Polish Your UI
Jakub Krehel Polish a UI with the details that compound: hover states, shadows, borders, spacing, optical alignment, and micro-interactions, applied as you build the frontend.
make-interfaces-feel-better/make-interfaces-feel-better 2.3k 
Make a Motion Graphic
HeyGen Make a short, silent motion graphic where motion is the message: kinetic type, a stat count-up, a chart hit, or a logo sting, usually under 10 seconds. Exports to MP4 or a transparent overlay.
hyperframes/motion-graphics 34.7k