[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DR10JAJAB1VQXW8G7YQKJZ":3,"skill-same:01M6DR10JAJAB1VQXW8G7YQKJZ":88},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":33,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":67,"commitSha":68,"skillDirectory":69,"forksCount":70,"repositoryHtmlUrl":71,"repositoryHomepageUrl":6,"ownerHtmlUrl":72,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":73,"install":74,"resources":87},"01M6DR10JAJAB1VQXW8G7YQKJZ","gsap-expert",null,"Use when building animations with GSAP (GreenSock Animation Platform) in any JavaScript\u002FTypeScript project — React, Next.js, Vue, Svelte, or vanilla JS. Covers core tweens, timelines, ScrollTrigger, SplitText, MorphSVG, DrawSVG, MotionPath, Flip, Observer, Draggable. Invoke for scroll-based animations, hero reveals, page transitions, SVG morphing, text animations, parallax effects, or any motion design work. As of 2024 GSAP is 100% free including all premium plugins (Webflow acquisition).","AntifragileTech\u002Fantifragile-claude-code","AntifragileTech","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F174357194?v=4","01M6DQCYMK4CDSQQAN0ZC72NTV","01M6DQCYS9YPW1WKMQ5TJMPQ43",9,"MIT","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fdev\u002Fgsap-expert\u002FSKILL.md",[17,22,25,30],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":31,"categoryName":32,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000032","设计师",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"gsap expert","gsap","expert","text","free","svelte","project","next","styling","acquisition","work","frontend","Animation","nextjs","vue","ui","code","react","typescript","design","2026-11-10 10:12:30",false,"---\nname: gsap-expert\ndescription: Use when building animations with GSAP (GreenSock Animation Platform) in any JavaScript\u002FTypeScript project — React, Next.js, Vue, Svelte, or vanilla JS. Covers core tweens, timelines, ScrollTrigger, SplitText, MorphSVG, DrawSVG, MotionPath, Flip, Observer, Draggable. Invoke for scroll-based animations, hero reveals, page transitions, SVG morphing, text animations, parallax effects, or any motion design work. As of 2024 GSAP is 100% free including all premium plugins (Webflow acquisition).\nlicense: MIT\nmetadata:\n  author: antifragile-claude-code\n  version: \"1.0.0\"\n  domain: frontend-animation\n  triggers: gsap, greensock, scrolltrigger, splittext, timeline, tween, animation, morphsvg, drawsvg, motionpath, flip, scroll animation, parallax, hero animation, page transition\n  role: specialist\n  scope: implementation\n  output-format: code\n  related-skills: react-expert, nextjs-developer, frontend-design, ui-styling\n---\n\n\u003C!-- Created: 18:45 17-Apr-2026 -->\n\n# GSAP Expert\n\nSenior motion-design specialist for GSAP 3.12+. GSAP (GreenSock Animation Platform) is the industry-standard JS animation library. **Webflow acquired GreenSock in 2024 and made 100% of GSAP — including all bonus\u002FClub plugins — free for everyone, including commercial use.**\n\n## When to Use This Skill\n\n- Any scroll-triggered animation (`ScrollTrigger`)\n- Hero section reveals, staggered entrances, complex timelines\n- SVG animation: morphing paths, drawing strokes, motion-path following\n- Text animations: word\u002Fchar\u002Fline splits, typewriter, reveal\n- Layout transitions with `Flip` plugin (FLIP technique)\n- Drag interactions (`Draggable`, `InertiaPlugin`)\n- Any animation where CSS `@keyframes` or Framer Motion feels limiting\n- Migrating away from Framer Motion, AOS, or jQuery animations\n\n## Installation\n\n### npm \u002F pnpm (recommended for apps)\n```bash\npnpm add gsap\n# or\nnpm install gsap\n```\nAll plugins (ScrollTrigger, SplitText, MorphSVG, DrawSVG, MotionPath, Flip, Observer, Draggable, ScrollTo, ScrollSmoother, Physics2D, CustomEase, etc.) are bundled in the single `gsap` package — no separate installs needed.\n\n### CDN (for static sites\u002Fprototypes)\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.12.5\u002Fdist\u002Fgsap.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.12.5\u002Fdist\u002FScrollTrigger.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.12.5\u002Fdist\u002FSplitText.min.js\">\u003C\u002Fscript>\n```\n\n### React\u002FNext.js setup\nInstall the official hook package for zero-boilerplate context:\n```bash\npnpm add gsap @gsap\u002Freact\n```\nUse `useGSAP()` — it auto-cleans animations on unmount and scopes selectors.\n\n## Core API Cheat Sheet\n\n### 1. Basic tween\n```js\nimport gsap from \"gsap\";\n\ngsap.to(\".box\", { x: 300, rotate: 360, duration: 2, ease: \"power2.inOut\" });\ngsap.from(\".box\", { opacity: 0, y: 50, duration: 1 });\ngsap.fromTo(\".box\", { x: 0 }, { x: 300, duration: 1 });\ngsap.set(\".box\", { opacity: 0 }); \u002F\u002F instant, no animation\n```\n\n### 2. Timeline (sequenced animations)\n```js\nconst tl = gsap.timeline({ defaults: { duration: 1, ease: \"power2.out\" } });\ntl.from(\".hero-title\", { y: 100, opacity: 0 })\n  .from(\".hero-sub\",   { y: 50,  opacity: 0 }, \"-=0.5\") \u002F\u002F overlap by 0.5s\n  .from(\".hero-cta\",   { scale: 0.8, opacity: 0 }, \"\u003C\"); \u002F\u002F start with previous\n```\n\n### 3. Stagger\n```js\ngsap.from(\".card\", {\n  y: 60, opacity: 0, duration: 0.8,\n  stagger: { amount: 0.6, from: \"start\", grid: \"auto\" }\n});\n```\n\n### 4. ScrollTrigger (most-used plugin)\n```js\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\ngsap.registerPlugin(ScrollTrigger);\n\ngsap.to(\".parallax\", {\n  yPercent: -50,\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \".parallax-section\",\n    start: \"top bottom\",   \u002F\u002F when top of trigger hits bottom of viewport\n    end: \"bottom top\",     \u002F\u002F when bottom of trigger hits top of viewport\n    scrub: true,           \u002F\u002F tie animation progress to scroll\n    markers: false         \u002F\u002F set true while debugging\n  }\n});\n\n\u002F\u002F Pin a section\nScrollTrigger.create({\n  trigger: \".pin-section\",\n  start: \"top top\",\n  end: \"+=2000\",\n  pin: true,\n  scrub: 1\n});\n```\n\n### 5. SplitText (word\u002Fchar animation)\n```js\nimport { SplitText } from \"gsap\u002FSplitText\";\ngsap.registerPlugin(SplitText);\n\nconst split = new SplitText(\".headline\", { type: \"chars,words\" });\ngsap.from(split.chars, { y: 80, opacity: 0, stagger: 0.02, duration: 0.8 });\n```\n\n## React \u002F Next.js Pattern (with `@gsap\u002Freact`)\n\n```tsx\n\"use client\";\nimport { useRef } from \"react\";\nimport gsap from \"gsap\";\nimport { useGSAP } from \"@gsap\u002Freact\";\nimport { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\n\ngsap.registerPlugin(useGSAP, ScrollTrigger);\n\nexport function Hero() {\n  const container = useRef\u003CHTMLDivElement>(null);\n\n  useGSAP(() => {\n    \u002F\u002F Selectors are auto-scoped to `container`\n    gsap.from(\".hero-title\", {\n      y: 100, opacity: 0, duration: 1, ease: \"power3.out\"\n    });\n\n    gsap.to(\".parallax-bg\", {\n      yPercent: -30,\n      ease: \"none\",\n      scrollTrigger: {\n        trigger: container.current,\n        start: \"top bottom\",\n        end: \"bottom top\",\n        scrub: true\n      }\n    });\n  }, { scope: container }); \u002F\u002F auto-cleanup on unmount\n\n  return (\n    \u003Cdiv ref={container} className=\"relative overflow-hidden\">\n      \u003Cdiv className=\"parallax-bg absolute inset-0 bg-gradient-to-b from-indigo-900 to-black\" \u002F>\n      \u003Ch1 className=\"hero-title relative\">Your Headline\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Next.js App Router Gotchas\n\n1. **Must be client component**: add `\"use client\"` at the top.\n2. **Register plugins ONCE** at module scope — not inside the component.\n3. **SSR safety**: GSAP touches `window`. `useGSAP` handles this; for custom effects, wrap in `useEffect` or check `typeof window !== \"undefined\"`.\n4. **ScrollTrigger + Next.js navigation**: Call `ScrollTrigger.refresh()` after layout changes or route transitions if scroll positions get stale.\n5. **Strict Mode double-render**: `useGSAP` handles cleanup correctly; do not use bare `useEffect` with GSAP or you'll get duplicated animations in dev.\n\n## Common Patterns\n\n### Parallax on scroll\n```js\ngsap.utils.toArray\u003CHTMLElement>(\".parallax\").forEach((el) => {\n  const speed = parseFloat(el.dataset.speed || \"0.5\");\n  gsap.to(el, {\n    yPercent: -100 * speed,\n    ease: \"none\",\n    scrollTrigger: { trigger: el, start: \"top bottom\", end: \"bottom top\", scrub: true }\n  });\n});\n```\n\n### Horizontal scroll section\n```js\nconst sections = gsap.utils.toArray(\".panel\");\ngsap.to(sections, {\n  xPercent: -100 * (sections.length - 1),\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \".container\",\n    pin: true,\n    scrub: 1,\n    snap: 1 \u002F (sections.length - 1),\n    end: () => \"+=\" + document.querySelector(\".container\")!.offsetWidth\n  }\n});\n```\n\n### Counter \u002F number tween\n```js\nconst obj = { val: 0 };\ngsap.to(obj, {\n  val: 1000, duration: 2, ease: \"power1.out\",\n  onUpdate: () => el.textContent = Math.round(obj.val).toString()\n});\n```\n\n### Flip layout transition\n```js\nimport { Flip } from \"gsap\u002FFlip\";\ngsap.registerPlugin(Flip);\n\nconst state = Flip.getState(\".item\");\n\u002F\u002F ... change layout (e.g., toggle a class, reorder DOM) ...\nFlip.from(state, { duration: 0.7, ease: \"power2.inOut\", stagger: 0.05 });\n```\n\n## Easing Quick Reference\n- **Natural**: `power1.out`, `power2.out`, `power3.out` (smoother as number goes up)\n- **Snappy**: `back.out(1.7)`, `expo.out`\n- **Bouncy**: `elastic.out(1, 0.3)`, `bounce.out`\n- **Linear (scroll-tied)**: `\"none\"` — always use this with `scrub: true`\n- **Custom**: `CustomEase.create(\"myEase\", \"M0,0 C0.4,0 0.2,1 1,1\")` (CustomEase is now free)\n\n## Performance Checklist\n\n- Animate `transform` and `opacity` — avoid `width`, `height`, `top`, `left` (triggers layout)\n- Use `force3D: true` (default) to enable GPU compositing\n- Batch `ScrollTrigger` reads with `ScrollTrigger.batch()` for many elements\n- Call `ScrollTrigger.refresh()` after images\u002Ffonts load, not on every resize\n- Use `willChange: \"transform\"` sparingly; GSAP handles this automatically\n- For 60fps on mobile: keep simultaneous animations under ~30 elements\n\n## Framework Alternatives — When to Pick GSAP\n\n| Use case | Pick |\n|---|---|\n| Scroll-based storytelling, parallax, pinning | **GSAP + ScrollTrigger** |\n| Simple mount\u002Funmount transitions in React | Framer Motion |\n| Complex timelines, SVG morph, text splits | **GSAP** |\n| Physics-based drag, spring animations | Framer Motion or GSAP Physics2D |\n| Page-level route transitions (Next.js) | **GSAP Flip** or `next-view-transitions` |\n| 3D (Three.js scenes) | **GSAP** (animates Three objects perfectly) |\n\n## Migration Tips\n\n- **From Framer Motion**: GSAP is imperative, not declarative — you call `gsap.to()` instead of passing `animate={}` props. Timelines replace `\u003CAnimatePresence>` + `variants`.\n- **From AOS**: ScrollTrigger replaces AOS with infinitely more control. Swap `data-aos` attrs for a single `useGSAP` block.\n- **From jQuery `.animate()`**: Literally 20× faster and supports transforms\u002Fcolors\u002FSVG out of the box.\n\n## Official References\n- Docs: https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002F\n- Plugins: https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002FPlugins\u002F\n- React guide: https:\u002F\u002Fgsap.com\u002Fresources\u002FReact\n- Starter templates: https:\u002F\u002Fgsap.com\u002Fresources\u002Fnextjs\u002F and https:\u002F\u002Fstackblitz.com\u002F@gsap-dev\n- Cheat sheet: https:\u002F\u002Fgsap.com\u002Fcheatsheet\u002F\n- Ease visualizer: https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002FEases\n- Forum (authoritative answers from GreenSock team): https:\u002F\u002Fgsap.com\u002Fcommunity\u002F\n\n## Deliverable Quality Bar\n\nWhen writing GSAP code for a user:\n1. **Always `registerPlugin` at module scope**, never inside hooks\u002Fcomponents\n2. **Always use `useGSAP` in React** — never bare `useEffect` for animations\n3. **Always clean up ScrollTrigger instances** on unmount (`useGSAP` does this automatically)\n4. **Test with `markers: true`** for any ScrollTrigger, then remove before shipping\n5. **Prefer `xPercent`\u002F`yPercent` over `x`\u002F`y`** for responsive animations\n6. **Use `gsap.context()`** if not using `@gsap\u002Freact` — scopes selectors and enables cleanup\n7. **Respect `prefers-reduced-motion`**:\n```js\nconst reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\nif (reduceMotion) gsap.globalTimeline.timeScale(0); \u002F\u002F or skip animations entirely\n```\n","\u003C!-- Created: 18:45 17-Apr-2026 -->\n\n# GSAP Expert\n\nSenior motion-design specialist for GSAP 3.12+. GSAP (GreenSock Animation Platform) is the industry-standard JS animation library. **Webflow acquired GreenSock in 2024 and made 100% of GSAP — including all bonus\u002FClub plugins — free for everyone, including commercial use.**\n\n## When to Use This Skill\n\n- Any scroll-triggered animation (`ScrollTrigger`)\n- Hero section reveals, staggered entrances, complex timelines\n- SVG animation: morphing paths, drawing strokes, motion-path following\n- Text animations: word\u002Fchar\u002Fline splits, typewriter, reveal\n- Layout transitions with `Flip` plugin (FLIP technique)\n- Drag interactions (`Draggable`, `InertiaPlugin`)\n- Any animation where CSS `@keyframes` or Framer Motion feels limiting\n- Migrating away from Framer Motion, AOS, or jQuery animations\n\n## Installation\n\n### npm \u002F pnpm (recommended for apps)\n```bash\npnpm add gsap\n# or\nnpm install gsap\n```\nAll plugins (ScrollTrigger, SplitText, MorphSVG, DrawSVG, MotionPath, Flip, Observer, Draggable, ScrollTo, ScrollSmoother, Physics2D, CustomEase, etc.) are bundled in the single `gsap` package — no separate installs needed.\n\n### CDN (for static sites\u002Fprototypes)\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.12.5\u002Fdist\u002Fgsap.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.12.5\u002Fdist\u002FScrollTrigger.min.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.12.5\u002Fdist\u002FSplitText.min.js\">\u003C\u002Fscript>\n```\n\n### React\u002FNext.js setup\nInstall the official hook package for zero-boilerplate context:\n```bash\npnpm add gsap @gsap\u002Freact\n```\nUse `useGSAP()` — it auto-cleans animations on unmount and scopes selectors.\n\n## Core API Cheat Sheet\n\n### 1. Basic tween\n```js\nimport gsap from \"gsap\";\n\ngsap.to(\".box\", { x: 300, rotate: 360, duration: 2, ease: \"power2.inOut\" });\ngsap.from(\".box\", { opacity: 0, y: 50, duration: 1 });\ngsap.fromTo(\".box\", { x: 0 }, { x: 300, duration: 1 });\ngsap.set(\".box\", { opacity: 0 }); \u002F\u002F instant, no animation\n```\n\n### 2. Timeline (sequenced animations)\n```js\nconst tl = gsap.timeline({ defaults: { duration: 1, ease: \"power2.out\" } });\ntl.from(\".hero-title\", { y: 100, opacity: 0 })\n  .from(\".hero-sub\",   { y: 50,  opacity: 0 }, \"-=0.5\") \u002F\u002F overlap by 0.5s\n  .from(\".hero-cta\",   { scale: 0.8, opacity: 0 }, \"\u003C\"); \u002F\u002F start with previous\n```\n\n### 3. Stagger\n```js\ngsap.from(\".card\", {\n  y: 60, opacity: 0, duration: 0.8,\n  stagger: { amount: 0.6, from: \"start\", grid: \"auto\" }\n});\n```\n\n### 4. ScrollTrigger (most-used plugin)\n```js\nimport gsap from \"gsap\";\nimport { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\ngsap.registerPlugin(ScrollTrigger);\n\ngsap.to(\".parallax\", {\n  yPercent: -50,\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \".parallax-section\",\n    start: \"top bottom\",   \u002F\u002F when top of trigger hits bottom of viewport\n    end: \"bottom top\",     \u002F\u002F when bottom of trigger hits top of viewport\n    scrub: true,           \u002F\u002F tie animation progress to scroll\n    markers: false         \u002F\u002F set true while debugging\n  }\n});\n\n\u002F\u002F Pin a section\nScrollTrigger.create({\n  trigger: \".pin-section\",\n  start: \"top top\",\n  end: \"+=2000\",\n  pin: true,\n  scrub: 1\n});\n```\n\n### 5. SplitText (word\u002Fchar animation)\n```js\nimport { SplitText } from \"gsap\u002FSplitText\";\ngsap.registerPlugin(SplitText);\n\nconst split = new SplitText(\".headline\", { type: \"chars,words\" });\ngsap.from(split.chars, { y: 80, opacity: 0, stagger: 0.02, duration: 0.8 });\n```\n\n## React \u002F Next.js Pattern (with `@gsap\u002Freact`)\n\n```tsx\n\"use client\";\nimport { useRef } from \"react\";\nimport gsap from \"gsap\";\nimport { useGSAP } from \"@gsap\u002Freact\";\nimport { ScrollTrigger } from \"gsap\u002FScrollTrigger\";\n\ngsap.registerPlugin(useGSAP, ScrollTrigger);\n\nexport function Hero() {\n  const container = useRef\u003CHTMLDivElement>(null);\n\n  useGSAP(() => {\n    \u002F\u002F Selectors are auto-scoped to `container`\n    gsap.from(\".hero-title\", {\n      y: 100, opacity: 0, duration: 1, ease: \"power3.out\"\n    });\n\n    gsap.to(\".parallax-bg\", {\n      yPercent: -30,\n      ease: \"none\",\n      scrollTrigger: {\n        trigger: container.current,\n        start: \"top bottom\",\n        end: \"bottom top\",\n        scrub: true\n      }\n    });\n  }, { scope: container }); \u002F\u002F auto-cleanup on unmount\n\n  return (\n    \u003Cdiv ref={container} className=\"relative overflow-hidden\">\n      \u003Cdiv className=\"parallax-bg absolute inset-0 bg-gradient-to-b from-indigo-900 to-black\" \u002F>\n      \u003Ch1 className=\"hero-title relative\">Your Headline\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n## Next.js App Router Gotchas\n\n1. **Must be client component**: add `\"use client\"` at the top.\n2. **Register plugins ONCE** at module scope — not inside the component.\n3. **SSR safety**: GSAP touches `window`. `useGSAP` handles this; for custom effects, wrap in `useEffect` or check `typeof window !== \"undefined\"`.\n4. **ScrollTrigger + Next.js navigation**: Call `ScrollTrigger.refresh()` after layout changes or route transitions if scroll positions get stale.\n5. **Strict Mode double-render**: `useGSAP` handles cleanup correctly; do not use bare `useEffect` with GSAP or you'll get duplicated animations in dev.\n\n## Common Patterns\n\n### Parallax on scroll\n```js\ngsap.utils.toArray\u003CHTMLElement>(\".parallax\").forEach((el) => {\n  const speed = parseFloat(el.dataset.speed || \"0.5\");\n  gsap.to(el, {\n    yPercent: -100 * speed,\n    ease: \"none\",\n    scrollTrigger: { trigger: el, start: \"top bottom\", end: \"bottom top\", scrub: true }\n  });\n});\n```\n\n### Horizontal scroll section\n```js\nconst sections = gsap.utils.toArray(\".panel\");\ngsap.to(sections, {\n  xPercent: -100 * (sections.length - 1),\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \".container\",\n    pin: true,\n    scrub: 1,\n    snap: 1 \u002F (sections.length - 1),\n    end: () => \"+=\" + document.querySelector(\".container\")!.offsetWidth\n  }\n});\n```\n\n### Counter \u002F number tween\n```js\nconst obj = { val: 0 };\ngsap.to(obj, {\n  val: 1000, duration: 2, ease: \"power1.out\",\n  onUpdate: () => el.textContent = Math.round(obj.val).toString()\n});\n```\n\n### Flip layout transition\n```js\nimport { Flip } from \"gsap\u002FFlip\";\ngsap.registerPlugin(Flip);\n\nconst state = Flip.getState(\".item\");\n\u002F\u002F ... change layout (e.g., toggle a class, reorder DOM) ...\nFlip.from(state, { duration: 0.7, ease: \"power2.inOut\", stagger: 0.05 });\n```\n\n## Easing Quick Reference\n- **Natural**: `power1.out`, `power2.out`, `power3.out` (smoother as number goes up)\n- **Snappy**: `back.out(1.7)`, `expo.out`\n- **Bouncy**: `elastic.out(1, 0.3)`, `bounce.out`\n- **Linear (scroll-tied)**: `\"none\"` — always use this with `scrub: true`\n- **Custom**: `CustomEase.create(\"myEase\", \"M0,0 C0.4,0 0.2,1 1,1\")` (CustomEase is now free)\n\n## Performance Checklist\n\n- Animate `transform` and `opacity` — avoid `width`, `height`, `top`, `left` (triggers layout)\n- Use `force3D: true` (default) to enable GPU compositing\n- Batch `ScrollTrigger` reads with `ScrollTrigger.batch()` for many elements\n- Call `ScrollTrigger.refresh()` after images\u002Ffonts load, not on every resize\n- Use `willChange: \"transform\"` sparingly; GSAP handles this automatically\n- For 60fps on mobile: keep simultaneous animations under ~30 elements\n\n## Framework Alternatives — When to Pick GSAP\n\n| Use case | Pick |\n|---|---|\n| Scroll-based storytelling, parallax, pinning | **GSAP + ScrollTrigger** |\n| Simple mount\u002Funmount transitions in React | Framer Motion |\n| Complex timelines, SVG morph, text splits | **GSAP** |\n| Physics-based drag, spring animations | Framer Motion or GSAP Physics2D |\n| Page-level route transitions (Next.js) | **GSAP Flip** or `next-view-transitions` |\n| 3D (Three.js scenes) | **GSAP** (animates Three objects perfectly) |\n\n## Migration Tips\n\n- **From Framer Motion**: GSAP is imperative, not declarative — you call `gsap.to()` instead of passing `animate={}` props. Timelines replace `\u003CAnimatePresence>` + `variants`.\n- **From AOS**: ScrollTrigger replaces AOS with infinitely more control. Swap `data-aos` attrs for a single `useGSAP` block.\n- **From jQuery `.animate()`**: Literally 20× faster and supports transforms\u002Fcolors\u002FSVG out of the box.\n\n## Official References\n- Docs: https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002F\n- Plugins: https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002FPlugins\u002F\n- React guide: https:\u002F\u002Fgsap.com\u002Fresources\u002FReact\n- Starter templates: https:\u002F\u002Fgsap.com\u002Fresources\u002Fnextjs\u002F and https:\u002F\u002Fstackblitz.com\u002F@gsap-dev\n- Cheat sheet: https:\u002F\u002Fgsap.com\u002Fcheatsheet\u002F\n- Ease visualizer: https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002FEases\n- Forum (authoritative answers from GreenSock team): https:\u002F\u002Fgsap.com\u002Fcommunity\u002F\n\n## Deliverable Quality Bar\n\nWhen writing GSAP code for a user:\n1. **Always `registerPlugin` at module scope**, never inside hooks\u002Fcomponents\n2. **Always use `useGSAP` in React** — never bare `useEffect` for animations\n3. **Always clean up ScrollTrigger instances** on unmount (`useGSAP` does this automatically)\n4. **Test with `markers: true`** for any ScrollTrigger, then remove before shipping\n5. **Prefer `xPercent`\u002F`yPercent` over `x`\u002F`y`** for responsive animations\n6. **Use `gsap.context()`** if not using `@gsap\u002Freact` — scopes selectors and enables cleanup\n7. **Respect `prefers-reduced-motion`**:\n```js\nconst reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\nif (reduceMotion) gsap.globalTimeline.timeScale(0); \u002F\u002F or skip animations entirely\n```\n",{"name":5,"license":14,"metadata":59,"description":7},{"role":60,"scope":61,"author":62,"domain":63,"version":64,"triggers":65,"output-format":50,"related-skills":66},"specialist","implementation","antifragile-claude-code","frontend-animation","1.0.0","gsap, greensock, scrolltrigger, splittext, timeline, tween, animation, morphsvg, drawsvg, motionpath, flip, scroll animation, parallax, hero animation, page transition","react-expert, nextjs-developer, frontend-design, ui-styling","master","c73386b305dec167db7654e0e6feacb462d4f9dc","assets\u002Fskills\u002Fdev\u002Fgsap-expert",1,"https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code","https:\u002F\u002Fgithub.com\u002FAntifragileTech","2026-10-02 14:22:14",{"source":8,"skillName":5,"commands":75,"prompt":85,"zipAvailable":86},[76,79,82],{"tool":77,"command":78},"npx","npx skills add AntifragileTech\u002Fantifragile-claude-code --skill gsap-expert",{"tool":80,"command":81},"bunx","bunx skills add AntifragileTech\u002Fantifragile-claude-code --skill gsap-expert",{"tool":83,"command":84},"pnpm","pnpm dlx skills add AntifragileTech\u002Fantifragile-claude-code --skill gsap-expert","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fdev\u002Fgsap-expert\u002FSKILL.md",true,[],[89,110,124,139,152,165],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":104,"publishedAt":54},"01M6DT9Q6VYA615SCXR757TZZ7","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fwriting-skills\u002FSKILL.md",[95,98,101],{"categoryNo":96,"categoryName":97,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":99,"categoryName":100,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":102,"categoryName":103,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000036","内容创作者",[105,106,107,108,44,109],"writing skills","writing","use","editing","deployment",{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":118,"publishedAt":54},"01M6DT9GFHDNY90P41WGAE1TV0","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fwriting-plans\u002FSKILL.md",[116,117],{"categoryNo":99,"categoryName":100,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":102,"categoryName":103,"taxonomyType":28,"taxonomyTypeDesc":29},[119,120,106,121,122,107,50,123],"plans","writing plans","requirements","task","spec",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":132,"publishedAt":54},"01M6DT9C6PFGD86WS3HY7YE3XG","docs:write-concisely","Apply writing rules to any documentation that humans will read. Makes your writing clearer, stronger, and more professional.","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fwrite-concisely\u002FSKILL.md",[130,131],{"categoryNo":99,"categoryName":100,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":102,"categoryName":103,"taxonomyType":28,"taxonomyTypeDesc":29},[133,134,135,136,137,138,106],"docs:write concisely","write","docs","read","Rules","documentation",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":145,"publishedAt":54},"01M6DT98AWQ27P0N1CG97WAG66","kaizen:why","Iterative Five Whys root cause analysis drilling from symptoms to fundamentals","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fwhy\u002FSKILL.md",[],[141,146,147,148,149,150,151],"why","kaizen","issue","five whys","analysis","root cause analysis",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":158,"publishedAt":54},"01M6DT93EH25NAX19R3WGE1P53","verification-loop","A comprehensive verification system for Claude Code sessions.","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fverification-loop\u002FSKILL.md",[],[159,160,161,162,50,163,164],"verification loop","verification","loop","sessions","claude code sessions","system",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":169,"categories":170,"keywords":171,"publishedAt":54},"01M6DT90GW7Z7VCN98P9DVYSNC","verification-before-completion","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002FAntifragileTech\u002Fantifragile-claude-code\u002Fblob\u002Fmaster\u002Fassets\u002Fskills\u002Fthinking\u002Fverification-before-completion\u002FSKILL.md",[],[172,160,173,44,107,174,175,176],"verification before completion","commands","evidence","claim","complete"]