[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CS5ZXM4DKHY5S3AC5DJSVC":3,"skill-same:01M7CS5ZXM4DKHY5S3AC5DJSVC":46},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":30,"updatedAt":31,"install":32,"resources":45},"01M7CS5ZXM4DKHY5S3AC5DJSVC","gsap-timeline",null,"Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).","peterish8\u002Fprats-skill-atlas","peterish8","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F181628466?v=4","01M7CHQAPN6X8D29E2Q8DW4BYF","Prathick Dhanes R","01M7CHQAQ7T42E6D8HH3CZH342",1,"MIT","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fdesign\u002Fvisual-and-motion\u002Fgsap-timeline\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: gsap-timeline\ndescription: Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).\nlicense: MIT\n---\n\n# GSAP Timeline\n\n## When to Use This Skill\n\nApply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP.\n\n**Related skills:** For single tweens and eases use **gsap-core**; for scroll-driven timelines use **gsap-scrolltrigger**; for React use **gsap-react**.\n\n## Creating a Timeline\n\n```javascript\nconst tl = gsap.timeline();\ntl.to(\".a\", { x: 100, duration: 1 })\n  .to(\".b\", { y: 50, duration: 0.5 })\n  .to(\".c\", { opacity: 0, duration: 0.3 });\n```\n\nBy default, tweens are **appended** one after another. Use the **position parameter** to place tweens at specific times or relative to other tweens.\n\n## Position Parameter\n\nThird argument (or position property in vars) controls placement:\n\n- **Absolute**: `1` — start at 1 second.\n- **Relative (default)**: `\"+=0.5\"` — 0.5s after end; `\"-=0.2\"` — 0.2s before end.\n- **Label**: `\"labelName\"` — at that label; `\"labelName+=0.3\"` — 0.3s after label.\n- **Placement**: `\"\u003C\"` — start when recently-added animation starts; `\">\"` — start when recently-added animation ends (default); `\"\u003C0.2\"` — 0.2s after recently-added animation start.\n\nExamples:\n\n```javascript\ntl.to(\".a\", { x: 100 }, 0);           \u002F\u002F at 0\ntl.to(\".b\", { y: 50 }, \"+=0.5\");      \u002F\u002F 0.5s after last end\ntl.to(\".c\", { opacity: 0 }, \"\u003C\");     \u002F\u002F same start as previous\ntl.to(\".d\", { scale: 2 }, \"\u003C0.2\");    \u002F\u002F 0.2s after previous start\n```\n\n## Timeline Defaults\n\nPass defaults into the timeline so all child tweens inherit:\n\n```javascript\nconst tl = gsap.timeline({ defaults: { duration: 0.5, ease: \"power2.out\" } });\ntl.to(\".a\", { x: 100 }).to(\".b\", { y: 50 }); \u002F\u002F both use 0.5s and power2.out\n```\n\n## Timeline Options (constructor)\n\n- **paused: true** — create paused; call `.play()` to start.\n- **repeat**, **yoyo** — same as tweens; apply to whole timeline.\n- **onComplete**, **onStart**, **onUpdate** — timeline-level callbacks.\n- **defaults** — vars merged into every child tween.\n\n## Labels\n\nAdd and use labels for readable, maintainable sequencing:\n\n```javascript\ntl.addLabel(\"intro\", 0);\ntl.to(\".a\", { x: 100 }, \"intro\");\ntl.addLabel(\"outro\", \"+=0.5\");\ntl.to(\".b\", { opacity: 0 }, \"outro\");\ntl.play(\"outro\");  \u002F\u002F start from \"outro\"\ntl.tweenFromTo(\"intro\", \"outro\"); \u002F\u002F pauses the timeline and returns a new Tween that animates the timeline's playhead from intro to outro with no ease.\n```\n\n## Nesting Timelines\n\nTimelines can contain other 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);\nmaster.to(\".c\", { opacity: 0 }, \"+=0.2\");\n```\n\n## Controlling Playback\n\n- **tl.play()** \u002F **tl.pause()**\n- **tl.reverse()** \u002F **tl.progress(1)** then **tl.reverse()**\n- **tl.restart()** — from start.\n- **tl.time(2)** — seek to 2 seconds.\n- **tl.progress(0.5)** — seek to 50%.\n- **tl.kill()** — kill timeline and (by default) its children.\n\n## Official GSAP Best practices\n\n- ✅ Prefer timelines for sequencing\n- ✅ Use the **position parameter** (third argument) to place tweens at specific times or relative to labels.\n- ✅ Add **labels** with `addLabel()` for readable, maintainable sequencing.\n- ✅ Pass **defaults** into the timeline constructor so child tweens inherit duration, ease, etc.\n- ✅ Put ScrollTrigger on the timeline (or top-level tween), not on tweens inside a timeline.\n\n## Do Not\n\n- ❌ Chain animations with **delay** when a **timeline** can sequence them; prefer `gsap.timeline()` and the position parameter for multi-step animation.\n- ❌ Forget to pass **defaults** (e.g. `defaults: { duration: 0.5, ease: \"power2.out\" }`) when many child tweens share the same duration or ease.\n- ❌ Forget that **duration** on the timeline constructor is not the same as tween duration; timeline “duration” is determined by its children.\n- ❌ Nest animations that contain a ScrollTrigger; ScrollTriggers should only be on top-level Tweens\u002FTimelines.\n","# GSAP Timeline\n\n## When to Use This Skill\n\nApply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP.\n\n**Related skills:** For single tweens and eases use **gsap-core**; for scroll-driven timelines use **gsap-scrolltrigger**; for React use **gsap-react**.\n\n## Creating a Timeline\n\n```javascript\nconst tl = gsap.timeline();\ntl.to(\".a\", { x: 100, duration: 1 })\n  .to(\".b\", { y: 50, duration: 0.5 })\n  .to(\".c\", { opacity: 0, duration: 0.3 });\n```\n\nBy default, tweens are **appended** one after another. Use the **position parameter** to place tweens at specific times or relative to other tweens.\n\n## Position Parameter\n\nThird argument (or position property in vars) controls placement:\n\n- **Absolute**: `1` — start at 1 second.\n- **Relative (default)**: `\"+=0.5\"` — 0.5s after end; `\"-=0.2\"` — 0.2s before end.\n- **Label**: `\"labelName\"` — at that label; `\"labelName+=0.3\"` — 0.3s after label.\n- **Placement**: `\"\u003C\"` — start when recently-added animation starts; `\">\"` — start when recently-added animation ends (default); `\"\u003C0.2\"` — 0.2s after recently-added animation start.\n\nExamples:\n\n```javascript\ntl.to(\".a\", { x: 100 }, 0);           \u002F\u002F at 0\ntl.to(\".b\", { y: 50 }, \"+=0.5\");      \u002F\u002F 0.5s after last end\ntl.to(\".c\", { opacity: 0 }, \"\u003C\");     \u002F\u002F same start as previous\ntl.to(\".d\", { scale: 2 }, \"\u003C0.2\");    \u002F\u002F 0.2s after previous start\n```\n\n## Timeline Defaults\n\nPass defaults into the timeline so all child tweens inherit:\n\n```javascript\nconst tl = gsap.timeline({ defaults: { duration: 0.5, ease: \"power2.out\" } });\ntl.to(\".a\", { x: 100 }).to(\".b\", { y: 50 }); \u002F\u002F both use 0.5s and power2.out\n```\n\n## Timeline Options (constructor)\n\n- **paused: true** — create paused; call `.play()` to start.\n- **repeat**, **yoyo** — same as tweens; apply to whole timeline.\n- **onComplete**, **onStart**, **onUpdate** — timeline-level callbacks.\n- **defaults** — vars merged into every child tween.\n\n## Labels\n\nAdd and use labels for readable, maintainable sequencing:\n\n```javascript\ntl.addLabel(\"intro\", 0);\ntl.to(\".a\", { x: 100 }, \"intro\");\ntl.addLabel(\"outro\", \"+=0.5\");\ntl.to(\".b\", { opacity: 0 }, \"outro\");\ntl.play(\"outro\");  \u002F\u002F start from \"outro\"\ntl.tweenFromTo(\"intro\", \"outro\"); \u002F\u002F pauses the timeline and returns a new Tween that animates the timeline's playhead from intro to outro with no ease.\n```\n\n## Nesting Timelines\n\nTimelines can contain other 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);\nmaster.to(\".c\", { opacity: 0 }, \"+=0.2\");\n```\n\n## Controlling Playback\n\n- **tl.play()** \u002F **tl.pause()**\n- **tl.reverse()** \u002F **tl.progress(1)** then **tl.reverse()**\n- **tl.restart()** — from start.\n- **tl.time(2)** — seek to 2 seconds.\n- **tl.progress(0.5)** — seek to 50%.\n- **tl.kill()** — kill timeline and (by default) its children.\n\n## Official GSAP Best practices\n\n- ✅ Prefer timelines for sequencing\n- ✅ Use the **position parameter** (third argument) to place tweens at specific times or relative to labels.\n- ✅ Add **labels** with `addLabel()` for readable, maintainable sequencing.\n- ✅ Pass **defaults** into the timeline constructor so child tweens inherit duration, ease, etc.\n- ✅ Put ScrollTrigger on the timeline (or top-level tween), not on tweens inside a timeline.\n\n## Do Not\n\n- ❌ Chain animations with **delay** when a **timeline** can sequence them; prefer `gsap.timeline()` and the position parameter for multi-step animation.\n- ❌ Forget to pass **defaults** (e.g. `defaults: { duration: 0.5, ease: \"power2.out\" }`) when many child tweens share the same duration or ease.\n- ❌ Forget that **duration** on the timeline constructor is not the same as tween duration; timeline “duration” is determined by its children.\n- ❌ Nest animations that contain a ScrollTrigger; ScrollTriggers should only be on top-level Tweens\u002FTimelines.\n",{"name":5,"license":15,"description":7},"main","f1bcf88a052c2ccbb297666b33fb820cfd94ac71",".codex\u002Fskills\u002Fdesign\u002Fvisual-and-motion\u002Fgsap-timeline",0,"https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas","https:\u002F\u002Fgithub.com\u002Fpeterish8","Building real-world products with clean UI, smart architecture, and privacy in mind. Frontend-focused, full-stack curious.","2026-10-15 19:02:31",{"source":8,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add peterish8\u002Fprats-skill-atlas --skill gsap-timeline",{"tool":38,"command":39},"bunx","bunx skills add peterish8\u002Fprats-skill-atlas --skill gsap-timeline",{"tool":41,"command":42},"pnpm","pnpm dlx skills add peterish8\u002Fprats-skill-atlas --skill gsap-timeline","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fdesign\u002Fvisual-and-motion\u002Fgsap-timeline\u002FSKILL.md",true,[],[47,56,64,72,79,87],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":51,"licenseFileUrl":52,"sourceHtmlUrl":53,"categories":54,"keywords":55,"publishedAt":19},"01M7CTAZW9MHV3RWH2ZEKDQXG9","skill-creator","Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftools-utilities\u002Fgeneral-purpose\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftools-utilities\u002Fgeneral-purpose\u002Fskill-creator\u002FSKILL.md",[],[],{"skillNo":57,"name":58,"nameZh":6,"description":59,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":60,"sourceHtmlUrl":61,"categories":62,"keywords":63,"publishedAt":19},"01M7CT8MG7NB1JR67XYZ9EWW3B","seo-audit","Full website SEO audit with parallel subagent delegation. Crawls up to 500 pages, detects business type, delegates to up to 15 specialists (8 always + 7 conditional), generates health score. Use when user says audit, full SEO check, analyze my site, or website health check.","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftesting\u002Fqa-and-verification\u002Fseo-audit\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftesting\u002Fqa-and-verification\u002Fseo-audit\u002FSKILL.md",[],[],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":51,"licenseFileUrl":68,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":19},"01M7CT87F6GQ0WAD393PKPAGGX","playwright","Use when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via `playwright-cli` or the bundled wrapper script.","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftesting\u002Fqa-and-verification\u002Fplaywright\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftesting\u002Fqa-and-verification\u002Fplaywright\u002FSKILL.md",[],[],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":78,"publishedAt":19},"01M7CT809RF90MG98MYEA97D8Z","gsap-performance","Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftesting\u002Fqa-and-verification\u002Fgsap-performance\u002FSKILL.md",[],[],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":83,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":86,"publishedAt":19},"01M7CT7Q4VD995JHZMQQFBZZV9","firecrawl-seo-audit","Audit a website's SEO with Firecrawl. Use when the user asks for an SEO audit, metadata and heading review, sitemap\u002Fsite-structure analysis, keyword opportunities, competitor SERP comparison, or prioritized search optimization recommendations.","ISC","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftesting\u002Fqa-and-verification\u002Ffirecrawl-seo-audit\u002FSKILL.md",[],[],{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":83,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":19},"01M7CT7JRJFC5RAKJBAP0VS1CV","firecrawl-qa","QA test a live website with Firecrawl browser and scrape evidence. Use when the user wants exploratory QA, form testing, navigation\u002Flink checks, responsive checks, performance observations, bug reports, or a pre-launch quality review.","https:\u002F\u002Fgithub.com\u002Fpeterish8\u002Fprats-skill-atlas\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Ftesting\u002Fqa-and-verification\u002Ffirecrawl-qa\u002FSKILL.md",[],[]]