---
name: "gsap-scrolltrigger-timelines"
description: "Create synchronized, scrubbed scroll animations and pinned sections with GSAP ScrollTrigger."
metadata:
  author: "GreenSock"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create gsap scrolltrigger timeline"
  - "pin section on scroll gsap"
  - "smooth parallax animation gsap"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# GSAP ScrollTrigger Complex Parallax Timelines

Configures GreenSock GSAP timelines with ScrollTrigger: scrub values, pin spacing, snap points, start/end trigger anchors, and responsive matchMedia breakpoints.

## When to Invoke
Invoke this skill whenever you need to:
- create gsap scrolltrigger timeline
- pin section on scroll gsap
- smooth parallax animation gsap

## Execution SOP & Rules
1. Always register plugin with gsap.registerPlugin(ScrollTrigger).
2. Clean up triggers on React component unmount or route change with ctx.revert() using gsap.context().
3. Set scrub: 1 or scrub: true to tie timeline progress directly to scrollbar movement.
4. Avoid animating layout-shifting properties (width, margin); animate transform (x, y, scale) and opacity.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.