agentleFS
Sign inStart free
coltonjosephdean-rgbcoltonjosephdean-rgb/Hyperframes-colton.ai.dean/.claude/skills/gsap/SKILL.md

gsap

Skill19 starsChanged 5 months agoMITView on GitHub

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

We split this skill into the rules it gives an agent

9 rules. 0 are common, 5 are distinctive, and 4 are very specific to this project.

  • 0

    Common

    Most of the 20 edited versions we read keep these.

  • 5

    Distinctive

    This author's own choices. Worth a look.

  • 4

    Very specific

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

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

    Always use camelCase property names (e.g.

    line 15
  2. Very specific:

    Prefer GSAP's transform aliases over raw transform string:

    line 30
  3. Distinctive:

    Only on elements that actually animate.

    line 170
  4. Very specific:

    Use stagger instead of separate tweens with manual delays.

    line 185
  5. Distinctive:

    Use camelCase property names.

    line 199
  6. Distinctive:

    Prefer timelines over chaining with delay.

    line 200
  7. Very specific:

    Add labels with addLabel() for readable sequencing.

    line 201
  8. Distinctive:

    Use both svgOrigin and transformOrigin on the same SVG element.

    line 208
  9. Distinctive:

    Create tweens before the DOM exists.

    line 210

“Common” is measured: kept by at least 6 in 10 of the 20 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

GSAP

Core Tween Methods

  • gsap.to(targets, vars) — animate from current state to vars. Most common.
  • gsap.from(targets, vars) — animate from vars to current state (entrances).
  • gsap.fromTo(targets, fromVars, toVars) — explicit start and end.
  • gsap.set(targets, vars) — apply immediately (duration 0).

Always use camelCase property names (e.g. backgroundColor, rotationX).

Common vars

  • duration — seconds (default 0.5).
  • delay — seconds before start.
  • ease — "power1.out" (default), "power3.inOut", "back.out(1.7)", "elastic.out(1, 0.3)", "none".
  • stagger — number 0.1 or object: { amount: 0.3, from: "center" }, { each: 0.1, from: "random" }.
  • overwrite — false (default), true, or "auto".
  • repeat — number or -1 for infinite. yoyo — alternates direction with repeat.
  • onComplete, onStart, onUpdate — callbacks.
  • immediateRender — default true for from()/fromTo(). Set false on later tweens targeting the same property+element to avoid overwrite.

Transforms and CSS

Prefer GSAP's transform aliases over raw transform string:

GSAP propertyEquivalent
x, y, ztranslateX/Y/Z (px)
xPercent, yPercenttranslateX/Y in %
scale, scaleX, scaleYscale
rotationrotate (deg)
rotationX, rotationY3D rotate
skewX, skewYskew
transformOrigintransform-origin
  • autoAlpha — prefer over opacity. At 0: also sets visibility: hidden.
  • CSS variables — "--hue": 180.
  • svgOrigin (SVG only) — global SVG coordinate space origin. Don't combine with transformOrigin.
  • Directional rotation — "360_cw", "-170_short", "90_ccw".
  • clearProps — "all" or comma-separated; removes inline styles on complete.
  • Relative values — "+=20", "-=10", "*=2".

Function-Based Values

gsap.to(".item", {
  x: (i, target, targets) => i * 50,
  stagger: 0.1,
});

Easing

Built-in eases: power1–power4, back, bounce, circ, elastic, expo, sine. Each has .in, .out, .inOut.

Defaults

gsap.defaults({ duration: 0.6, ease: "power2.out" });

Controlling Tweens

const tween = gsap.to(".box", { x: 100 });
tween.pause();
tween.play();
tween.reverse();
tween.kill();
tween.progress(0.5);
tween.time(0.2);

gsap.matchMedia() (Responsive + Accessibility)

Runs setup only when a media query matches; auto-reverts when it stops matching.

let mm = gsap.matchMedia();
mm.add(
  {
    isDesktop: "(min-width: 800px)",
    reduceMotion: "(prefers-reduced-motion: reduce)",
  },
  (context) => {
    const { isDesktop, reduceMotion } = context.conditions;
    gsap.to(".box", {
      rotation: isDesktop ? 360 : 180,
      duration: reduceMotion ? 0 : 2,
    });
  },
);

Timelines

Creating a Timeline

const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });

Position Parameter

Third argument controls placement:

  • Absolute: 1 — at 1s
  • Relative: "+=0.5" — after end; "-=0.2" — before end
  • Label: "intro", "intro+=0.3"
  • Alignment: "<" — same start as previous; ">" — after previous ends; "<0.2" — 0.2s after previous starts
tl.to(".a", { x: 100 }, 0);
tl.to(".b", { y: 50 }, "<"); // same start as .a
tl.to(".c", { opacity: 0 }, "<0.2"); // 0.2s after .b starts

Labels

tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.addLabel("outro", "+=0.5");
tl.play("outro");
tl.tweenFromTo("intro", "outro");

Timeline Options

  • paused: true — create paused; call .play() to start.
  • repeat, yoyo — apply to whole timeline.
  • defaults — vars merged into every child tween.

Nesting Timelines

const master = gsap.timeline();
const child = gsap.timeline();
child.to(".a", { x: 100 }).to(".b", { y: 50 });
master.add(child, 0);

Playback Control

tl.play(), tl.pause(), tl.reverse(), tl.restart(), tl.time(2), tl.progress(0.5), tl.kill().

Performance

Prefer Transform and Opacity

Animating x, y, scale, rotation, opacity stays on the compositor. Avoid width, height, top, left when transforms achieve the same effect.

will-change

will-change: transform;

Only on elements that actually animate.

gsap.quickTo() for Frequent Updates

let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
  yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
container.addEventListener("mousemove", (e) => {
  xTo(e.pageX);
  yTo(e.pageY);
});

Stagger > Many Tweens

Use stagger instead of separate tweens with manual delays.

Cleanup

Pause or kill off-screen animations.

References (loaded on demand)

  • references/effects.md — Drop-in effects: typewriter text, audio visualizer. Read when needing ready-made effect patterns for HyperFrames.

Best Practices

  • Use camelCase property names; prefer transform aliases and autoAlpha.
  • Prefer timelines over chaining with delay; use the position parameter.
  • Add labels with addLabel() for readable sequencing.
  • Pass defaults into timeline constructor.
  • Store tween/timeline return value when controlling playback.

Do Not

  • Animate layout properties (width/height/top/left) when transforms suffice.
  • Use both svgOrigin and transformOrigin on the same SVG element.
  • Chain animations with delay when a timeline can sequence them.
  • Create tweens before the DOM exists.
  • Skip cleanup — always kill tweens when no longer needed.

Download now (ZIP)

  • Other versions34 projects use a version of this.

    Edited · 12

    1. CristianOlivera1/openvid★ 2.8k78% same
    2. boraoztunc/skills★ 33778% same
    3. notivn/AIEV★ 13297% same
    4. anton-abyzov/vskill★ 4878% same
    5. delorenj/skills★ 1878% same
    6. ilya-makarov-dev/Reframe★ 1698% same
    7. hoanghd218/claude-code-2-days★ 878% same
    8. NexumAI-online/skills-edicion★ 426% same
    9. Biznomad/claude-skills★ 078% same
    10. Fldicoahkiin/WalDrive★ 078% same

    2 more not listed

    Wrote their own version · 10

    1. Jwuthri/Tracely-ai★ 1.5ksame name
    2. jwuthri-cloud/Tracely-ai★ 1.2ksame name
    3. AThevon/genjutsu★ 717same name
    4. Mindrally/skills★ 275same name
    5. sanyamk23/aphanis★ 3same name
    6. display-design-studio/skills★ 2same name
    7. SkotAlexsander/skills★ 1same name
    8. davidanthonyn/claude-skills★ 0same name
    9. lavine888/frontend-index★ 0same name
    10. mae616/ai-tech-knowledge★ 0same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use cut-mistakes, cut-silences and 9 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
  • In this repository11 other files it gives its agents.

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