[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-gsap":3,"mdc--8iwpne-key":39,"related-repo-openai-gsap":3662,"related-org-openai-gsap":3782},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":34,"sourceUrl":37,"mdContent":38},"gsap","create GSAP animations for HyperFrames","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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"HTML","html","tag",{"name":17,"slug":18,"type":15},"Creative","creative",{"name":20,"slug":21,"type":15},"JavaScript","javascript",{"name":23,"slug":24,"type":15},"Animation","animation",{"name":26,"slug":27,"type":15},"Frontend","frontend",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-04-24T05:14:20.174138",null,465,[],{"repoUrl":29,"stars":28,"forks":32,"topics":35,"description":36},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fhyperframes\u002Fskills\u002Fgsap","---\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()\u002FfromTo(). 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\u002FY\u002FZ (px) |\n| `xPercent`, `yPercent`      | translateX\u002FY 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**: `\"\u003C\"` — same start as previous; `\">\"` — after previous ends; `\"\u003C0.2\"` — 0.2s after previous starts\n\n```javascript\ntl.to(\".a\", { x: 100 }, 0);\ntl.to(\".b\", { y: 50 }, \"\u003C\"); \u002F\u002F same start as .a\ntl.to(\".c\", { opacity: 0 }, \"\u003C0.2\"); \u002F\u002F 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\u002Feffects.md](references\u002Feffects.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\u002Ftimeline return value when controlling playback.\n\n## Do Not\n\n- Animate layout properties (width\u002Fheight\u002Ftop\u002Fleft) 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",{"data":40,"body":41},{"name":4,"description":6},{"type":42,"children":43},"root",[44,52,59,121,150,156,360,366,386,580,725,731,909,915,999,1005,1090,1096,1353,1359,1364,1742,1746,1752,1759,2042,2048,2053,2154,2393,2399,2682,2688,2732,2738,2970,2976,3028,3031,3037,3043,3108,3113,3135,3140,3146,3525,3531,3543,3549,3554,3557,3563,3580,3586,3622,3628,3656],{"type":45,"tag":46,"props":47,"children":48},"element","h1",{"id":4},[49],{"type":50,"value":51},"text","GSAP",{"type":45,"tag":53,"props":54,"children":56},"h2",{"id":55},"core-tween-methods",[57],{"type":50,"value":58},"Core Tween Methods",{"type":45,"tag":60,"props":61,"children":62},"ul",{},[63,84,101,111],{"type":45,"tag":64,"props":65,"children":66},"li",{},[67,73,75,82],{"type":45,"tag":68,"props":69,"children":70},"strong",{},[71],{"type":50,"value":72},"gsap.to(targets, vars)",{"type":50,"value":74}," — animate from current state to ",{"type":45,"tag":76,"props":77,"children":79},"code",{"className":78},[],[80],{"type":50,"value":81},"vars",{"type":50,"value":83},". Most common.",{"type":45,"tag":64,"props":85,"children":86},{},[87,92,94,99],{"type":45,"tag":68,"props":88,"children":89},{},[90],{"type":50,"value":91},"gsap.from(targets, vars)",{"type":50,"value":93}," — animate from ",{"type":45,"tag":76,"props":95,"children":97},{"className":96},[],[98],{"type":50,"value":81},{"type":50,"value":100}," to current state (entrances).",{"type":45,"tag":64,"props":102,"children":103},{},[104,109],{"type":45,"tag":68,"props":105,"children":106},{},[107],{"type":50,"value":108},"gsap.fromTo(targets, fromVars, toVars)",{"type":50,"value":110}," — explicit start and end.",{"type":45,"tag":64,"props":112,"children":113},{},[114,119],{"type":45,"tag":68,"props":115,"children":116},{},[117],{"type":50,"value":118},"gsap.set(targets, vars)",{"type":50,"value":120}," — apply immediately (duration 0).",{"type":45,"tag":122,"props":123,"children":124},"p",{},[125,127,132,134,140,142,148],{"type":50,"value":126},"Always use ",{"type":45,"tag":68,"props":128,"children":129},{},[130],{"type":50,"value":131},"camelCase",{"type":50,"value":133}," property names (e.g. ",{"type":45,"tag":76,"props":135,"children":137},{"className":136},[],[138],{"type":50,"value":139},"backgroundColor",{"type":50,"value":141},", ",{"type":45,"tag":76,"props":143,"children":145},{"className":144},[],[146],{"type":50,"value":147},"rotationX",{"type":50,"value":149},").",{"type":45,"tag":53,"props":151,"children":153},{"id":152},"common-vars",[154],{"type":50,"value":155},"Common vars",{"type":45,"tag":60,"props":157,"children":158},{},[159,169,179,226,258,289,314,336],{"type":45,"tag":64,"props":160,"children":161},{},[162,167],{"type":45,"tag":68,"props":163,"children":164},{},[165],{"type":50,"value":166},"duration",{"type":50,"value":168}," — seconds (default 0.5).",{"type":45,"tag":64,"props":170,"children":171},{},[172,177],{"type":45,"tag":68,"props":173,"children":174},{},[175],{"type":50,"value":176},"delay",{"type":50,"value":178}," — seconds before start.",{"type":45,"tag":64,"props":180,"children":181},{},[182,187,189,195,197,203,204,210,211,217,218,224],{"type":45,"tag":68,"props":183,"children":184},{},[185],{"type":50,"value":186},"ease",{"type":50,"value":188}," — ",{"type":45,"tag":76,"props":190,"children":192},{"className":191},[],[193],{"type":50,"value":194},"\"power1.out\"",{"type":50,"value":196}," (default), ",{"type":45,"tag":76,"props":198,"children":200},{"className":199},[],[201],{"type":50,"value":202},"\"power3.inOut\"",{"type":50,"value":141},{"type":45,"tag":76,"props":205,"children":207},{"className":206},[],[208],{"type":50,"value":209},"\"back.out(1.7)\"",{"type":50,"value":141},{"type":45,"tag":76,"props":212,"children":214},{"className":213},[],[215],{"type":50,"value":216},"\"elastic.out(1, 0.3)\"",{"type":50,"value":141},{"type":45,"tag":76,"props":219,"children":221},{"className":220},[],[222],{"type":50,"value":223},"\"none\"",{"type":50,"value":225},".",{"type":45,"tag":64,"props":227,"children":228},{},[229,234,236,242,244,250,251,257],{"type":45,"tag":68,"props":230,"children":231},{},[232],{"type":50,"value":233},"stagger",{"type":50,"value":235}," — number ",{"type":45,"tag":76,"props":237,"children":239},{"className":238},[],[240],{"type":50,"value":241},"0.1",{"type":50,"value":243}," or object: ",{"type":45,"tag":76,"props":245,"children":247},{"className":246},[],[248],{"type":50,"value":249},"{ amount: 0.3, from: \"center\" }",{"type":50,"value":141},{"type":45,"tag":76,"props":252,"children":254},{"className":253},[],[255],{"type":50,"value":256},"{ each: 0.1, from: \"random\" }",{"type":50,"value":225},{"type":45,"tag":64,"props":259,"children":260},{},[261,266,267,273,274,280,282,288],{"type":45,"tag":68,"props":262,"children":263},{},[264],{"type":50,"value":265},"overwrite",{"type":50,"value":188},{"type":45,"tag":76,"props":268,"children":270},{"className":269},[],[271],{"type":50,"value":272},"false",{"type":50,"value":196},{"type":45,"tag":76,"props":275,"children":277},{"className":276},[],[278],{"type":50,"value":279},"true",{"type":50,"value":281},", or ",{"type":45,"tag":76,"props":283,"children":285},{"className":284},[],[286],{"type":50,"value":287},"\"auto\"",{"type":50,"value":225},{"type":45,"tag":64,"props":290,"children":291},{},[292,297,299,305,307,312],{"type":45,"tag":68,"props":293,"children":294},{},[295],{"type":50,"value":296},"repeat",{"type":50,"value":298}," — number or ",{"type":45,"tag":76,"props":300,"children":302},{"className":301},[],[303],{"type":50,"value":304},"-1",{"type":50,"value":306}," for infinite. ",{"type":45,"tag":68,"props":308,"children":309},{},[310],{"type":50,"value":311},"yoyo",{"type":50,"value":313}," — alternates direction with repeat.",{"type":45,"tag":64,"props":315,"children":316},{},[317,322,323,328,329,334],{"type":45,"tag":68,"props":318,"children":319},{},[320],{"type":50,"value":321},"onComplete",{"type":50,"value":141},{"type":45,"tag":68,"props":324,"children":325},{},[326],{"type":50,"value":327},"onStart",{"type":50,"value":141},{"type":45,"tag":68,"props":330,"children":331},{},[332],{"type":50,"value":333},"onUpdate",{"type":50,"value":335}," — callbacks.",{"type":45,"tag":64,"props":337,"children":338},{},[339,344,346,351,353,358],{"type":45,"tag":68,"props":340,"children":341},{},[342],{"type":50,"value":343},"immediateRender",{"type":50,"value":345}," — default ",{"type":45,"tag":76,"props":347,"children":349},{"className":348},[],[350],{"type":50,"value":279},{"type":50,"value":352}," for from()\u002FfromTo(). Set ",{"type":45,"tag":76,"props":354,"children":356},{"className":355},[],[357],{"type":50,"value":272},{"type":50,"value":359}," on later tweens targeting the same property+element to avoid overwrite.",{"type":45,"tag":53,"props":361,"children":363},{"id":362},"transforms-and-css",[364],{"type":50,"value":365},"Transforms and CSS",{"type":45,"tag":122,"props":367,"children":368},{},[369,371,376,378,384],{"type":50,"value":370},"Prefer GSAP's ",{"type":45,"tag":68,"props":372,"children":373},{},[374],{"type":50,"value":375},"transform aliases",{"type":50,"value":377}," over raw ",{"type":45,"tag":76,"props":379,"children":381},{"className":380},[],[382],{"type":50,"value":383},"transform",{"type":50,"value":385}," string:",{"type":45,"tag":387,"props":388,"children":389},"table",{},[390,409],{"type":45,"tag":391,"props":392,"children":393},"thead",{},[394],{"type":45,"tag":395,"props":396,"children":397},"tr",{},[398,404],{"type":45,"tag":399,"props":400,"children":401},"th",{},[402],{"type":50,"value":403},"GSAP property",{"type":45,"tag":399,"props":405,"children":406},{},[407],{"type":50,"value":408},"Equivalent",{"type":45,"tag":410,"props":411,"children":412},"tbody",{},[413,445,469,499,516,539,563],{"type":45,"tag":395,"props":414,"children":415},{},[416,440],{"type":45,"tag":417,"props":418,"children":419},"td",{},[420,426,427,433,434],{"type":45,"tag":76,"props":421,"children":423},{"className":422},[],[424],{"type":50,"value":425},"x",{"type":50,"value":141},{"type":45,"tag":76,"props":428,"children":430},{"className":429},[],[431],{"type":50,"value":432},"y",{"type":50,"value":141},{"type":45,"tag":76,"props":435,"children":437},{"className":436},[],[438],{"type":50,"value":439},"z",{"type":45,"tag":417,"props":441,"children":442},{},[443],{"type":50,"value":444},"translateX\u002FY\u002FZ (px)",{"type":45,"tag":395,"props":446,"children":447},{},[448,464],{"type":45,"tag":417,"props":449,"children":450},{},[451,457,458],{"type":45,"tag":76,"props":452,"children":454},{"className":453},[],[455],{"type":50,"value":456},"xPercent",{"type":50,"value":141},{"type":45,"tag":76,"props":459,"children":461},{"className":460},[],[462],{"type":50,"value":463},"yPercent",{"type":45,"tag":417,"props":465,"children":466},{},[467],{"type":50,"value":468},"translateX\u002FY in %",{"type":45,"tag":395,"props":470,"children":471},{},[472,495],{"type":45,"tag":417,"props":473,"children":474},{},[475,481,482,488,489],{"type":45,"tag":76,"props":476,"children":478},{"className":477},[],[479],{"type":50,"value":480},"scale",{"type":50,"value":141},{"type":45,"tag":76,"props":483,"children":485},{"className":484},[],[486],{"type":50,"value":487},"scaleX",{"type":50,"value":141},{"type":45,"tag":76,"props":490,"children":492},{"className":491},[],[493],{"type":50,"value":494},"scaleY",{"type":45,"tag":417,"props":496,"children":497},{},[498],{"type":50,"value":480},{"type":45,"tag":395,"props":500,"children":501},{},[502,511],{"type":45,"tag":417,"props":503,"children":504},{},[505],{"type":45,"tag":76,"props":506,"children":508},{"className":507},[],[509],{"type":50,"value":510},"rotation",{"type":45,"tag":417,"props":512,"children":513},{},[514],{"type":50,"value":515},"rotate (deg)",{"type":45,"tag":395,"props":517,"children":518},{},[519,534],{"type":45,"tag":417,"props":520,"children":521},{},[522,527,528],{"type":45,"tag":76,"props":523,"children":525},{"className":524},[],[526],{"type":50,"value":147},{"type":50,"value":141},{"type":45,"tag":76,"props":529,"children":531},{"className":530},[],[532],{"type":50,"value":533},"rotationY",{"type":45,"tag":417,"props":535,"children":536},{},[537],{"type":50,"value":538},"3D rotate",{"type":45,"tag":395,"props":540,"children":541},{},[542,558],{"type":45,"tag":417,"props":543,"children":544},{},[545,551,552],{"type":45,"tag":76,"props":546,"children":548},{"className":547},[],[549],{"type":50,"value":550},"skewX",{"type":50,"value":141},{"type":45,"tag":76,"props":553,"children":555},{"className":554},[],[556],{"type":50,"value":557},"skewY",{"type":45,"tag":417,"props":559,"children":560},{},[561],{"type":50,"value":562},"skew",{"type":45,"tag":395,"props":564,"children":565},{},[566,575],{"type":45,"tag":417,"props":567,"children":568},{},[569],{"type":45,"tag":76,"props":570,"children":572},{"className":571},[],[573],{"type":50,"value":574},"transformOrigin",{"type":45,"tag":417,"props":576,"children":577},{},[578],{"type":50,"value":579},"transform-origin",{"type":45,"tag":60,"props":581,"children":582},{},[583,608,624,648,678,695],{"type":45,"tag":64,"props":584,"children":585},{},[586,591,593,599,601,607],{"type":45,"tag":68,"props":587,"children":588},{},[589],{"type":50,"value":590},"autoAlpha",{"type":50,"value":592}," — prefer over ",{"type":45,"tag":76,"props":594,"children":596},{"className":595},[],[597],{"type":50,"value":598},"opacity",{"type":50,"value":600},". At 0: also sets ",{"type":45,"tag":76,"props":602,"children":604},{"className":603},[],[605],{"type":50,"value":606},"visibility: hidden",{"type":50,"value":225},{"type":45,"tag":64,"props":609,"children":610},{},[611,616,617,623],{"type":45,"tag":68,"props":612,"children":613},{},[614],{"type":50,"value":615},"CSS variables",{"type":50,"value":188},{"type":45,"tag":76,"props":618,"children":620},{"className":619},[],[621],{"type":50,"value":622},"\"--hue\": 180",{"type":50,"value":225},{"type":45,"tag":64,"props":625,"children":626},{},[627,632,634,640,642,647],{"type":45,"tag":68,"props":628,"children":629},{},[630],{"type":50,"value":631},"svgOrigin",{"type":50,"value":633}," ",{"type":45,"tag":635,"props":636,"children":637},"em",{},[638],{"type":50,"value":639},"(SVG only)",{"type":50,"value":641}," — global SVG coordinate space origin. Don't combine with ",{"type":45,"tag":76,"props":643,"children":645},{"className":644},[],[646],{"type":50,"value":574},{"type":50,"value":225},{"type":45,"tag":64,"props":649,"children":650},{},[651,656,657,663,664,670,671,677],{"type":45,"tag":68,"props":652,"children":653},{},[654],{"type":50,"value":655},"Directional rotation",{"type":50,"value":188},{"type":45,"tag":76,"props":658,"children":660},{"className":659},[],[661],{"type":50,"value":662},"\"360_cw\"",{"type":50,"value":141},{"type":45,"tag":76,"props":665,"children":667},{"className":666},[],[668],{"type":50,"value":669},"\"-170_short\"",{"type":50,"value":141},{"type":45,"tag":76,"props":672,"children":674},{"className":673},[],[675],{"type":50,"value":676},"\"90_ccw\"",{"type":50,"value":225},{"type":45,"tag":64,"props":679,"children":680},{},[681,686,687,693],{"type":45,"tag":68,"props":682,"children":683},{},[684],{"type":50,"value":685},"clearProps",{"type":50,"value":188},{"type":45,"tag":76,"props":688,"children":690},{"className":689},[],[691],{"type":50,"value":692},"\"all\"",{"type":50,"value":694}," or comma-separated; removes inline styles on complete.",{"type":45,"tag":64,"props":696,"children":697},{},[698,703,704,710,711,717,718,724],{"type":45,"tag":68,"props":699,"children":700},{},[701],{"type":50,"value":702},"Relative values",{"type":50,"value":188},{"type":45,"tag":76,"props":705,"children":707},{"className":706},[],[708],{"type":50,"value":709},"\"+=20\"",{"type":50,"value":141},{"type":45,"tag":76,"props":712,"children":714},{"className":713},[],[715],{"type":50,"value":716},"\"-=10\"",{"type":50,"value":141},{"type":45,"tag":76,"props":719,"children":721},{"className":720},[],[722],{"type":50,"value":723},"\"*=2\"",{"type":50,"value":225},{"type":45,"tag":53,"props":726,"children":728},{"id":727},"function-based-values",[729],{"type":50,"value":730},"Function-Based Values",{"type":45,"tag":732,"props":733,"children":737},"pre",{"className":734,"code":735,"language":21,"meta":736,"style":736},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","gsap.to(\".item\", {\n  x: (i, target, targets) => i * 50,\n  stagger: 0.1,\n});\n","",[738],{"type":45,"tag":76,"props":739,"children":740},{"__ignoreMap":736},[741,793,868,891],{"type":45,"tag":742,"props":743,"children":746},"span",{"class":744,"line":745},"line",1,[747,752,757,763,768,773,779,783,788],{"type":45,"tag":742,"props":748,"children":750},{"style":749},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[751],{"type":50,"value":4},{"type":45,"tag":742,"props":753,"children":755},{"style":754},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[756],{"type":50,"value":225},{"type":45,"tag":742,"props":758,"children":760},{"style":759},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[761],{"type":50,"value":762},"to",{"type":45,"tag":742,"props":764,"children":765},{"style":749},[766],{"type":50,"value":767},"(",{"type":45,"tag":742,"props":769,"children":770},{"style":754},[771],{"type":50,"value":772},"\"",{"type":45,"tag":742,"props":774,"children":776},{"style":775},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[777],{"type":50,"value":778},".item",{"type":45,"tag":742,"props":780,"children":781},{"style":754},[782],{"type":50,"value":772},{"type":45,"tag":742,"props":784,"children":785},{"style":754},[786],{"type":50,"value":787},",",{"type":45,"tag":742,"props":789,"children":790},{"style":754},[791],{"type":50,"value":792}," {\n",{"type":45,"tag":742,"props":794,"children":796},{"class":744,"line":795},2,[797,802,807,812,818,822,827,831,836,841,847,852,857,863],{"type":45,"tag":742,"props":798,"children":799},{"style":759},[800],{"type":50,"value":801},"  x",{"type":45,"tag":742,"props":803,"children":804},{"style":754},[805],{"type":50,"value":806},":",{"type":45,"tag":742,"props":808,"children":809},{"style":754},[810],{"type":50,"value":811}," (",{"type":45,"tag":742,"props":813,"children":815},{"style":814},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[816],{"type":50,"value":817},"i",{"type":45,"tag":742,"props":819,"children":820},{"style":754},[821],{"type":50,"value":787},{"type":45,"tag":742,"props":823,"children":824},{"style":814},[825],{"type":50,"value":826}," target",{"type":45,"tag":742,"props":828,"children":829},{"style":754},[830],{"type":50,"value":787},{"type":45,"tag":742,"props":832,"children":833},{"style":814},[834],{"type":50,"value":835}," targets",{"type":45,"tag":742,"props":837,"children":838},{"style":754},[839],{"type":50,"value":840},")",{"type":45,"tag":742,"props":842,"children":844},{"style":843},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[845],{"type":50,"value":846}," =>",{"type":45,"tag":742,"props":848,"children":849},{"style":749},[850],{"type":50,"value":851}," i ",{"type":45,"tag":742,"props":853,"children":854},{"style":754},[855],{"type":50,"value":856},"*",{"type":45,"tag":742,"props":858,"children":860},{"style":859},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[861],{"type":50,"value":862}," 50",{"type":45,"tag":742,"props":864,"children":865},{"style":754},[866],{"type":50,"value":867},",\n",{"type":45,"tag":742,"props":869,"children":871},{"class":744,"line":870},3,[872,878,882,887],{"type":45,"tag":742,"props":873,"children":875},{"style":874},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[876],{"type":50,"value":877},"  stagger",{"type":45,"tag":742,"props":879,"children":880},{"style":754},[881],{"type":50,"value":806},{"type":45,"tag":742,"props":883,"children":884},{"style":859},[885],{"type":50,"value":886}," 0.1",{"type":45,"tag":742,"props":888,"children":889},{"style":754},[890],{"type":50,"value":867},{"type":45,"tag":742,"props":892,"children":894},{"class":744,"line":893},4,[895,900,904],{"type":45,"tag":742,"props":896,"children":897},{"style":754},[898],{"type":50,"value":899},"}",{"type":45,"tag":742,"props":901,"children":902},{"style":749},[903],{"type":50,"value":840},{"type":45,"tag":742,"props":905,"children":906},{"style":754},[907],{"type":50,"value":908},";\n",{"type":45,"tag":53,"props":910,"children":912},{"id":911},"easing",[913],{"type":50,"value":914},"Easing",{"type":45,"tag":122,"props":916,"children":917},{},[918,920,926,928,934,935,941,942,948,949,955,956,962,963,969,970,976,978,984,985,991,992,998],{"type":50,"value":919},"Built-in eases: ",{"type":45,"tag":76,"props":921,"children":923},{"className":922},[],[924],{"type":50,"value":925},"power1",{"type":50,"value":927},"–",{"type":45,"tag":76,"props":929,"children":931},{"className":930},[],[932],{"type":50,"value":933},"power4",{"type":50,"value":141},{"type":45,"tag":76,"props":936,"children":938},{"className":937},[],[939],{"type":50,"value":940},"back",{"type":50,"value":141},{"type":45,"tag":76,"props":943,"children":945},{"className":944},[],[946],{"type":50,"value":947},"bounce",{"type":50,"value":141},{"type":45,"tag":76,"props":950,"children":952},{"className":951},[],[953],{"type":50,"value":954},"circ",{"type":50,"value":141},{"type":45,"tag":76,"props":957,"children":959},{"className":958},[],[960],{"type":50,"value":961},"elastic",{"type":50,"value":141},{"type":45,"tag":76,"props":964,"children":966},{"className":965},[],[967],{"type":50,"value":968},"expo",{"type":50,"value":141},{"type":45,"tag":76,"props":971,"children":973},{"className":972},[],[974],{"type":50,"value":975},"sine",{"type":50,"value":977},". Each has ",{"type":45,"tag":76,"props":979,"children":981},{"className":980},[],[982],{"type":50,"value":983},".in",{"type":50,"value":141},{"type":45,"tag":76,"props":986,"children":988},{"className":987},[],[989],{"type":50,"value":990},".out",{"type":50,"value":141},{"type":45,"tag":76,"props":993,"children":995},{"className":994},[],[996],{"type":50,"value":997},".inOut",{"type":50,"value":225},{"type":45,"tag":53,"props":1000,"children":1002},{"id":1001},"defaults",[1003],{"type":50,"value":1004},"Defaults",{"type":45,"tag":732,"props":1006,"children":1008},{"className":734,"code":1007,"language":21,"meta":736,"style":736},"gsap.defaults({ duration: 0.6, ease: \"power2.out\" });\n",[1009],{"type":45,"tag":76,"props":1010,"children":1011},{"__ignoreMap":736},[1012],{"type":45,"tag":742,"props":1013,"children":1014},{"class":744,"line":745},[1015,1019,1023,1027,1031,1036,1041,1045,1050,1054,1059,1063,1068,1073,1077,1082,1086],{"type":45,"tag":742,"props":1016,"children":1017},{"style":749},[1018],{"type":50,"value":4},{"type":45,"tag":742,"props":1020,"children":1021},{"style":754},[1022],{"type":50,"value":225},{"type":45,"tag":742,"props":1024,"children":1025},{"style":759},[1026],{"type":50,"value":1001},{"type":45,"tag":742,"props":1028,"children":1029},{"style":749},[1030],{"type":50,"value":767},{"type":45,"tag":742,"props":1032,"children":1033},{"style":754},[1034],{"type":50,"value":1035},"{",{"type":45,"tag":742,"props":1037,"children":1038},{"style":874},[1039],{"type":50,"value":1040}," duration",{"type":45,"tag":742,"props":1042,"children":1043},{"style":754},[1044],{"type":50,"value":806},{"type":45,"tag":742,"props":1046,"children":1047},{"style":859},[1048],{"type":50,"value":1049}," 0.6",{"type":45,"tag":742,"props":1051,"children":1052},{"style":754},[1053],{"type":50,"value":787},{"type":45,"tag":742,"props":1055,"children":1056},{"style":874},[1057],{"type":50,"value":1058}," ease",{"type":45,"tag":742,"props":1060,"children":1061},{"style":754},[1062],{"type":50,"value":806},{"type":45,"tag":742,"props":1064,"children":1065},{"style":754},[1066],{"type":50,"value":1067}," \"",{"type":45,"tag":742,"props":1069,"children":1070},{"style":775},[1071],{"type":50,"value":1072},"power2.out",{"type":45,"tag":742,"props":1074,"children":1075},{"style":754},[1076],{"type":50,"value":772},{"type":45,"tag":742,"props":1078,"children":1079},{"style":754},[1080],{"type":50,"value":1081}," }",{"type":45,"tag":742,"props":1083,"children":1084},{"style":749},[1085],{"type":50,"value":840},{"type":45,"tag":742,"props":1087,"children":1088},{"style":754},[1089],{"type":50,"value":908},{"type":45,"tag":53,"props":1091,"children":1093},{"id":1092},"controlling-tweens",[1094],{"type":50,"value":1095},"Controlling Tweens",{"type":45,"tag":732,"props":1097,"children":1099},{"className":734,"code":1098,"language":21,"meta":736,"style":736},"const tween = gsap.to(\".box\", { x: 100 });\ntween.pause();\ntween.play();\ntween.reverse();\ntween.kill();\ntween.progress(0.5);\ntween.time(0.2);\n",[1100],{"type":45,"tag":76,"props":1101,"children":1102},{"__ignoreMap":736},[1103,1186,1212,1236,1260,1285,1319],{"type":45,"tag":742,"props":1104,"children":1105},{"class":744,"line":745},[1106,1111,1116,1121,1126,1130,1134,1138,1142,1147,1151,1155,1160,1165,1169,1174,1178,1182],{"type":45,"tag":742,"props":1107,"children":1108},{"style":843},[1109],{"type":50,"value":1110},"const",{"type":45,"tag":742,"props":1112,"children":1113},{"style":749},[1114],{"type":50,"value":1115}," tween ",{"type":45,"tag":742,"props":1117,"children":1118},{"style":754},[1119],{"type":50,"value":1120},"=",{"type":45,"tag":742,"props":1122,"children":1123},{"style":749},[1124],{"type":50,"value":1125}," gsap",{"type":45,"tag":742,"props":1127,"children":1128},{"style":754},[1129],{"type":50,"value":225},{"type":45,"tag":742,"props":1131,"children":1132},{"style":759},[1133],{"type":50,"value":762},{"type":45,"tag":742,"props":1135,"children":1136},{"style":749},[1137],{"type":50,"value":767},{"type":45,"tag":742,"props":1139,"children":1140},{"style":754},[1141],{"type":50,"value":772},{"type":45,"tag":742,"props":1143,"children":1144},{"style":775},[1145],{"type":50,"value":1146},".box",{"type":45,"tag":742,"props":1148,"children":1149},{"style":754},[1150],{"type":50,"value":772},{"type":45,"tag":742,"props":1152,"children":1153},{"style":754},[1154],{"type":50,"value":787},{"type":45,"tag":742,"props":1156,"children":1157},{"style":754},[1158],{"type":50,"value":1159}," {",{"type":45,"tag":742,"props":1161,"children":1162},{"style":874},[1163],{"type":50,"value":1164}," x",{"type":45,"tag":742,"props":1166,"children":1167},{"style":754},[1168],{"type":50,"value":806},{"type":45,"tag":742,"props":1170,"children":1171},{"style":859},[1172],{"type":50,"value":1173}," 100",{"type":45,"tag":742,"props":1175,"children":1176},{"style":754},[1177],{"type":50,"value":1081},{"type":45,"tag":742,"props":1179,"children":1180},{"style":749},[1181],{"type":50,"value":840},{"type":45,"tag":742,"props":1183,"children":1184},{"style":754},[1185],{"type":50,"value":908},{"type":45,"tag":742,"props":1187,"children":1188},{"class":744,"line":795},[1189,1194,1198,1203,1208],{"type":45,"tag":742,"props":1190,"children":1191},{"style":749},[1192],{"type":50,"value":1193},"tween",{"type":45,"tag":742,"props":1195,"children":1196},{"style":754},[1197],{"type":50,"value":225},{"type":45,"tag":742,"props":1199,"children":1200},{"style":759},[1201],{"type":50,"value":1202},"pause",{"type":45,"tag":742,"props":1204,"children":1205},{"style":749},[1206],{"type":50,"value":1207},"()",{"type":45,"tag":742,"props":1209,"children":1210},{"style":754},[1211],{"type":50,"value":908},{"type":45,"tag":742,"props":1213,"children":1214},{"class":744,"line":870},[1215,1219,1223,1228,1232],{"type":45,"tag":742,"props":1216,"children":1217},{"style":749},[1218],{"type":50,"value":1193},{"type":45,"tag":742,"props":1220,"children":1221},{"style":754},[1222],{"type":50,"value":225},{"type":45,"tag":742,"props":1224,"children":1225},{"style":759},[1226],{"type":50,"value":1227},"play",{"type":45,"tag":742,"props":1229,"children":1230},{"style":749},[1231],{"type":50,"value":1207},{"type":45,"tag":742,"props":1233,"children":1234},{"style":754},[1235],{"type":50,"value":908},{"type":45,"tag":742,"props":1237,"children":1238},{"class":744,"line":893},[1239,1243,1247,1252,1256],{"type":45,"tag":742,"props":1240,"children":1241},{"style":749},[1242],{"type":50,"value":1193},{"type":45,"tag":742,"props":1244,"children":1245},{"style":754},[1246],{"type":50,"value":225},{"type":45,"tag":742,"props":1248,"children":1249},{"style":759},[1250],{"type":50,"value":1251},"reverse",{"type":45,"tag":742,"props":1253,"children":1254},{"style":749},[1255],{"type":50,"value":1207},{"type":45,"tag":742,"props":1257,"children":1258},{"style":754},[1259],{"type":50,"value":908},{"type":45,"tag":742,"props":1261,"children":1263},{"class":744,"line":1262},5,[1264,1268,1272,1277,1281],{"type":45,"tag":742,"props":1265,"children":1266},{"style":749},[1267],{"type":50,"value":1193},{"type":45,"tag":742,"props":1269,"children":1270},{"style":754},[1271],{"type":50,"value":225},{"type":45,"tag":742,"props":1273,"children":1274},{"style":759},[1275],{"type":50,"value":1276},"kill",{"type":45,"tag":742,"props":1278,"children":1279},{"style":749},[1280],{"type":50,"value":1207},{"type":45,"tag":742,"props":1282,"children":1283},{"style":754},[1284],{"type":50,"value":908},{"type":45,"tag":742,"props":1286,"children":1288},{"class":744,"line":1287},6,[1289,1293,1297,1302,1306,1311,1315],{"type":45,"tag":742,"props":1290,"children":1291},{"style":749},[1292],{"type":50,"value":1193},{"type":45,"tag":742,"props":1294,"children":1295},{"style":754},[1296],{"type":50,"value":225},{"type":45,"tag":742,"props":1298,"children":1299},{"style":759},[1300],{"type":50,"value":1301},"progress",{"type":45,"tag":742,"props":1303,"children":1304},{"style":749},[1305],{"type":50,"value":767},{"type":45,"tag":742,"props":1307,"children":1308},{"style":859},[1309],{"type":50,"value":1310},"0.5",{"type":45,"tag":742,"props":1312,"children":1313},{"style":749},[1314],{"type":50,"value":840},{"type":45,"tag":742,"props":1316,"children":1317},{"style":754},[1318],{"type":50,"value":908},{"type":45,"tag":742,"props":1320,"children":1322},{"class":744,"line":1321},7,[1323,1327,1331,1336,1340,1345,1349],{"type":45,"tag":742,"props":1324,"children":1325},{"style":749},[1326],{"type":50,"value":1193},{"type":45,"tag":742,"props":1328,"children":1329},{"style":754},[1330],{"type":50,"value":225},{"type":45,"tag":742,"props":1332,"children":1333},{"style":759},[1334],{"type":50,"value":1335},"time",{"type":45,"tag":742,"props":1337,"children":1338},{"style":749},[1339],{"type":50,"value":767},{"type":45,"tag":742,"props":1341,"children":1342},{"style":859},[1343],{"type":50,"value":1344},"0.2",{"type":45,"tag":742,"props":1346,"children":1347},{"style":749},[1348],{"type":50,"value":840},{"type":45,"tag":742,"props":1350,"children":1351},{"style":754},[1352],{"type":50,"value":908},{"type":45,"tag":53,"props":1354,"children":1356},{"id":1355},"gsapmatchmedia-responsive-accessibility",[1357],{"type":50,"value":1358},"gsap.matchMedia() (Responsive + Accessibility)",{"type":45,"tag":122,"props":1360,"children":1361},{},[1362],{"type":50,"value":1363},"Runs setup only when a media query matches; auto-reverts when it stops matching.",{"type":45,"tag":732,"props":1365,"children":1367},{"className":734,"code":1366,"language":21,"meta":736,"style":736},"let 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",[1368],{"type":45,"tag":76,"props":1369,"children":1370},{"__ignoreMap":736},[1371,1409,1431,1439,1468,1497,1505,1530,1584,1625,1666,1705,1722,1730],{"type":45,"tag":742,"props":1372,"children":1373},{"class":744,"line":745},[1374,1379,1384,1388,1392,1396,1401,1405],{"type":45,"tag":742,"props":1375,"children":1376},{"style":843},[1377],{"type":50,"value":1378},"let",{"type":45,"tag":742,"props":1380,"children":1381},{"style":749},[1382],{"type":50,"value":1383}," mm ",{"type":45,"tag":742,"props":1385,"children":1386},{"style":754},[1387],{"type":50,"value":1120},{"type":45,"tag":742,"props":1389,"children":1390},{"style":749},[1391],{"type":50,"value":1125},{"type":45,"tag":742,"props":1393,"children":1394},{"style":754},[1395],{"type":50,"value":225},{"type":45,"tag":742,"props":1397,"children":1398},{"style":759},[1399],{"type":50,"value":1400},"matchMedia",{"type":45,"tag":742,"props":1402,"children":1403},{"style":749},[1404],{"type":50,"value":1207},{"type":45,"tag":742,"props":1406,"children":1407},{"style":754},[1408],{"type":50,"value":908},{"type":45,"tag":742,"props":1410,"children":1411},{"class":744,"line":795},[1412,1417,1421,1426],{"type":45,"tag":742,"props":1413,"children":1414},{"style":749},[1415],{"type":50,"value":1416},"mm",{"type":45,"tag":742,"props":1418,"children":1419},{"style":754},[1420],{"type":50,"value":225},{"type":45,"tag":742,"props":1422,"children":1423},{"style":759},[1424],{"type":50,"value":1425},"add",{"type":45,"tag":742,"props":1427,"children":1428},{"style":749},[1429],{"type":50,"value":1430},"(\n",{"type":45,"tag":742,"props":1432,"children":1433},{"class":744,"line":870},[1434],{"type":45,"tag":742,"props":1435,"children":1436},{"style":754},[1437],{"type":50,"value":1438},"  {\n",{"type":45,"tag":742,"props":1440,"children":1441},{"class":744,"line":893},[1442,1447,1451,1455,1460,1464],{"type":45,"tag":742,"props":1443,"children":1444},{"style":874},[1445],{"type":50,"value":1446},"    isDesktop",{"type":45,"tag":742,"props":1448,"children":1449},{"style":754},[1450],{"type":50,"value":806},{"type":45,"tag":742,"props":1452,"children":1453},{"style":754},[1454],{"type":50,"value":1067},{"type":45,"tag":742,"props":1456,"children":1457},{"style":775},[1458],{"type":50,"value":1459},"(min-width: 800px)",{"type":45,"tag":742,"props":1461,"children":1462},{"style":754},[1463],{"type":50,"value":772},{"type":45,"tag":742,"props":1465,"children":1466},{"style":754},[1467],{"type":50,"value":867},{"type":45,"tag":742,"props":1469,"children":1470},{"class":744,"line":1262},[1471,1476,1480,1484,1489,1493],{"type":45,"tag":742,"props":1472,"children":1473},{"style":874},[1474],{"type":50,"value":1475},"    reduceMotion",{"type":45,"tag":742,"props":1477,"children":1478},{"style":754},[1479],{"type":50,"value":806},{"type":45,"tag":742,"props":1481,"children":1482},{"style":754},[1483],{"type":50,"value":1067},{"type":45,"tag":742,"props":1485,"children":1486},{"style":775},[1487],{"type":50,"value":1488},"(prefers-reduced-motion: reduce)",{"type":45,"tag":742,"props":1490,"children":1491},{"style":754},[1492],{"type":50,"value":772},{"type":45,"tag":742,"props":1494,"children":1495},{"style":754},[1496],{"type":50,"value":867},{"type":45,"tag":742,"props":1498,"children":1499},{"class":744,"line":1287},[1500],{"type":45,"tag":742,"props":1501,"children":1502},{"style":754},[1503],{"type":50,"value":1504},"  },\n",{"type":45,"tag":742,"props":1506,"children":1507},{"class":744,"line":1321},[1508,1513,1518,1522,1526],{"type":45,"tag":742,"props":1509,"children":1510},{"style":754},[1511],{"type":50,"value":1512},"  (",{"type":45,"tag":742,"props":1514,"children":1515},{"style":814},[1516],{"type":50,"value":1517},"context",{"type":45,"tag":742,"props":1519,"children":1520},{"style":754},[1521],{"type":50,"value":840},{"type":45,"tag":742,"props":1523,"children":1524},{"style":843},[1525],{"type":50,"value":846},{"type":45,"tag":742,"props":1527,"children":1528},{"style":754},[1529],{"type":50,"value":792},{"type":45,"tag":742,"props":1531,"children":1533},{"class":744,"line":1532},8,[1534,1539,1543,1548,1552,1557,1561,1566,1571,1575,1580],{"type":45,"tag":742,"props":1535,"children":1536},{"style":843},[1537],{"type":50,"value":1538},"    const",{"type":45,"tag":742,"props":1540,"children":1541},{"style":754},[1542],{"type":50,"value":1159},{"type":45,"tag":742,"props":1544,"children":1545},{"style":749},[1546],{"type":50,"value":1547}," isDesktop",{"type":45,"tag":742,"props":1549,"children":1550},{"style":754},[1551],{"type":50,"value":787},{"type":45,"tag":742,"props":1553,"children":1554},{"style":749},[1555],{"type":50,"value":1556}," reduceMotion",{"type":45,"tag":742,"props":1558,"children":1559},{"style":754},[1560],{"type":50,"value":1081},{"type":45,"tag":742,"props":1562,"children":1563},{"style":754},[1564],{"type":50,"value":1565}," =",{"type":45,"tag":742,"props":1567,"children":1568},{"style":749},[1569],{"type":50,"value":1570}," context",{"type":45,"tag":742,"props":1572,"children":1573},{"style":754},[1574],{"type":50,"value":225},{"type":45,"tag":742,"props":1576,"children":1577},{"style":749},[1578],{"type":50,"value":1579},"conditions",{"type":45,"tag":742,"props":1581,"children":1582},{"style":754},[1583],{"type":50,"value":908},{"type":45,"tag":742,"props":1585,"children":1587},{"class":744,"line":1586},9,[1588,1593,1597,1601,1605,1609,1613,1617,1621],{"type":45,"tag":742,"props":1589,"children":1590},{"style":749},[1591],{"type":50,"value":1592},"    gsap",{"type":45,"tag":742,"props":1594,"children":1595},{"style":754},[1596],{"type":50,"value":225},{"type":45,"tag":742,"props":1598,"children":1599},{"style":759},[1600],{"type":50,"value":762},{"type":45,"tag":742,"props":1602,"children":1603},{"style":874},[1604],{"type":50,"value":767},{"type":45,"tag":742,"props":1606,"children":1607},{"style":754},[1608],{"type":50,"value":772},{"type":45,"tag":742,"props":1610,"children":1611},{"style":775},[1612],{"type":50,"value":1146},{"type":45,"tag":742,"props":1614,"children":1615},{"style":754},[1616],{"type":50,"value":772},{"type":45,"tag":742,"props":1618,"children":1619},{"style":754},[1620],{"type":50,"value":787},{"type":45,"tag":742,"props":1622,"children":1623},{"style":754},[1624],{"type":50,"value":792},{"type":45,"tag":742,"props":1626,"children":1628},{"class":744,"line":1627},10,[1629,1634,1638,1642,1647,1652,1657,1662],{"type":45,"tag":742,"props":1630,"children":1631},{"style":874},[1632],{"type":50,"value":1633},"      rotation",{"type":45,"tag":742,"props":1635,"children":1636},{"style":754},[1637],{"type":50,"value":806},{"type":45,"tag":742,"props":1639,"children":1640},{"style":749},[1641],{"type":50,"value":1547},{"type":45,"tag":742,"props":1643,"children":1644},{"style":754},[1645],{"type":50,"value":1646}," ?",{"type":45,"tag":742,"props":1648,"children":1649},{"style":859},[1650],{"type":50,"value":1651}," 360",{"type":45,"tag":742,"props":1653,"children":1654},{"style":754},[1655],{"type":50,"value":1656}," :",{"type":45,"tag":742,"props":1658,"children":1659},{"style":859},[1660],{"type":50,"value":1661}," 180",{"type":45,"tag":742,"props":1663,"children":1664},{"style":754},[1665],{"type":50,"value":867},{"type":45,"tag":742,"props":1667,"children":1669},{"class":744,"line":1668},11,[1670,1675,1679,1683,1687,1692,1696,1701],{"type":45,"tag":742,"props":1671,"children":1672},{"style":874},[1673],{"type":50,"value":1674},"      duration",{"type":45,"tag":742,"props":1676,"children":1677},{"style":754},[1678],{"type":50,"value":806},{"type":45,"tag":742,"props":1680,"children":1681},{"style":749},[1682],{"type":50,"value":1556},{"type":45,"tag":742,"props":1684,"children":1685},{"style":754},[1686],{"type":50,"value":1646},{"type":45,"tag":742,"props":1688,"children":1689},{"style":859},[1690],{"type":50,"value":1691}," 0",{"type":45,"tag":742,"props":1693,"children":1694},{"style":754},[1695],{"type":50,"value":1656},{"type":45,"tag":742,"props":1697,"children":1698},{"style":859},[1699],{"type":50,"value":1700}," 2",{"type":45,"tag":742,"props":1702,"children":1703},{"style":754},[1704],{"type":50,"value":867},{"type":45,"tag":742,"props":1706,"children":1708},{"class":744,"line":1707},12,[1709,1714,1718],{"type":45,"tag":742,"props":1710,"children":1711},{"style":754},[1712],{"type":50,"value":1713},"    }",{"type":45,"tag":742,"props":1715,"children":1716},{"style":874},[1717],{"type":50,"value":840},{"type":45,"tag":742,"props":1719,"children":1720},{"style":754},[1721],{"type":50,"value":908},{"type":45,"tag":742,"props":1723,"children":1725},{"class":744,"line":1724},13,[1726],{"type":45,"tag":742,"props":1727,"children":1728},{"style":754},[1729],{"type":50,"value":1504},{"type":45,"tag":742,"props":1731,"children":1733},{"class":744,"line":1732},14,[1734,1738],{"type":45,"tag":742,"props":1735,"children":1736},{"style":749},[1737],{"type":50,"value":840},{"type":45,"tag":742,"props":1739,"children":1740},{"style":754},[1741],{"type":50,"value":908},{"type":45,"tag":1743,"props":1744,"children":1745},"hr",{},[],{"type":45,"tag":53,"props":1747,"children":1749},{"id":1748},"timelines",[1750],{"type":50,"value":1751},"Timelines",{"type":45,"tag":1753,"props":1754,"children":1756},"h3",{"id":1755},"creating-a-timeline",[1757],{"type":50,"value":1758},"Creating a Timeline",{"type":45,"tag":732,"props":1760,"children":1762},{"className":734,"code":1761,"language":21,"meta":736,"style":736},"const tl = gsap.timeline({ defaults: { duration: 0.5, ease: \"power2.out\" } });\ntl.to(\".a\", { x: 100 }).to(\".b\", { y: 50 }).to(\".c\", { opacity: 0 });\n",[1763],{"type":45,"tag":76,"props":1764,"children":1765},{"__ignoreMap":736},[1766,1869],{"type":45,"tag":742,"props":1767,"children":1768},{"class":744,"line":745},[1769,1773,1778,1782,1786,1790,1795,1799,1803,1808,1812,1816,1820,1824,1829,1833,1837,1841,1845,1849,1853,1857,1861,1865],{"type":45,"tag":742,"props":1770,"children":1771},{"style":843},[1772],{"type":50,"value":1110},{"type":45,"tag":742,"props":1774,"children":1775},{"style":749},[1776],{"type":50,"value":1777}," tl ",{"type":45,"tag":742,"props":1779,"children":1780},{"style":754},[1781],{"type":50,"value":1120},{"type":45,"tag":742,"props":1783,"children":1784},{"style":749},[1785],{"type":50,"value":1125},{"type":45,"tag":742,"props":1787,"children":1788},{"style":754},[1789],{"type":50,"value":225},{"type":45,"tag":742,"props":1791,"children":1792},{"style":759},[1793],{"type":50,"value":1794},"timeline",{"type":45,"tag":742,"props":1796,"children":1797},{"style":749},[1798],{"type":50,"value":767},{"type":45,"tag":742,"props":1800,"children":1801},{"style":754},[1802],{"type":50,"value":1035},{"type":45,"tag":742,"props":1804,"children":1805},{"style":874},[1806],{"type":50,"value":1807}," defaults",{"type":45,"tag":742,"props":1809,"children":1810},{"style":754},[1811],{"type":50,"value":806},{"type":45,"tag":742,"props":1813,"children":1814},{"style":754},[1815],{"type":50,"value":1159},{"type":45,"tag":742,"props":1817,"children":1818},{"style":874},[1819],{"type":50,"value":1040},{"type":45,"tag":742,"props":1821,"children":1822},{"style":754},[1823],{"type":50,"value":806},{"type":45,"tag":742,"props":1825,"children":1826},{"style":859},[1827],{"type":50,"value":1828}," 0.5",{"type":45,"tag":742,"props":1830,"children":1831},{"style":754},[1832],{"type":50,"value":787},{"type":45,"tag":742,"props":1834,"children":1835},{"style":874},[1836],{"type":50,"value":1058},{"type":45,"tag":742,"props":1838,"children":1839},{"style":754},[1840],{"type":50,"value":806},{"type":45,"tag":742,"props":1842,"children":1843},{"style":754},[1844],{"type":50,"value":1067},{"type":45,"tag":742,"props":1846,"children":1847},{"style":775},[1848],{"type":50,"value":1072},{"type":45,"tag":742,"props":1850,"children":1851},{"style":754},[1852],{"type":50,"value":772},{"type":45,"tag":742,"props":1854,"children":1855},{"style":754},[1856],{"type":50,"value":1081},{"type":45,"tag":742,"props":1858,"children":1859},{"style":754},[1860],{"type":50,"value":1081},{"type":45,"tag":742,"props":1862,"children":1863},{"style":749},[1864],{"type":50,"value":840},{"type":45,"tag":742,"props":1866,"children":1867},{"style":754},[1868],{"type":50,"value":908},{"type":45,"tag":742,"props":1870,"children":1871},{"class":744,"line":795},[1872,1877,1881,1885,1889,1893,1898,1902,1906,1910,1914,1918,1922,1926,1930,1934,1938,1942,1946,1951,1955,1959,1963,1968,1972,1976,1980,1984,1988,1992,1996,2000,2005,2009,2013,2017,2022,2026,2030,2034,2038],{"type":45,"tag":742,"props":1873,"children":1874},{"style":749},[1875],{"type":50,"value":1876},"tl",{"type":45,"tag":742,"props":1878,"children":1879},{"style":754},[1880],{"type":50,"value":225},{"type":45,"tag":742,"props":1882,"children":1883},{"style":759},[1884],{"type":50,"value":762},{"type":45,"tag":742,"props":1886,"children":1887},{"style":749},[1888],{"type":50,"value":767},{"type":45,"tag":742,"props":1890,"children":1891},{"style":754},[1892],{"type":50,"value":772},{"type":45,"tag":742,"props":1894,"children":1895},{"style":775},[1896],{"type":50,"value":1897},".a",{"type":45,"tag":742,"props":1899,"children":1900},{"style":754},[1901],{"type":50,"value":772},{"type":45,"tag":742,"props":1903,"children":1904},{"style":754},[1905],{"type":50,"value":787},{"type":45,"tag":742,"props":1907,"children":1908},{"style":754},[1909],{"type":50,"value":1159},{"type":45,"tag":742,"props":1911,"children":1912},{"style":874},[1913],{"type":50,"value":1164},{"type":45,"tag":742,"props":1915,"children":1916},{"style":754},[1917],{"type":50,"value":806},{"type":45,"tag":742,"props":1919,"children":1920},{"style":859},[1921],{"type":50,"value":1173},{"type":45,"tag":742,"props":1923,"children":1924},{"style":754},[1925],{"type":50,"value":1081},{"type":45,"tag":742,"props":1927,"children":1928},{"style":749},[1929],{"type":50,"value":840},{"type":45,"tag":742,"props":1931,"children":1932},{"style":754},[1933],{"type":50,"value":225},{"type":45,"tag":742,"props":1935,"children":1936},{"style":759},[1937],{"type":50,"value":762},{"type":45,"tag":742,"props":1939,"children":1940},{"style":749},[1941],{"type":50,"value":767},{"type":45,"tag":742,"props":1943,"children":1944},{"style":754},[1945],{"type":50,"value":772},{"type":45,"tag":742,"props":1947,"children":1948},{"style":775},[1949],{"type":50,"value":1950},".b",{"type":45,"tag":742,"props":1952,"children":1953},{"style":754},[1954],{"type":50,"value":772},{"type":45,"tag":742,"props":1956,"children":1957},{"style":754},[1958],{"type":50,"value":787},{"type":45,"tag":742,"props":1960,"children":1961},{"style":754},[1962],{"type":50,"value":1159},{"type":45,"tag":742,"props":1964,"children":1965},{"style":874},[1966],{"type":50,"value":1967}," y",{"type":45,"tag":742,"props":1969,"children":1970},{"style":754},[1971],{"type":50,"value":806},{"type":45,"tag":742,"props":1973,"children":1974},{"style":859},[1975],{"type":50,"value":862},{"type":45,"tag":742,"props":1977,"children":1978},{"style":754},[1979],{"type":50,"value":1081},{"type":45,"tag":742,"props":1981,"children":1982},{"style":749},[1983],{"type":50,"value":840},{"type":45,"tag":742,"props":1985,"children":1986},{"style":754},[1987],{"type":50,"value":225},{"type":45,"tag":742,"props":1989,"children":1990},{"style":759},[1991],{"type":50,"value":762},{"type":45,"tag":742,"props":1993,"children":1994},{"style":749},[1995],{"type":50,"value":767},{"type":45,"tag":742,"props":1997,"children":1998},{"style":754},[1999],{"type":50,"value":772},{"type":45,"tag":742,"props":2001,"children":2002},{"style":775},[2003],{"type":50,"value":2004},".c",{"type":45,"tag":742,"props":2006,"children":2007},{"style":754},[2008],{"type":50,"value":772},{"type":45,"tag":742,"props":2010,"children":2011},{"style":754},[2012],{"type":50,"value":787},{"type":45,"tag":742,"props":2014,"children":2015},{"style":754},[2016],{"type":50,"value":1159},{"type":45,"tag":742,"props":2018,"children":2019},{"style":874},[2020],{"type":50,"value":2021}," opacity",{"type":45,"tag":742,"props":2023,"children":2024},{"style":754},[2025],{"type":50,"value":806},{"type":45,"tag":742,"props":2027,"children":2028},{"style":859},[2029],{"type":50,"value":1691},{"type":45,"tag":742,"props":2031,"children":2032},{"style":754},[2033],{"type":50,"value":1081},{"type":45,"tag":742,"props":2035,"children":2036},{"style":749},[2037],{"type":50,"value":840},{"type":45,"tag":742,"props":2039,"children":2040},{"style":754},[2041],{"type":50,"value":908},{"type":45,"tag":1753,"props":2043,"children":2045},{"id":2044},"position-parameter",[2046],{"type":50,"value":2047},"Position Parameter",{"type":45,"tag":122,"props":2049,"children":2050},{},[2051],{"type":50,"value":2052},"Third argument controls placement:",{"type":45,"tag":60,"props":2054,"children":2055},{},[2056,2074,2099,2121],{"type":45,"tag":64,"props":2057,"children":2058},{},[2059,2064,2066,2072],{"type":45,"tag":68,"props":2060,"children":2061},{},[2062],{"type":50,"value":2063},"Absolute",{"type":50,"value":2065},": ",{"type":45,"tag":76,"props":2067,"children":2069},{"className":2068},[],[2070],{"type":50,"value":2071},"1",{"type":50,"value":2073}," — at 1s",{"type":45,"tag":64,"props":2075,"children":2076},{},[2077,2082,2083,2089,2091,2097],{"type":45,"tag":68,"props":2078,"children":2079},{},[2080],{"type":50,"value":2081},"Relative",{"type":50,"value":2065},{"type":45,"tag":76,"props":2084,"children":2086},{"className":2085},[],[2087],{"type":50,"value":2088},"\"+=0.5\"",{"type":50,"value":2090}," — after end; ",{"type":45,"tag":76,"props":2092,"children":2094},{"className":2093},[],[2095],{"type":50,"value":2096},"\"-=0.2\"",{"type":50,"value":2098}," — before end",{"type":45,"tag":64,"props":2100,"children":2101},{},[2102,2107,2108,2114,2115],{"type":45,"tag":68,"props":2103,"children":2104},{},[2105],{"type":50,"value":2106},"Label",{"type":50,"value":2065},{"type":45,"tag":76,"props":2109,"children":2111},{"className":2110},[],[2112],{"type":50,"value":2113},"\"intro\"",{"type":50,"value":141},{"type":45,"tag":76,"props":2116,"children":2118},{"className":2117},[],[2119],{"type":50,"value":2120},"\"intro+=0.3\"",{"type":45,"tag":64,"props":2122,"children":2123},{},[2124,2129,2130,2136,2138,2144,2146,2152],{"type":45,"tag":68,"props":2125,"children":2126},{},[2127],{"type":50,"value":2128},"Alignment",{"type":50,"value":2065},{"type":45,"tag":76,"props":2131,"children":2133},{"className":2132},[],[2134],{"type":50,"value":2135},"\"\u003C\"",{"type":50,"value":2137}," — same start as previous; ",{"type":45,"tag":76,"props":2139,"children":2141},{"className":2140},[],[2142],{"type":50,"value":2143},"\">\"",{"type":50,"value":2145}," — after previous ends; ",{"type":45,"tag":76,"props":2147,"children":2149},{"className":2148},[],[2150],{"type":50,"value":2151},"\"\u003C0.2\"",{"type":50,"value":2153}," — 0.2s after previous starts",{"type":45,"tag":732,"props":2155,"children":2157},{"className":734,"code":2156,"language":21,"meta":736,"style":736},"tl.to(\".a\", { x: 100 }, 0);\ntl.to(\".b\", { y: 50 }, \"\u003C\"); \u002F\u002F same start as .a\ntl.to(\".c\", { opacity: 0 }, \"\u003C0.2\"); \u002F\u002F 0.2s after .b starts\n",[2158],{"type":45,"tag":76,"props":2159,"children":2160},{"__ignoreMap":736},[2161,2229,2312],{"type":45,"tag":742,"props":2162,"children":2163},{"class":744,"line":745},[2164,2168,2172,2176,2180,2184,2188,2192,2196,2200,2204,2208,2212,2217,2221,2225],{"type":45,"tag":742,"props":2165,"children":2166},{"style":749},[2167],{"type":50,"value":1876},{"type":45,"tag":742,"props":2169,"children":2170},{"style":754},[2171],{"type":50,"value":225},{"type":45,"tag":742,"props":2173,"children":2174},{"style":759},[2175],{"type":50,"value":762},{"type":45,"tag":742,"props":2177,"children":2178},{"style":749},[2179],{"type":50,"value":767},{"type":45,"tag":742,"props":2181,"children":2182},{"style":754},[2183],{"type":50,"value":772},{"type":45,"tag":742,"props":2185,"children":2186},{"style":775},[2187],{"type":50,"value":1897},{"type":45,"tag":742,"props":2189,"children":2190},{"style":754},[2191],{"type":50,"value":772},{"type":45,"tag":742,"props":2193,"children":2194},{"style":754},[2195],{"type":50,"value":787},{"type":45,"tag":742,"props":2197,"children":2198},{"style":754},[2199],{"type":50,"value":1159},{"type":45,"tag":742,"props":2201,"children":2202},{"style":874},[2203],{"type":50,"value":1164},{"type":45,"tag":742,"props":2205,"children":2206},{"style":754},[2207],{"type":50,"value":806},{"type":45,"tag":742,"props":2209,"children":2210},{"style":859},[2211],{"type":50,"value":1173},{"type":45,"tag":742,"props":2213,"children":2214},{"style":754},[2215],{"type":50,"value":2216}," },",{"type":45,"tag":742,"props":2218,"children":2219},{"style":859},[2220],{"type":50,"value":1691},{"type":45,"tag":742,"props":2222,"children":2223},{"style":749},[2224],{"type":50,"value":840},{"type":45,"tag":742,"props":2226,"children":2227},{"style":754},[2228],{"type":50,"value":908},{"type":45,"tag":742,"props":2230,"children":2231},{"class":744,"line":795},[2232,2236,2240,2244,2248,2252,2256,2260,2264,2268,2272,2276,2280,2284,2288,2293,2297,2301,2306],{"type":45,"tag":742,"props":2233,"children":2234},{"style":749},[2235],{"type":50,"value":1876},{"type":45,"tag":742,"props":2237,"children":2238},{"style":754},[2239],{"type":50,"value":225},{"type":45,"tag":742,"props":2241,"children":2242},{"style":759},[2243],{"type":50,"value":762},{"type":45,"tag":742,"props":2245,"children":2246},{"style":749},[2247],{"type":50,"value":767},{"type":45,"tag":742,"props":2249,"children":2250},{"style":754},[2251],{"type":50,"value":772},{"type":45,"tag":742,"props":2253,"children":2254},{"style":775},[2255],{"type":50,"value":1950},{"type":45,"tag":742,"props":2257,"children":2258},{"style":754},[2259],{"type":50,"value":772},{"type":45,"tag":742,"props":2261,"children":2262},{"style":754},[2263],{"type":50,"value":787},{"type":45,"tag":742,"props":2265,"children":2266},{"style":754},[2267],{"type":50,"value":1159},{"type":45,"tag":742,"props":2269,"children":2270},{"style":874},[2271],{"type":50,"value":1967},{"type":45,"tag":742,"props":2273,"children":2274},{"style":754},[2275],{"type":50,"value":806},{"type":45,"tag":742,"props":2277,"children":2278},{"style":859},[2279],{"type":50,"value":862},{"type":45,"tag":742,"props":2281,"children":2282},{"style":754},[2283],{"type":50,"value":2216},{"type":45,"tag":742,"props":2285,"children":2286},{"style":754},[2287],{"type":50,"value":1067},{"type":45,"tag":742,"props":2289,"children":2290},{"style":775},[2291],{"type":50,"value":2292},"\u003C",{"type":45,"tag":742,"props":2294,"children":2295},{"style":754},[2296],{"type":50,"value":772},{"type":45,"tag":742,"props":2298,"children":2299},{"style":749},[2300],{"type":50,"value":840},{"type":45,"tag":742,"props":2302,"children":2303},{"style":754},[2304],{"type":50,"value":2305},";",{"type":45,"tag":742,"props":2307,"children":2309},{"style":2308},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[2310],{"type":50,"value":2311}," \u002F\u002F same start as .a\n",{"type":45,"tag":742,"props":2313,"children":2314},{"class":744,"line":870},[2315,2319,2323,2327,2331,2335,2339,2343,2347,2351,2355,2359,2363,2367,2371,2376,2380,2384,2388],{"type":45,"tag":742,"props":2316,"children":2317},{"style":749},[2318],{"type":50,"value":1876},{"type":45,"tag":742,"props":2320,"children":2321},{"style":754},[2322],{"type":50,"value":225},{"type":45,"tag":742,"props":2324,"children":2325},{"style":759},[2326],{"type":50,"value":762},{"type":45,"tag":742,"props":2328,"children":2329},{"style":749},[2330],{"type":50,"value":767},{"type":45,"tag":742,"props":2332,"children":2333},{"style":754},[2334],{"type":50,"value":772},{"type":45,"tag":742,"props":2336,"children":2337},{"style":775},[2338],{"type":50,"value":2004},{"type":45,"tag":742,"props":2340,"children":2341},{"style":754},[2342],{"type":50,"value":772},{"type":45,"tag":742,"props":2344,"children":2345},{"style":754},[2346],{"type":50,"value":787},{"type":45,"tag":742,"props":2348,"children":2349},{"style":754},[2350],{"type":50,"value":1159},{"type":45,"tag":742,"props":2352,"children":2353},{"style":874},[2354],{"type":50,"value":2021},{"type":45,"tag":742,"props":2356,"children":2357},{"style":754},[2358],{"type":50,"value":806},{"type":45,"tag":742,"props":2360,"children":2361},{"style":859},[2362],{"type":50,"value":1691},{"type":45,"tag":742,"props":2364,"children":2365},{"style":754},[2366],{"type":50,"value":2216},{"type":45,"tag":742,"props":2368,"children":2369},{"style":754},[2370],{"type":50,"value":1067},{"type":45,"tag":742,"props":2372,"children":2373},{"style":775},[2374],{"type":50,"value":2375},"\u003C0.2",{"type":45,"tag":742,"props":2377,"children":2378},{"style":754},[2379],{"type":50,"value":772},{"type":45,"tag":742,"props":2381,"children":2382},{"style":749},[2383],{"type":50,"value":840},{"type":45,"tag":742,"props":2385,"children":2386},{"style":754},[2387],{"type":50,"value":2305},{"type":45,"tag":742,"props":2389,"children":2390},{"style":2308},[2391],{"type":50,"value":2392}," \u002F\u002F 0.2s after .b starts\n",{"type":45,"tag":1753,"props":2394,"children":2396},{"id":2395},"labels",[2397],{"type":50,"value":2398},"Labels",{"type":45,"tag":732,"props":2400,"children":2402},{"className":734,"code":2401,"language":21,"meta":736,"style":736},"tl.addLabel(\"intro\", 0);\ntl.to(\".a\", { x: 100 }, \"intro\");\ntl.addLabel(\"outro\", \"+=0.5\");\ntl.play(\"outro\");\ntl.tweenFromTo(\"intro\", \"outro\");\n",[2403],{"type":45,"tag":76,"props":2404,"children":2405},{"__ignoreMap":736},[2406,2455,2530,2587,2626],{"type":45,"tag":742,"props":2407,"children":2408},{"class":744,"line":745},[2409,2413,2417,2422,2426,2430,2435,2439,2443,2447,2451],{"type":45,"tag":742,"props":2410,"children":2411},{"style":749},[2412],{"type":50,"value":1876},{"type":45,"tag":742,"props":2414,"children":2415},{"style":754},[2416],{"type":50,"value":225},{"type":45,"tag":742,"props":2418,"children":2419},{"style":759},[2420],{"type":50,"value":2421},"addLabel",{"type":45,"tag":742,"props":2423,"children":2424},{"style":749},[2425],{"type":50,"value":767},{"type":45,"tag":742,"props":2427,"children":2428},{"style":754},[2429],{"type":50,"value":772},{"type":45,"tag":742,"props":2431,"children":2432},{"style":775},[2433],{"type":50,"value":2434},"intro",{"type":45,"tag":742,"props":2436,"children":2437},{"style":754},[2438],{"type":50,"value":772},{"type":45,"tag":742,"props":2440,"children":2441},{"style":754},[2442],{"type":50,"value":787},{"type":45,"tag":742,"props":2444,"children":2445},{"style":859},[2446],{"type":50,"value":1691},{"type":45,"tag":742,"props":2448,"children":2449},{"style":749},[2450],{"type":50,"value":840},{"type":45,"tag":742,"props":2452,"children":2453},{"style":754},[2454],{"type":50,"value":908},{"type":45,"tag":742,"props":2456,"children":2457},{"class":744,"line":795},[2458,2462,2466,2470,2474,2478,2482,2486,2490,2494,2498,2502,2506,2510,2514,2518,2522,2526],{"type":45,"tag":742,"props":2459,"children":2460},{"style":749},[2461],{"type":50,"value":1876},{"type":45,"tag":742,"props":2463,"children":2464},{"style":754},[2465],{"type":50,"value":225},{"type":45,"tag":742,"props":2467,"children":2468},{"style":759},[2469],{"type":50,"value":762},{"type":45,"tag":742,"props":2471,"children":2472},{"style":749},[2473],{"type":50,"value":767},{"type":45,"tag":742,"props":2475,"children":2476},{"style":754},[2477],{"type":50,"value":772},{"type":45,"tag":742,"props":2479,"children":2480},{"style":775},[2481],{"type":50,"value":1897},{"type":45,"tag":742,"props":2483,"children":2484},{"style":754},[2485],{"type":50,"value":772},{"type":45,"tag":742,"props":2487,"children":2488},{"style":754},[2489],{"type":50,"value":787},{"type":45,"tag":742,"props":2491,"children":2492},{"style":754},[2493],{"type":50,"value":1159},{"type":45,"tag":742,"props":2495,"children":2496},{"style":874},[2497],{"type":50,"value":1164},{"type":45,"tag":742,"props":2499,"children":2500},{"style":754},[2501],{"type":50,"value":806},{"type":45,"tag":742,"props":2503,"children":2504},{"style":859},[2505],{"type":50,"value":1173},{"type":45,"tag":742,"props":2507,"children":2508},{"style":754},[2509],{"type":50,"value":2216},{"type":45,"tag":742,"props":2511,"children":2512},{"style":754},[2513],{"type":50,"value":1067},{"type":45,"tag":742,"props":2515,"children":2516},{"style":775},[2517],{"type":50,"value":2434},{"type":45,"tag":742,"props":2519,"children":2520},{"style":754},[2521],{"type":50,"value":772},{"type":45,"tag":742,"props":2523,"children":2524},{"style":749},[2525],{"type":50,"value":840},{"type":45,"tag":742,"props":2527,"children":2528},{"style":754},[2529],{"type":50,"value":908},{"type":45,"tag":742,"props":2531,"children":2532},{"class":744,"line":870},[2533,2537,2541,2545,2549,2553,2558,2562,2566,2570,2575,2579,2583],{"type":45,"tag":742,"props":2534,"children":2535},{"style":749},[2536],{"type":50,"value":1876},{"type":45,"tag":742,"props":2538,"children":2539},{"style":754},[2540],{"type":50,"value":225},{"type":45,"tag":742,"props":2542,"children":2543},{"style":759},[2544],{"type":50,"value":2421},{"type":45,"tag":742,"props":2546,"children":2547},{"style":749},[2548],{"type":50,"value":767},{"type":45,"tag":742,"props":2550,"children":2551},{"style":754},[2552],{"type":50,"value":772},{"type":45,"tag":742,"props":2554,"children":2555},{"style":775},[2556],{"type":50,"value":2557},"outro",{"type":45,"tag":742,"props":2559,"children":2560},{"style":754},[2561],{"type":50,"value":772},{"type":45,"tag":742,"props":2563,"children":2564},{"style":754},[2565],{"type":50,"value":787},{"type":45,"tag":742,"props":2567,"children":2568},{"style":754},[2569],{"type":50,"value":1067},{"type":45,"tag":742,"props":2571,"children":2572},{"style":775},[2573],{"type":50,"value":2574},"+=0.5",{"type":45,"tag":742,"props":2576,"children":2577},{"style":754},[2578],{"type":50,"value":772},{"type":45,"tag":742,"props":2580,"children":2581},{"style":749},[2582],{"type":50,"value":840},{"type":45,"tag":742,"props":2584,"children":2585},{"style":754},[2586],{"type":50,"value":908},{"type":45,"tag":742,"props":2588,"children":2589},{"class":744,"line":893},[2590,2594,2598,2602,2606,2610,2614,2618,2622],{"type":45,"tag":742,"props":2591,"children":2592},{"style":749},[2593],{"type":50,"value":1876},{"type":45,"tag":742,"props":2595,"children":2596},{"style":754},[2597],{"type":50,"value":225},{"type":45,"tag":742,"props":2599,"children":2600},{"style":759},[2601],{"type":50,"value":1227},{"type":45,"tag":742,"props":2603,"children":2604},{"style":749},[2605],{"type":50,"value":767},{"type":45,"tag":742,"props":2607,"children":2608},{"style":754},[2609],{"type":50,"value":772},{"type":45,"tag":742,"props":2611,"children":2612},{"style":775},[2613],{"type":50,"value":2557},{"type":45,"tag":742,"props":2615,"children":2616},{"style":754},[2617],{"type":50,"value":772},{"type":45,"tag":742,"props":2619,"children":2620},{"style":749},[2621],{"type":50,"value":840},{"type":45,"tag":742,"props":2623,"children":2624},{"style":754},[2625],{"type":50,"value":908},{"type":45,"tag":742,"props":2627,"children":2628},{"class":744,"line":1262},[2629,2633,2637,2642,2646,2650,2654,2658,2662,2666,2670,2674,2678],{"type":45,"tag":742,"props":2630,"children":2631},{"style":749},[2632],{"type":50,"value":1876},{"type":45,"tag":742,"props":2634,"children":2635},{"style":754},[2636],{"type":50,"value":225},{"type":45,"tag":742,"props":2638,"children":2639},{"style":759},[2640],{"type":50,"value":2641},"tweenFromTo",{"type":45,"tag":742,"props":2643,"children":2644},{"style":749},[2645],{"type":50,"value":767},{"type":45,"tag":742,"props":2647,"children":2648},{"style":754},[2649],{"type":50,"value":772},{"type":45,"tag":742,"props":2651,"children":2652},{"style":775},[2653],{"type":50,"value":2434},{"type":45,"tag":742,"props":2655,"children":2656},{"style":754},[2657],{"type":50,"value":772},{"type":45,"tag":742,"props":2659,"children":2660},{"style":754},[2661],{"type":50,"value":787},{"type":45,"tag":742,"props":2663,"children":2664},{"style":754},[2665],{"type":50,"value":1067},{"type":45,"tag":742,"props":2667,"children":2668},{"style":775},[2669],{"type":50,"value":2557},{"type":45,"tag":742,"props":2671,"children":2672},{"style":754},[2673],{"type":50,"value":772},{"type":45,"tag":742,"props":2675,"children":2676},{"style":749},[2677],{"type":50,"value":840},{"type":45,"tag":742,"props":2679,"children":2680},{"style":754},[2681],{"type":50,"value":908},{"type":45,"tag":1753,"props":2683,"children":2685},{"id":2684},"timeline-options",[2686],{"type":50,"value":2687},"Timeline Options",{"type":45,"tag":60,"props":2689,"children":2690},{},[2691,2709,2723],{"type":45,"tag":64,"props":2692,"children":2693},{},[2694,2699,2701,2707],{"type":45,"tag":68,"props":2695,"children":2696},{},[2697],{"type":50,"value":2698},"paused: true",{"type":50,"value":2700}," — create paused; call ",{"type":45,"tag":76,"props":2702,"children":2704},{"className":2703},[],[2705],{"type":50,"value":2706},".play()",{"type":50,"value":2708}," to start.",{"type":45,"tag":64,"props":2710,"children":2711},{},[2712,2716,2717,2721],{"type":45,"tag":68,"props":2713,"children":2714},{},[2715],{"type":50,"value":296},{"type":50,"value":141},{"type":45,"tag":68,"props":2718,"children":2719},{},[2720],{"type":50,"value":311},{"type":50,"value":2722}," — apply to whole timeline.",{"type":45,"tag":64,"props":2724,"children":2725},{},[2726,2730],{"type":45,"tag":68,"props":2727,"children":2728},{},[2729],{"type":50,"value":1001},{"type":50,"value":2731}," — vars merged into every child tween.",{"type":45,"tag":1753,"props":2733,"children":2735},{"id":2734},"nesting-timelines",[2736],{"type":50,"value":2737},"Nesting Timelines",{"type":45,"tag":732,"props":2739,"children":2741},{"className":734,"code":2740,"language":21,"meta":736,"style":736},"const master = gsap.timeline();\nconst child = gsap.timeline();\nchild.to(\".a\", { x: 100 }).to(\".b\", { y: 50 });\nmaster.add(child, 0);\n",[2742],{"type":45,"tag":76,"props":2743,"children":2744},{"__ignoreMap":736},[2745,2781,2817,2933],{"type":45,"tag":742,"props":2746,"children":2747},{"class":744,"line":745},[2748,2752,2757,2761,2765,2769,2773,2777],{"type":45,"tag":742,"props":2749,"children":2750},{"style":843},[2751],{"type":50,"value":1110},{"type":45,"tag":742,"props":2753,"children":2754},{"style":749},[2755],{"type":50,"value":2756}," master ",{"type":45,"tag":742,"props":2758,"children":2759},{"style":754},[2760],{"type":50,"value":1120},{"type":45,"tag":742,"props":2762,"children":2763},{"style":749},[2764],{"type":50,"value":1125},{"type":45,"tag":742,"props":2766,"children":2767},{"style":754},[2768],{"type":50,"value":225},{"type":45,"tag":742,"props":2770,"children":2771},{"style":759},[2772],{"type":50,"value":1794},{"type":45,"tag":742,"props":2774,"children":2775},{"style":749},[2776],{"type":50,"value":1207},{"type":45,"tag":742,"props":2778,"children":2779},{"style":754},[2780],{"type":50,"value":908},{"type":45,"tag":742,"props":2782,"children":2783},{"class":744,"line":795},[2784,2788,2793,2797,2801,2805,2809,2813],{"type":45,"tag":742,"props":2785,"children":2786},{"style":843},[2787],{"type":50,"value":1110},{"type":45,"tag":742,"props":2789,"children":2790},{"style":749},[2791],{"type":50,"value":2792}," child ",{"type":45,"tag":742,"props":2794,"children":2795},{"style":754},[2796],{"type":50,"value":1120},{"type":45,"tag":742,"props":2798,"children":2799},{"style":749},[2800],{"type":50,"value":1125},{"type":45,"tag":742,"props":2802,"children":2803},{"style":754},[2804],{"type":50,"value":225},{"type":45,"tag":742,"props":2806,"children":2807},{"style":759},[2808],{"type":50,"value":1794},{"type":45,"tag":742,"props":2810,"children":2811},{"style":749},[2812],{"type":50,"value":1207},{"type":45,"tag":742,"props":2814,"children":2815},{"style":754},[2816],{"type":50,"value":908},{"type":45,"tag":742,"props":2818,"children":2819},{"class":744,"line":870},[2820,2825,2829,2833,2837,2841,2845,2849,2853,2857,2861,2865,2869,2873,2877,2881,2885,2889,2893,2897,2901,2905,2909,2913,2917,2921,2925,2929],{"type":45,"tag":742,"props":2821,"children":2822},{"style":749},[2823],{"type":50,"value":2824},"child",{"type":45,"tag":742,"props":2826,"children":2827},{"style":754},[2828],{"type":50,"value":225},{"type":45,"tag":742,"props":2830,"children":2831},{"style":759},[2832],{"type":50,"value":762},{"type":45,"tag":742,"props":2834,"children":2835},{"style":749},[2836],{"type":50,"value":767},{"type":45,"tag":742,"props":2838,"children":2839},{"style":754},[2840],{"type":50,"value":772},{"type":45,"tag":742,"props":2842,"children":2843},{"style":775},[2844],{"type":50,"value":1897},{"type":45,"tag":742,"props":2846,"children":2847},{"style":754},[2848],{"type":50,"value":772},{"type":45,"tag":742,"props":2850,"children":2851},{"style":754},[2852],{"type":50,"value":787},{"type":45,"tag":742,"props":2854,"children":2855},{"style":754},[2856],{"type":50,"value":1159},{"type":45,"tag":742,"props":2858,"children":2859},{"style":874},[2860],{"type":50,"value":1164},{"type":45,"tag":742,"props":2862,"children":2863},{"style":754},[2864],{"type":50,"value":806},{"type":45,"tag":742,"props":2866,"children":2867},{"style":859},[2868],{"type":50,"value":1173},{"type":45,"tag":742,"props":2870,"children":2871},{"style":754},[2872],{"type":50,"value":1081},{"type":45,"tag":742,"props":2874,"children":2875},{"style":749},[2876],{"type":50,"value":840},{"type":45,"tag":742,"props":2878,"children":2879},{"style":754},[2880],{"type":50,"value":225},{"type":45,"tag":742,"props":2882,"children":2883},{"style":759},[2884],{"type":50,"value":762},{"type":45,"tag":742,"props":2886,"children":2887},{"style":749},[2888],{"type":50,"value":767},{"type":45,"tag":742,"props":2890,"children":2891},{"style":754},[2892],{"type":50,"value":772},{"type":45,"tag":742,"props":2894,"children":2895},{"style":775},[2896],{"type":50,"value":1950},{"type":45,"tag":742,"props":2898,"children":2899},{"style":754},[2900],{"type":50,"value":772},{"type":45,"tag":742,"props":2902,"children":2903},{"style":754},[2904],{"type":50,"value":787},{"type":45,"tag":742,"props":2906,"children":2907},{"style":754},[2908],{"type":50,"value":1159},{"type":45,"tag":742,"props":2910,"children":2911},{"style":874},[2912],{"type":50,"value":1967},{"type":45,"tag":742,"props":2914,"children":2915},{"style":754},[2916],{"type":50,"value":806},{"type":45,"tag":742,"props":2918,"children":2919},{"style":859},[2920],{"type":50,"value":862},{"type":45,"tag":742,"props":2922,"children":2923},{"style":754},[2924],{"type":50,"value":1081},{"type":45,"tag":742,"props":2926,"children":2927},{"style":749},[2928],{"type":50,"value":840},{"type":45,"tag":742,"props":2930,"children":2931},{"style":754},[2932],{"type":50,"value":908},{"type":45,"tag":742,"props":2934,"children":2935},{"class":744,"line":893},[2936,2941,2945,2949,2954,2958,2962,2966],{"type":45,"tag":742,"props":2937,"children":2938},{"style":749},[2939],{"type":50,"value":2940},"master",{"type":45,"tag":742,"props":2942,"children":2943},{"style":754},[2944],{"type":50,"value":225},{"type":45,"tag":742,"props":2946,"children":2947},{"style":759},[2948],{"type":50,"value":1425},{"type":45,"tag":742,"props":2950,"children":2951},{"style":749},[2952],{"type":50,"value":2953},"(child",{"type":45,"tag":742,"props":2955,"children":2956},{"style":754},[2957],{"type":50,"value":787},{"type":45,"tag":742,"props":2959,"children":2960},{"style":859},[2961],{"type":50,"value":1691},{"type":45,"tag":742,"props":2963,"children":2964},{"style":749},[2965],{"type":50,"value":840},{"type":45,"tag":742,"props":2967,"children":2968},{"style":754},[2969],{"type":50,"value":908},{"type":45,"tag":1753,"props":2971,"children":2973},{"id":2972},"playback-control",[2974],{"type":50,"value":2975},"Playback Control",{"type":45,"tag":122,"props":2977,"children":2978},{},[2979,2985,2986,2992,2993,2999,3000,3006,3007,3013,3014,3020,3021,3027],{"type":45,"tag":76,"props":2980,"children":2982},{"className":2981},[],[2983],{"type":50,"value":2984},"tl.play()",{"type":50,"value":141},{"type":45,"tag":76,"props":2987,"children":2989},{"className":2988},[],[2990],{"type":50,"value":2991},"tl.pause()",{"type":50,"value":141},{"type":45,"tag":76,"props":2994,"children":2996},{"className":2995},[],[2997],{"type":50,"value":2998},"tl.reverse()",{"type":50,"value":141},{"type":45,"tag":76,"props":3001,"children":3003},{"className":3002},[],[3004],{"type":50,"value":3005},"tl.restart()",{"type":50,"value":141},{"type":45,"tag":76,"props":3008,"children":3010},{"className":3009},[],[3011],{"type":50,"value":3012},"tl.time(2)",{"type":50,"value":141},{"type":45,"tag":76,"props":3015,"children":3017},{"className":3016},[],[3018],{"type":50,"value":3019},"tl.progress(0.5)",{"type":50,"value":141},{"type":45,"tag":76,"props":3022,"children":3024},{"className":3023},[],[3025],{"type":50,"value":3026},"tl.kill()",{"type":50,"value":225},{"type":45,"tag":1743,"props":3029,"children":3030},{},[],{"type":45,"tag":53,"props":3032,"children":3034},{"id":3033},"performance",[3035],{"type":50,"value":3036},"Performance",{"type":45,"tag":1753,"props":3038,"children":3040},{"id":3039},"prefer-transform-and-opacity",[3041],{"type":50,"value":3042},"Prefer Transform and Opacity",{"type":45,"tag":122,"props":3044,"children":3045},{},[3046,3048,3053,3054,3059,3060,3065,3066,3071,3072,3077,3079,3085,3086,3092,3093,3099,3100,3106],{"type":50,"value":3047},"Animating ",{"type":45,"tag":76,"props":3049,"children":3051},{"className":3050},[],[3052],{"type":50,"value":425},{"type":50,"value":141},{"type":45,"tag":76,"props":3055,"children":3057},{"className":3056},[],[3058],{"type":50,"value":432},{"type":50,"value":141},{"type":45,"tag":76,"props":3061,"children":3063},{"className":3062},[],[3064],{"type":50,"value":480},{"type":50,"value":141},{"type":45,"tag":76,"props":3067,"children":3069},{"className":3068},[],[3070],{"type":50,"value":510},{"type":50,"value":141},{"type":45,"tag":76,"props":3073,"children":3075},{"className":3074},[],[3076],{"type":50,"value":598},{"type":50,"value":3078}," stays on the compositor. Avoid ",{"type":45,"tag":76,"props":3080,"children":3082},{"className":3081},[],[3083],{"type":50,"value":3084},"width",{"type":50,"value":141},{"type":45,"tag":76,"props":3087,"children":3089},{"className":3088},[],[3090],{"type":50,"value":3091},"height",{"type":50,"value":141},{"type":45,"tag":76,"props":3094,"children":3096},{"className":3095},[],[3097],{"type":50,"value":3098},"top",{"type":50,"value":141},{"type":45,"tag":76,"props":3101,"children":3103},{"className":3102},[],[3104],{"type":50,"value":3105},"left",{"type":50,"value":3107}," when transforms achieve the same effect.",{"type":45,"tag":1753,"props":3109,"children":3111},{"id":3110},"will-change",[3112],{"type":50,"value":3110},{"type":45,"tag":732,"props":3114,"children":3118},{"className":3115,"code":3116,"language":3117,"meta":736,"style":736},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","will-change: transform;\n","css",[3119],{"type":45,"tag":76,"props":3120,"children":3121},{"__ignoreMap":736},[3122],{"type":45,"tag":742,"props":3123,"children":3124},{"class":744,"line":745},[3125,3130],{"type":45,"tag":742,"props":3126,"children":3128},{"style":3127},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[3129],{"type":50,"value":3110},{"type":45,"tag":742,"props":3131,"children":3132},{"style":749},[3133],{"type":50,"value":3134},": transform;\n",{"type":45,"tag":122,"props":3136,"children":3137},{},[3138],{"type":50,"value":3139},"Only on elements that actually animate.",{"type":45,"tag":1753,"props":3141,"children":3143},{"id":3142},"gsapquickto-for-frequent-updates",[3144],{"type":50,"value":3145},"gsap.quickTo() for Frequent Updates",{"type":45,"tag":732,"props":3147,"children":3149},{"className":734,"code":3148,"language":21,"meta":736,"style":736},"let 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",[3150],{"type":45,"tag":76,"props":3151,"children":3152},{"__ignoreMap":736},[3153,3273,3385,3444,3477,3510],{"type":45,"tag":742,"props":3154,"children":3155},{"class":744,"line":745},[3156,3160,3165,3169,3173,3177,3182,3186,3190,3195,3199,3203,3207,3211,3215,3219,3223,3227,3231,3236,3240,3244,3248,3252,3257,3261,3265,3269],{"type":45,"tag":742,"props":3157,"children":3158},{"style":843},[3159],{"type":50,"value":1378},{"type":45,"tag":742,"props":3161,"children":3162},{"style":749},[3163],{"type":50,"value":3164}," xTo ",{"type":45,"tag":742,"props":3166,"children":3167},{"style":754},[3168],{"type":50,"value":1120},{"type":45,"tag":742,"props":3170,"children":3171},{"style":749},[3172],{"type":50,"value":1125},{"type":45,"tag":742,"props":3174,"children":3175},{"style":754},[3176],{"type":50,"value":225},{"type":45,"tag":742,"props":3178,"children":3179},{"style":759},[3180],{"type":50,"value":3181},"quickTo",{"type":45,"tag":742,"props":3183,"children":3184},{"style":749},[3185],{"type":50,"value":767},{"type":45,"tag":742,"props":3187,"children":3188},{"style":754},[3189],{"type":50,"value":772},{"type":45,"tag":742,"props":3191,"children":3192},{"style":775},[3193],{"type":50,"value":3194},"#id",{"type":45,"tag":742,"props":3196,"children":3197},{"style":754},[3198],{"type":50,"value":772},{"type":45,"tag":742,"props":3200,"children":3201},{"style":754},[3202],{"type":50,"value":787},{"type":45,"tag":742,"props":3204,"children":3205},{"style":754},[3206],{"type":50,"value":1067},{"type":45,"tag":742,"props":3208,"children":3209},{"style":775},[3210],{"type":50,"value":425},{"type":45,"tag":742,"props":3212,"children":3213},{"style":754},[3214],{"type":50,"value":772},{"type":45,"tag":742,"props":3216,"children":3217},{"style":754},[3218],{"type":50,"value":787},{"type":45,"tag":742,"props":3220,"children":3221},{"style":754},[3222],{"type":50,"value":1159},{"type":45,"tag":742,"props":3224,"children":3225},{"style":874},[3226],{"type":50,"value":1040},{"type":45,"tag":742,"props":3228,"children":3229},{"style":754},[3230],{"type":50,"value":806},{"type":45,"tag":742,"props":3232,"children":3233},{"style":859},[3234],{"type":50,"value":3235}," 0.4",{"type":45,"tag":742,"props":3237,"children":3238},{"style":754},[3239],{"type":50,"value":787},{"type":45,"tag":742,"props":3241,"children":3242},{"style":874},[3243],{"type":50,"value":1058},{"type":45,"tag":742,"props":3245,"children":3246},{"style":754},[3247],{"type":50,"value":806},{"type":45,"tag":742,"props":3249,"children":3250},{"style":754},[3251],{"type":50,"value":1067},{"type":45,"tag":742,"props":3253,"children":3254},{"style":775},[3255],{"type":50,"value":3256},"power3",{"type":45,"tag":742,"props":3258,"children":3259},{"style":754},[3260],{"type":50,"value":772},{"type":45,"tag":742,"props":3262,"children":3263},{"style":754},[3264],{"type":50,"value":1081},{"type":45,"tag":742,"props":3266,"children":3267},{"style":749},[3268],{"type":50,"value":840},{"type":45,"tag":742,"props":3270,"children":3271},{"style":754},[3272],{"type":50,"value":867},{"type":45,"tag":742,"props":3274,"children":3275},{"class":744,"line":795},[3276,3281,3285,3289,3293,3297,3301,3305,3309,3313,3317,3321,3325,3329,3333,3337,3341,3345,3349,3353,3357,3361,3365,3369,3373,3377,3381],{"type":45,"tag":742,"props":3277,"children":3278},{"style":749},[3279],{"type":50,"value":3280},"  yTo ",{"type":45,"tag":742,"props":3282,"children":3283},{"style":754},[3284],{"type":50,"value":1120},{"type":45,"tag":742,"props":3286,"children":3287},{"style":749},[3288],{"type":50,"value":1125},{"type":45,"tag":742,"props":3290,"children":3291},{"style":754},[3292],{"type":50,"value":225},{"type":45,"tag":742,"props":3294,"children":3295},{"style":759},[3296],{"type":50,"value":3181},{"type":45,"tag":742,"props":3298,"children":3299},{"style":749},[3300],{"type":50,"value":767},{"type":45,"tag":742,"props":3302,"children":3303},{"style":754},[3304],{"type":50,"value":772},{"type":45,"tag":742,"props":3306,"children":3307},{"style":775},[3308],{"type":50,"value":3194},{"type":45,"tag":742,"props":3310,"children":3311},{"style":754},[3312],{"type":50,"value":772},{"type":45,"tag":742,"props":3314,"children":3315},{"style":754},[3316],{"type":50,"value":787},{"type":45,"tag":742,"props":3318,"children":3319},{"style":754},[3320],{"type":50,"value":1067},{"type":45,"tag":742,"props":3322,"children":3323},{"style":775},[3324],{"type":50,"value":432},{"type":45,"tag":742,"props":3326,"children":3327},{"style":754},[3328],{"type":50,"value":772},{"type":45,"tag":742,"props":3330,"children":3331},{"style":754},[3332],{"type":50,"value":787},{"type":45,"tag":742,"props":3334,"children":3335},{"style":754},[3336],{"type":50,"value":1159},{"type":45,"tag":742,"props":3338,"children":3339},{"style":874},[3340],{"type":50,"value":1040},{"type":45,"tag":742,"props":3342,"children":3343},{"style":754},[3344],{"type":50,"value":806},{"type":45,"tag":742,"props":3346,"children":3347},{"style":859},[3348],{"type":50,"value":3235},{"type":45,"tag":742,"props":3350,"children":3351},{"style":754},[3352],{"type":50,"value":787},{"type":45,"tag":742,"props":3354,"children":3355},{"style":874},[3356],{"type":50,"value":1058},{"type":45,"tag":742,"props":3358,"children":3359},{"style":754},[3360],{"type":50,"value":806},{"type":45,"tag":742,"props":3362,"children":3363},{"style":754},[3364],{"type":50,"value":1067},{"type":45,"tag":742,"props":3366,"children":3367},{"style":775},[3368],{"type":50,"value":3256},{"type":45,"tag":742,"props":3370,"children":3371},{"style":754},[3372],{"type":50,"value":772},{"type":45,"tag":742,"props":3374,"children":3375},{"style":754},[3376],{"type":50,"value":1081},{"type":45,"tag":742,"props":3378,"children":3379},{"style":749},[3380],{"type":50,"value":840},{"type":45,"tag":742,"props":3382,"children":3383},{"style":754},[3384],{"type":50,"value":908},{"type":45,"tag":742,"props":3386,"children":3387},{"class":744,"line":870},[3388,3393,3397,3402,3406,3410,3415,3419,3423,3427,3432,3436,3440],{"type":45,"tag":742,"props":3389,"children":3390},{"style":749},[3391],{"type":50,"value":3392},"container",{"type":45,"tag":742,"props":3394,"children":3395},{"style":754},[3396],{"type":50,"value":225},{"type":45,"tag":742,"props":3398,"children":3399},{"style":759},[3400],{"type":50,"value":3401},"addEventListener",{"type":45,"tag":742,"props":3403,"children":3404},{"style":749},[3405],{"type":50,"value":767},{"type":45,"tag":742,"props":3407,"children":3408},{"style":754},[3409],{"type":50,"value":772},{"type":45,"tag":742,"props":3411,"children":3412},{"style":775},[3413],{"type":50,"value":3414},"mousemove",{"type":45,"tag":742,"props":3416,"children":3417},{"style":754},[3418],{"type":50,"value":772},{"type":45,"tag":742,"props":3420,"children":3421},{"style":754},[3422],{"type":50,"value":787},{"type":45,"tag":742,"props":3424,"children":3425},{"style":754},[3426],{"type":50,"value":811},{"type":45,"tag":742,"props":3428,"children":3429},{"style":814},[3430],{"type":50,"value":3431},"e",{"type":45,"tag":742,"props":3433,"children":3434},{"style":754},[3435],{"type":50,"value":840},{"type":45,"tag":742,"props":3437,"children":3438},{"style":843},[3439],{"type":50,"value":846},{"type":45,"tag":742,"props":3441,"children":3442},{"style":754},[3443],{"type":50,"value":792},{"type":45,"tag":742,"props":3445,"children":3446},{"class":744,"line":893},[3447,3452,3456,3460,3464,3469,3473],{"type":45,"tag":742,"props":3448,"children":3449},{"style":759},[3450],{"type":50,"value":3451},"  xTo",{"type":45,"tag":742,"props":3453,"children":3454},{"style":874},[3455],{"type":50,"value":767},{"type":45,"tag":742,"props":3457,"children":3458},{"style":749},[3459],{"type":50,"value":3431},{"type":45,"tag":742,"props":3461,"children":3462},{"style":754},[3463],{"type":50,"value":225},{"type":45,"tag":742,"props":3465,"children":3466},{"style":749},[3467],{"type":50,"value":3468},"pageX",{"type":45,"tag":742,"props":3470,"children":3471},{"style":874},[3472],{"type":50,"value":840},{"type":45,"tag":742,"props":3474,"children":3475},{"style":754},[3476],{"type":50,"value":908},{"type":45,"tag":742,"props":3478,"children":3479},{"class":744,"line":1262},[3480,3485,3489,3493,3497,3502,3506],{"type":45,"tag":742,"props":3481,"children":3482},{"style":759},[3483],{"type":50,"value":3484},"  yTo",{"type":45,"tag":742,"props":3486,"children":3487},{"style":874},[3488],{"type":50,"value":767},{"type":45,"tag":742,"props":3490,"children":3491},{"style":749},[3492],{"type":50,"value":3431},{"type":45,"tag":742,"props":3494,"children":3495},{"style":754},[3496],{"type":50,"value":225},{"type":45,"tag":742,"props":3498,"children":3499},{"style":749},[3500],{"type":50,"value":3501},"pageY",{"type":45,"tag":742,"props":3503,"children":3504},{"style":874},[3505],{"type":50,"value":840},{"type":45,"tag":742,"props":3507,"children":3508},{"style":754},[3509],{"type":50,"value":908},{"type":45,"tag":742,"props":3511,"children":3512},{"class":744,"line":1287},[3513,3517,3521],{"type":45,"tag":742,"props":3514,"children":3515},{"style":754},[3516],{"type":50,"value":899},{"type":45,"tag":742,"props":3518,"children":3519},{"style":749},[3520],{"type":50,"value":840},{"type":45,"tag":742,"props":3522,"children":3523},{"style":754},[3524],{"type":50,"value":908},{"type":45,"tag":1753,"props":3526,"children":3528},{"id":3527},"stagger-many-tweens",[3529],{"type":50,"value":3530},"Stagger > Many Tweens",{"type":45,"tag":122,"props":3532,"children":3533},{},[3534,3536,3541],{"type":50,"value":3535},"Use ",{"type":45,"tag":76,"props":3537,"children":3539},{"className":3538},[],[3540],{"type":50,"value":233},{"type":50,"value":3542}," instead of separate tweens with manual delays.",{"type":45,"tag":1753,"props":3544,"children":3546},{"id":3545},"cleanup",[3547],{"type":50,"value":3548},"Cleanup",{"type":45,"tag":122,"props":3550,"children":3551},{},[3552],{"type":50,"value":3553},"Pause or kill off-screen animations.",{"type":45,"tag":1743,"props":3555,"children":3556},{},[],{"type":45,"tag":53,"props":3558,"children":3560},{"id":3559},"references-loaded-on-demand",[3561],{"type":50,"value":3562},"References (loaded on demand)",{"type":45,"tag":60,"props":3564,"children":3565},{},[3566],{"type":45,"tag":64,"props":3567,"children":3568},{},[3569,3578],{"type":45,"tag":68,"props":3570,"children":3571},{},[3572],{"type":45,"tag":3573,"props":3574,"children":3576},"a",{"href":3575},"references\u002Feffects.md",[3577],{"type":50,"value":3575},{"type":50,"value":3579}," — Drop-in effects: typewriter text, audio visualizer. Read when needing ready-made effect patterns for HyperFrames.",{"type":45,"tag":53,"props":3581,"children":3583},{"id":3582},"best-practices",[3584],{"type":50,"value":3585},"Best Practices",{"type":45,"tag":60,"props":3587,"children":3588},{},[3589,3594,3599,3612,3617],{"type":45,"tag":64,"props":3590,"children":3591},{},[3592],{"type":50,"value":3593},"Use camelCase property names; prefer transform aliases and autoAlpha.",{"type":45,"tag":64,"props":3595,"children":3596},{},[3597],{"type":50,"value":3598},"Prefer timelines over chaining with delay; use the position parameter.",{"type":45,"tag":64,"props":3600,"children":3601},{},[3602,3604,3610],{"type":50,"value":3603},"Add labels with ",{"type":45,"tag":76,"props":3605,"children":3607},{"className":3606},[],[3608],{"type":50,"value":3609},"addLabel()",{"type":50,"value":3611}," for readable sequencing.",{"type":45,"tag":64,"props":3613,"children":3614},{},[3615],{"type":50,"value":3616},"Pass defaults into timeline constructor.",{"type":45,"tag":64,"props":3618,"children":3619},{},[3620],{"type":50,"value":3621},"Store tween\u002Ftimeline return value when controlling playback.",{"type":45,"tag":53,"props":3623,"children":3625},{"id":3624},"do-not",[3626],{"type":50,"value":3627},"Do Not",{"type":45,"tag":60,"props":3629,"children":3630},{},[3631,3636,3641,3646,3651],{"type":45,"tag":64,"props":3632,"children":3633},{},[3634],{"type":50,"value":3635},"Animate layout properties (width\u002Fheight\u002Ftop\u002Fleft) when transforms suffice.",{"type":45,"tag":64,"props":3637,"children":3638},{},[3639],{"type":50,"value":3640},"Use both svgOrigin and transformOrigin on the same SVG element.",{"type":45,"tag":64,"props":3642,"children":3643},{},[3644],{"type":50,"value":3645},"Chain animations with delay when a timeline can sequence them.",{"type":45,"tag":64,"props":3647,"children":3648},{},[3649],{"type":50,"value":3650},"Create tweens before the DOM exists.",{"type":45,"tag":64,"props":3652,"children":3653},{},[3654],{"type":50,"value":3655},"Skip cleanup — always kill tweens when no longer needed.",{"type":45,"tag":3657,"props":3658,"children":3659},"style",{},[3660],{"type":50,"value":3661},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3663,"total":3781},[3664,3683,3699,3711,3731,3751,3769],{"slug":3665,"name":3665,"fn":3666,"description":3667,"org":3668,"tags":3669,"stars":28,"repoUrl":29,"updatedAt":3682},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3670,3673,3676,3679],{"name":3671,"slug":3672,"type":15},"Accessibility","accessibility",{"name":3674,"slug":3675,"type":15},"Charts","charts",{"name":3677,"slug":3678,"type":15},"Data Visualization","data-visualization",{"name":3680,"slug":3681,"type":15},"Design","design","2026-06-30T19:00:57.102",{"slug":3684,"name":3684,"fn":3685,"description":3686,"org":3687,"tags":3688,"stars":28,"repoUrl":29,"updatedAt":3698},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3689,3692,3695],{"name":3690,"slug":3691,"type":15},"Agents","agents",{"name":3693,"slug":3694,"type":15},"Browser Automation","browser-automation",{"name":3696,"slug":3697,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":3700,"name":3700,"fn":3701,"description":3702,"org":3703,"tags":3704,"stars":28,"repoUrl":29,"updatedAt":3710},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3705,3706,3709],{"name":3693,"slug":3694,"type":15},{"name":3707,"slug":3708,"type":15},"Local Development","local-development",{"name":3696,"slug":3697,"type":15},"2026-04-06T18:41:17.526867",{"slug":3712,"name":3712,"fn":3713,"description":3714,"org":3715,"tags":3716,"stars":28,"repoUrl":29,"updatedAt":3730},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3717,3718,3721,3724,3727],{"name":3690,"slug":3691,"type":15},{"name":3719,"slug":3720,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":3722,"slug":3723,"type":15},"SDK","sdk",{"name":3725,"slug":3726,"type":15},"Serverless","serverless",{"name":3728,"slug":3729,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":3732,"name":3732,"fn":3733,"description":3734,"org":3735,"tags":3736,"stars":28,"repoUrl":29,"updatedAt":3750},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3737,3738,3741,3744,3747],{"name":26,"slug":27,"type":15},{"name":3739,"slug":3740,"type":15},"React","react",{"name":3742,"slug":3743,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":3745,"slug":3746,"type":15},"UI Components","ui-components",{"name":3748,"slug":3749,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":3752,"name":3752,"fn":3753,"description":3754,"org":3755,"tags":3756,"stars":28,"repoUrl":29,"updatedAt":3768},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3757,3760,3763,3766,3767],{"name":3758,"slug":3759,"type":15},"AI Infrastructure","ai-infrastructure",{"name":3761,"slug":3762,"type":15},"Cost Optimization","cost-optimization",{"name":3764,"slug":3765,"type":15},"LLM","llm",{"name":3036,"slug":3033,"type":15},{"name":3748,"slug":3749,"type":15},"2026-04-06T18:40:44.377464",{"slug":3770,"name":3770,"fn":3771,"description":3772,"org":3773,"tags":3774,"stars":28,"repoUrl":29,"updatedAt":3780},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3775,3776,3779],{"name":3761,"slug":3762,"type":15},{"name":3777,"slug":3778,"type":15},"Database","database",{"name":3764,"slug":3765,"type":15},"2026-04-06T18:41:08.513425",600,{"items":3783,"total":3976},[3784,3805,3828,3845,3861,3878,3897,3909,3923,3937,3949,3960],{"slug":3785,"name":3785,"fn":3786,"description":3787,"org":3788,"tags":3789,"stars":3802,"repoUrl":3803,"updatedAt":3804},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3790,3793,3796,3799],{"name":3791,"slug":3792,"type":15},"Documents","documents",{"name":3794,"slug":3795,"type":15},"Healthcare","healthcare",{"name":3797,"slug":3798,"type":15},"Insurance","insurance",{"name":3800,"slug":3801,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":3806,"name":3806,"fn":3807,"description":3808,"org":3809,"tags":3810,"stars":3825,"repoUrl":3826,"updatedAt":3827},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3811,3814,3816,3819,3822],{"name":3812,"slug":3813,"type":15},".NET","dotnet",{"name":3815,"slug":3806,"type":15},"ASP.NET Core",{"name":3817,"slug":3818,"type":15},"Blazor","blazor",{"name":3820,"slug":3821,"type":15},"C#","csharp",{"name":3823,"slug":3824,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":3829,"name":3829,"fn":3830,"description":3831,"org":3832,"tags":3833,"stars":3825,"repoUrl":3826,"updatedAt":3844},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3834,3837,3840,3843],{"name":3835,"slug":3836,"type":15},"Apps SDK","apps-sdk",{"name":3838,"slug":3839,"type":15},"ChatGPT","chatgpt",{"name":3841,"slug":3842,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":3846,"name":3846,"fn":3847,"description":3848,"org":3849,"tags":3850,"stars":3825,"repoUrl":3826,"updatedAt":3860},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3851,3854,3857],{"name":3852,"slug":3853,"type":15},"API Development","api-development",{"name":3855,"slug":3856,"type":15},"CLI","cli",{"name":3858,"slug":3859,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":3862,"name":3862,"fn":3863,"description":3864,"org":3865,"tags":3866,"stars":3825,"repoUrl":3826,"updatedAt":3877},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3867,3870,3873,3874],{"name":3868,"slug":3869,"type":15},"Cloudflare","cloudflare",{"name":3871,"slug":3872,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":3719,"slug":3720,"type":15},{"name":3875,"slug":3876,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":3879,"name":3879,"fn":3880,"description":3881,"org":3882,"tags":3883,"stars":3825,"repoUrl":3826,"updatedAt":3896},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3884,3887,3890,3893],{"name":3885,"slug":3886,"type":15},"Productivity","productivity",{"name":3888,"slug":3889,"type":15},"Project Management","project-management",{"name":3891,"slug":3892,"type":15},"Strategy","strategy",{"name":3894,"slug":3895,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":3898,"name":3898,"fn":3899,"description":3900,"org":3901,"tags":3902,"stars":3825,"repoUrl":3826,"updatedAt":3908},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3903,3904,3906,3907],{"name":3680,"slug":3681,"type":15},{"name":3905,"slug":3898,"type":15},"Figma",{"name":26,"slug":27,"type":15},{"name":3841,"slug":3842,"type":15},"2026-04-12T05:06:47.939943",{"slug":3910,"name":3910,"fn":3911,"description":3912,"org":3913,"tags":3914,"stars":3825,"repoUrl":3826,"updatedAt":3922},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3915,3916,3919,3920,3921],{"name":3680,"slug":3681,"type":15},{"name":3917,"slug":3918,"type":15},"Design System","design-system",{"name":3905,"slug":3898,"type":15},{"name":26,"slug":27,"type":15},{"name":3745,"slug":3746,"type":15},"2026-05-10T05:59:52.971881",{"slug":3924,"name":3924,"fn":3925,"description":3926,"org":3927,"tags":3928,"stars":3825,"repoUrl":3826,"updatedAt":3936},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3929,3930,3931,3934,3935],{"name":3680,"slug":3681,"type":15},{"name":3917,"slug":3918,"type":15},{"name":3932,"slug":3933,"type":15},"Documentation","documentation",{"name":3905,"slug":3898,"type":15},{"name":26,"slug":27,"type":15},"2026-05-16T06:07:47.821474",{"slug":3938,"name":3938,"fn":3939,"description":3940,"org":3941,"tags":3942,"stars":3825,"repoUrl":3826,"updatedAt":3948},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3943,3944,3945,3946,3947],{"name":3680,"slug":3681,"type":15},{"name":3905,"slug":3898,"type":15},{"name":26,"slug":27,"type":15},{"name":3745,"slug":3746,"type":15},{"name":3823,"slug":3824,"type":15},"2026-05-16T06:07:40.583615",{"slug":3950,"name":3950,"fn":3951,"description":3952,"org":3953,"tags":3954,"stars":3825,"repoUrl":3826,"updatedAt":3959},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3955,3956,3957,3958],{"name":23,"slug":24,"type":15},{"name":3858,"slug":3859,"type":15},{"name":17,"slug":18,"type":15},{"name":3680,"slug":3681,"type":15},"2026-05-02T05:31:48.48485",{"slug":3961,"name":3961,"fn":3962,"description":3963,"org":3964,"tags":3965,"stars":3825,"repoUrl":3826,"updatedAt":3975},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3966,3967,3968,3971,3974],{"name":17,"slug":18,"type":15},{"name":3680,"slug":3681,"type":15},{"name":3969,"slug":3970,"type":15},"Image Generation","image-generation",{"name":3972,"slug":3973,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]