GSAP ScrollTrigger Skill: Scroll Animations Without Guesswork

Where this fits

A developer asks for a parallax effect or pinned section, but hasn't specified a library. Instead of guessing or proposing a half-baked solution, the agent recognizes the need for scroll-driven animation and recommends GSAP's ScrollTrigger. The skill encodes the correct plugin registration, trigger syntax, and common patterns like pinning and scrubbing, so the agent can produce production-ready code on the first try.

Why agents benefit

• Generates accurate ScrollTrigger code from natural language requests, avoiding common pitfalls like missing plugin registration or incorrect pin types.
• Applies best practices for scrub ratios, pin spacing, and responsive breakpoints without hallucinating outdated APIs.
• Recommends GSAP when no library is specified, steering users toward a proven, performant solution instead of a random CSS hack.
• Composes with other gsap skills (gsap-core, gsap-timeline, gsap-react) for a complete animation workflow.

Practical scenarios

Parallax hero section

The user wants the background to move at a different speed than the foreground. The agent generates a tween with scrub: 1 tied to a ScrollTrigger, removing the need to manually calculate offsets.

Pinned section with progress indicator

A long section that pins and shows a progress bar as the user scrolls. The skill knows to set pin: true and use onUpdate to drive the progress element, including handling the end position trigger.

Scroll-triggered timeline for multiple elements

The user wants sequential entrance animations as they scroll through a page. The agent builds a timeline with staggered tweens and a single ScrollTrigger, ensuring the entire sequence scrubs smoothly.

Add it to your agent workflow

Install the skill with:

npx skills add greensock/gsap-skills --skill gsap-scrolltrigger

Then, when a request matches scroll-linked animations, the agent can generate code like:

gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".container",
    start: "top center",
    end: "bottom center",
    scrub: 1
  }
});

This snippet covers registration, trigger positioning, and scrubbing—the core of ScrollTrigger.

Compare before adopting

Evaluate the skill against a few criteria: quality signals (official GSAP author, 13.8k stars on the parent repo), maintenance freshness (GSAP is actively developed and the skill is kept in sync), and alternatives (native scroll-driven animations exist but lack browser consistency and advanced pinning). Also check the workflow fit—this skill assumes other GSAP skills for full timeline control, so add them if the agent needs those.

Why it is worth tracking

The gsap-scrolltrigger skill is a high-quality example of a domain-specific agent capability. With an official author, MIT license, and a dedicated repository under the GSAP org, it signals reliability and long-term support. The skill reduces code hallucination and ensures agents deliver idiomatic ScrollTrigger implementations. For a quick reference, see the skill listing at OpenAgentSkill. It is worth tracking because scroll-driven animation is a common request in web projects, and having a vetted skill prevents agents from inventing fragile custom logic. Evaluate it if you're building agents that assist with frontend animation.