agentleFS
Sign inStart free
wrg32786wrg32786/aigent-design-system/skills/gsap-scroll-choreography/SKILL.md

gsap-scroll-choreography

Skill4 starsChanged 3 months agoMITView on GitHub

Design and implement one coherent GSAP scroll timeline for cinematic websites, pinned media, scene transitions, copy beats, and video state. Use when native reveals no longer express the page sequence clearly.

The file

We split this skill into the rules it gives an agent

5 rules. About 0 are common, 4 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈4

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use GSAP for coordination, not decoration.

    line 8
  2. Distinctive:

    use labels for meaningful beats

    line 37
  3. Distinctive:

    avoid layout reads and writes inside repeated callbacks

    line 48
  4. Very specific:

    do not leave broad will-change

    line 49
  5. Distinctive:

    Use actual page copy and actual media.

    line 55

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

GSAP Scroll Choreography

Use GSAP for coordination, not decoration.

Read

  • page context and dominant visual idea
  • integrations/gsap/README.md
  • docs/cinematic-scroll-deck-playbook.md when video is involved

Timeline design

Define before code:

  • page boundary
  • chapter boundaries
  • pinned ranges
  • approved rest states
  • active media
  • copy source of truth
  • forward and reverse behavior
  • mobile adaptation
  • reduced-motion state

Build one inspectable timeline per sequence. Do not scatter unrelated ScrollTriggers across every element.

Rules

  • content is readable before it leaves
  • copy motion follows composition
  • one property owner per state
  • use labels for meaningful beats
  • video seeks at a bounded cadence
  • transitions receive enough distance to read
  • reverse travel restores state
  • pinning does not trap the page
  • mobile does not inherit desktop scroll distances blindly
  • reduced motion keeps every chapter available

Performance

  • animate transforms, opacity, masks, clip paths, and deliberate material properties
  • avoid layout reads and writes inside repeated callbacks
  • do not leave broad will-change
  • load media near use
  • kill timelines and listeners when the surface unmounts

Verify

Use actual page copy and actual media. Click and scroll through every state at desktop and mobile sizes. Check keyboard controls for guided experiences.

Tool syntax belongs in official GSAP documentation. This skill owns the page choreography and quality bar.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free