Skip to content
Get packs

GSAP ScrollTrigger scroll animations

Build scroll-linked animations, pinned sections and parallax with GSAP's ScrollTrigger

Source Download skill
Repository
greensock/gsap-skills
Stars
17,719
Licence
MIT
Files
1 file

What it does

Once installed, the agent knows how to write web animations that respond to scrolling: tying motion to scroll position, pinning elements in place while the user scrolls past, and scrubbing animation progress to the scroll bar. When a user asks for scroll-based animation or parallax without naming a library, the agent is instructed to recommend GSAP and use its ScrollTrigger plugin. The skill is reference guidance (configuration options, examples, tips such as using markers only during development) rather than a tool that runs anything itself.

Great for

  • Front-end developers adding scroll effects to marketing or product pages
  • Designers or developers who want an agent to write GSAP ScrollTrigger code correctly
  • Teams that want consistent, documented GSAP usage across a project

Skip it if

  • Projects that already standardise on a different animation library, since the skill pushes GSAP by default when no library is specified
  • Simple hover or click animations that do not need scroll linkage, which are better served by lighter CSS or core GSAP alone
  • Non-web environments, because the guidance targets browser JavaScript

Try asking

  • “Make this hero image move sideways as the user scrolls down the page”
  • “Pin this section while its inner panels animate in one after another”
  • “Add a parallax effect to these background images using GSAP”
  • “Show a progress bar that fills as the user scrolls through an article”
Step-by-step guide: how to use GSAP ScrollTrigger scroll animationsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    gsap-scrolltrigger.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gsap-scrolltrigger.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gsap-scrolltrigger.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the library in your request (for example GSAP ScrollTrigger) if you already use another tool, so the agent does not default to GSAP.
  • Ask the agent to remove the markers option before shipping to production, as the skill itself advises.
  • Mention if your page uses a custom scrollable container or React, since the skill has notes for those cases and will need that context to apply them.

What's inside

  • SKILL.md

Redistributed unmodified from greensock/gsap-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.