{"id":6860,"plugin_id":"Plugin_d72b815ecf6481919e3beede9c71ef08","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T22:49:17.732Z","digest":"12a7c9d87338f6b015fc30f8173e072dbf10f691a41f4eb4e0445b4ab8a18fd5","against":null,"payload":{"description":"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.","included_files":[{"relative_path":"agents/openai.yaml","size_in_bytes":99},{"relative_path":"references/effects.md","size_in_bytes":8761},{"relative_path":"scripts/extract-audio-data.py","size_in_bytes":6463}],"name":"gsap","skill_md_contents":"---\nname: gsap\ndescription: 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.\n---\n\n# GSAP\n\n## Core Tween Methods\n\n- **gsap.to(targets, vars)** — animate from current state to `vars`. Most common.\n- **gsap.from(targets, vars)** — animate from `vars` to current state (entrances).\n- **gsap.fromTo(targets, fromVars, toVars)** — explicit start and end.\n- **gsap.set(targets, vars)** — apply immediately (duration 0).\n\nAlways use **camelCase** property names (e.g. `backgroundColor`, `rotationX`).\n\n## Common vars\n\n- **duration** — seconds (default 0.5).\n- **delay** — seconds before start.\n- **ease** — `\"power1.out\"` (default), `\"power3.inOut\"`, `\"back.out(1.7)\"`, `\"elastic.out(1, 0.3)\"`, `\"none\"`.\n- **stagger** — number `0.1` or object: `{ amount: 0.3, from: \"center\" }`, `{ each: 0.1, from: \"random\" }`.\n- **overwrite** — `false` (default), `true`, or `\"auto\"`.\n- **repeat** — number or `-1` for infinite. **yoyo** — alternates direction with repeat.\n- **onComplete**, **onStart**, **onUpdate** — callbacks.\n- **immediateRender** — default `true` for from()/fromTo(). Set `false` on later tweens targeting the same property+element to avoid overwrite.\n\n## Transforms and CSS\n\nPrefer GSAP's **transform aliases** over raw `transform` string:\n\n| GSAP property               | Equivalent          |\n| --------------------------- | ------------------- |\n| `x`, `y`, `z`               | translateX/Y/Z (px) |\n| `xPercent`, `yPercent`      | translateX/Y in %   |\n| `scale`, `scaleX`, `scaleY` | scale               |\n| `rotation`                  | rotate (deg)        |\n| `rotationX`, `rotationY`    | 3D rotate           |\n| `skewX`, `skewY`            | skew                |\n| `transformOrigin`           | transform-origin    |\n\n- **autoAlpha** — prefer over `opacity`. At 0: also sets `visibility: hidden`.\n- **CSS variables** — `\"--hue\": 180`.\n- **svgOrigin** _(SVG only)_ — global SVG coordinate space origin. Don't combine with `transformOrigin`.\n- **Directional rotation** — `\"360_cw\"`, `\"-170_short\"`, `\"90_ccw\"`.\n- **clearProps** — `\"all\"` or comma-separated; removes inline styles on complete.\n- **Relative values** — `\"+=20\"`, `\"-=10\"`, `\"*=2\"`.\n\n## Function-Based Values\n\n```javascript\ngsap.to(\".item\", {\n  x: (i, target, targets) => i * 50,\n  stagger: 0.1,\n});\n```\n\n## Easing\n\nBuilt-in eases: `power1`–`power4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine`. Each has `.in`, `.out`, `.inOut`.\n\n## Defaults\n\n```javascript\ngsap.defaults({ duration: 0.6, ease: \"power2.out\" });\n```\n\n## Controlling Tweens\n\n```javascript\nconst tween = gsap.to(\".box\", { x: 100 });\ntween.pause();\ntween.play();\ntween.reverse();\ntween.kill();\ntween.progress(0.5);\ntween.time(0.2);\n```\n\n## gsap.matchMedia() (Responsive + Accessibility)\n\nRuns setup only when a media query matches; auto-reverts when it stops matching.\n\n```javascript\nlet mm = gsap.matchMedia();\nmm.add(\n  {\n    isDesktop: \"(min-width: 800px)\",\n    reduceMotion: \"(prefers-reduced-motion: reduce)\",\n  },\n  (context) => {\n    const { isDesktop, reduceMotion } = context.conditions;\n    gsap.to(\".box\", {\n      rotation: isDesktop ? 360 : 180,\n      duration: reduceMotion ? 0 : 2,\n    });\n  },\n);\n```\n\n---\n\n## Timelines\n\n### Creating a Timeline\n\n```javascript\nconst tl = gsap.timeline({ defaults: { duration: 0.5, ease: \"power2.out\" } });\ntl.to(\".a\", { x: 100 }).to(\".b\", { y: 50 }).to(\".c\", { opacity: 0 });\n```\n\n### Position Parameter\n\nThird argument controls placement:\n\n- **Absolute**: `1` — at 1s\n- **Relative**: `\"+=0.5\"` — after end; `\"-=0.2\"` — before end\n- **Label**: `\"intro\"`, `\"intro+=0.3\"`\n- **Alignment**: `\"<\"` — same start as previous; `\">\"` — after previous ends; `\"<0.2\"` — 0.2s after previous starts\n\n```javascript\ntl.to(\".a\", { x: 100 }, 0);\ntl.to(\".b\", { y: 50 }, \"<\"); // same start as .a\ntl.to(\".c\", { opacity: 0 }, \"<0.2\"); // 0.2s after .b starts\n```\n\n### Labels\n\n```javascript\ntl.addLabel(\"intro\", 0);\ntl.to(\".a\", { x: 100 }, \"intro\");\ntl.addLabel(\"outro\", \"+=0.5\");\ntl.play(\"outro\");\ntl.tweenFromTo(\"intro\", \"outro\");\n```\n\n### Timeline Options\n\n- **paused: true** — create paused; call `.play()` to start.\n- **repeat**, **yoyo** — apply to whole timeline.\n- **defaults** — vars merged into every child tween.\n\n### Nesting Timelines\n\n```javascript\nconst master = gsap.timeline();\nconst child = gsap.timeline();\nchild.to(\".a\", { x: 100 }).to(\".b\", { y: 50 });\nmaster.add(child, 0);\n```\n\n### Playback Control\n\n`tl.play()`, `tl.pause()`, `tl.reverse()`, `tl.restart()`, `tl.time(2)`, `tl.progress(0.5)`, `tl.kill()`.\n\n---\n\n## Performance\n\n### Prefer Transform and Opacity\n\nAnimating `x`, `y`, `scale`, `rotation`, `opacity` stays on the compositor. Avoid `width`, `height`, `top`, `left` when transforms achieve the same effect.\n\n### will-change\n\n```css\nwill-change: transform;\n```\n\nOnly on elements that actually animate.\n\n### gsap.quickTo() for Frequent Updates\n\n```javascript\nlet xTo = gsap.quickTo(\"#id\", \"x\", { duration: 0.4, ease: \"power3\" }),\n  yTo = gsap.quickTo(\"#id\", \"y\", { duration: 0.4, ease: \"power3\" });\ncontainer.addEventListener(\"mousemove\", (e) => {\n  xTo(e.pageX);\n  yTo(e.pageY);\n});\n```\n\n### Stagger > Many Tweens\n\nUse `stagger` instead of separate tweens with manual delays.\n\n### Cleanup\n\nPause or kill off-screen animations.\n\n---\n\n## References (loaded on demand)\n\n- **[references/effects.md](references/effects.md)** — Drop-in effects: typewriter text, audio visualizer. Read when needing ready-made effect patterns for HyperFrames.\n\n## Best Practices\n\n- Use camelCase property names; prefer transform aliases and autoAlpha.\n- Prefer timelines over chaining with delay; use the position parameter.\n- Add labels with `addLabel()` for readable sequencing.\n- Pass defaults into timeline constructor.\n- Store tween/timeline return value when controlling playback.\n\n## Do Not\n\n- Animate layout properties (width/height/top/left) when transforms suffice.\n- Use both svgOrigin and transformOrigin on the same SVG element.\n- Chain animations with delay when a timeline can sequence them.\n- Create tweens before the DOM exists.\n- Skip cleanup — always kill tweens when no longer needed.\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}