agentleFS
Sign inStart free
RuneStone-TechRuneStone-Tech/optimize-anything/skills/motion/gsap/SKILL.md

gsap

Skill1 starsChanged 8 days agoMITView on GitHub

Audit how a codebase uses GSAP, report what's slow or broken, agree a plan, then fix. GSAP is a mature engine whose problems congregate in a few spots: React effects that leak contexts and revert nothing, ScrollTrigger wired twice (or not at all), heavy logic inside onUpdate/ticker callbacks, timelines recreated on every render, and responsive/reduced-motion behavior left to chance. Report first, plan approved, then edit. Read the animation files the script flagged. Load references as fit: What the script can't…

37 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use cut-mistakes, cut-silences and 10 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • nateherkaiSkill

    cut-mistakes

    Agent 2 of the video editing pipeline. Finds and removes spoken mistakes — stutters, repeated words, false starts, and retakes (re-recorded lines) — from a talking-head recording. Use after cut-silences, when asked to cut mistakes, remove stutters / repeats / filler restarts, clean up flubs, or keep the best take. Works review-gated: it proposes every cut with context and a reason for approval, then renders only the approved cuts via ffmpeg. Requires a word-level transcript.

    Also in 5 projects that use this

  • nateherkaiSkill

    cut-silences

    Agent 1 of the video editing pipeline. Removes silences and dead air from a talking-head recording. Use when asked to cut silences, trim pauses, remove dead air / gaps, or tighten the pacing of a raw video, given a word-level transcript. Produces an edit list (EDL), a re-timed transcript for downstream agents, and optionally the cut video via ffmpeg. Does NOT cut mistakes, repeats, or false starts — that is the cut-mistakes agent.

    Also in 5 projects that use this

  • FldicoahkiinSkill

    contribute-catalog

    Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

    Also in 4 projects that use this

  • NexumAI-onlineSkill

    short-form-edit

    Convertí una grabación hablada en un reel, YouTube Short o anuncio corto terminado, con apertura que genere curiosidad, resolución respaldada por el contenido, cortes narrativos, gráficos sincronizados, B-roll en movimiento, subtítulos, música sutil y efectos. Para videos largos usá edit-video; para quitar sólo pausas, cut-silences.

    Also in 4 projects that use this

  • anton-abyzovSkill

    waapi

    Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.

    Also in 5 projects that use this

  • Google CloudSkill

    video-storytelling

    Cinematic video ad storytelling expertise. Covers 3-act narrative structure, emotional arcs, camera motion, scene transitions, and voiceover pacing for 10-second commercial video ads using Gemini Omni. Load this skill when generating video ads or storylines.

    Also in 5 projects that use this

  • +2 more from nateherkai

The file

We split this skill into the rules it gives an agent

3 rules. 0 are common, 1 is distinctive, and 2 are very specific to this project.

  • 0

    Common

    Most of the 35 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 2

    Very specific

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

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Run python <skill-dir>/scripts/audit.py <project-root> [--json] — detects plugin lineage, gsap.context/useGSAP usage vs bare-timeline …

    line 15
  2. Distinctive:

    Read the animation files the script flagged.

    line 19
  3. Very specific:

    Contexts describe lifecycles: Every imperative gsap call belongs in gsap.context() (or the useGSAP hook) with a revert.

    line 53

“Common” is measured: kept by at least 6 in 10 of the 35 edited versions of this file we could read. “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

name: gsap-optimizer description: Audit and optimize GSAP usage — React lifecycle with useGSAP (@gsap/react) vs bare useEffect, refactor/revert cleanup, ScrollTrigger wiring and containerAnimation/scrub correctness, ticker-driven Lenis/r3f sync, timeline compose-and-revert patterns, matchMedia for responsive animation and reduced motion, per-frame callback weight (quickSetter/quickTo vs direct transforms), and licensing awareness around premium plugins. Report with evidence and a plan approved before edits. Use when the user mentions GSAP, gsap.to/timelines, ScrollTrigger jank, useGSAP, ScrollSmoother, performance issues in scroll-linked animation, or cleanup/StrictMode reports about gsap -- even if they don't say "optimize".

GSAP Optimizer

Audit how a codebase uses GSAP, report what's slow or broken, agree a plan, then fix. GSAP is a mature engine whose problems congregate in a few spots: React effects that leak contexts and revert nothing, ScrollTrigger wired twice (or not at all), heavy logic inside onUpdate/ticker callbacks, timelines recreated on every render, and responsive/reduced-motion behavior left to chance. Report first, plan approved, then edit.

Workflow

1. Scope (quick)

  • Project root (package.json with gsap; note @gsap/react and which plugins are imported).
  • Run python <skill-dir>/scripts/audit.py <project-root> [--json] — detects plugin lineage, gsap.context/useGSAP usage vs bare-timeline patterns, cleanup gaps in framework files, ScrollTrigger refresh wiring, onUpdate/onFrame callback weights, timeline re-creation per render, and matchMedia/reduced-motion coverage.

2. Audit

Read the animation files the script flagged. Load references as fit:

AreaReference
React/node lifecycle — useGSAP, gsap.context().revert()references/react-context.md
ScrollTrigger wiring, scrub, Lenis/r3f ticker syncreferences/scrolltrigger.md
Per-frame cost, quickSetter/quickTo, responsive matchMedia, a11yreferences/perf-responsive.md

What the script can't see: whether timelines actually revert (unmount test), whether scroll-linked animations drift/probe the DOM per frame, and what the Interactions actually animate (transform only or layout). Confirm by reading and by unmounting tests in the app.

Mark findings Confirmed or Suspected.

3. Report

Fill in assets/report-template.md, save as GSAP_REPORT.md in the project root. Group: lifecycle/leaks, ScrollTrigger wiring, per-frame cost, responsive/a11y.

4. Plan — stop for approval

  1. Quick wins — add context.revert()/useGSAP where cleanup is missing; dedupe ScrollTrigger.create/refresh; replace layout-animating properties in tweens with transforms.
  2. Structural — convert repeated imperative timelines into shared configs (or gsap.matchMedia-gated variants); use quickSetter/quickTo for per-frame writes; wire reduced motion per matchMedia.
  3. Optional — premium-plugin decisions (licensing), timeline-per-component decomposition, or tweening fewer nodes. Per step: files, expected effect, verification, rollback. Let the user drop or reorder.

5. Fix

Approved items only. GSAP changes are visible motion: verify with unmount tests + interaction runs after each group (typecheck/lint per project conventions).

6. Verify and wrap up

  • Trace before/after if jank was the complaint; unmount isolation confirmed; ScrollTrigger drift check (scroll fast, resize).
  • Reduced-motion and mobile-width checks; report deltas; deferred items + next step.

Principles

  • Contexts describe lifecycles. Every imperative gsap call belongs in gsap.context() (or the useGSAP hook) with a revert; anything else stacks listeners and timelines (StrictMode in dev amplifies into duplicates).
  • Ticker callbacks are the frame budget. onUpdate/gsap.ticker handlers must be lean; per-frame writes go through quickSetter/quickTo.
  • ScrollTrigger is one engine. One create per scope, one hook for Lenis/WS sync; refresh on layout changes (fonts/images), not by polling.
  • Match before you tween. Layout-affecting tweens (left/top/width) reflow every frame; transforms don't. The plan should move targets to transforms unless a layout tween is truly needed (FLIP-style).
  • Responsive + reduced motion are plan items, not afterthoughts: gsap.matchMedia() is the documented structure.
  • Premium plugins are a licensing call, not just a perf choice — propose only what fits, note the license requirement, and don't enable it silently.
  • Measure what you claim. Frame traces, marker counts, trigger counts — state the method.

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.

Reviews can't be read right now.

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