Labelled "official" and updated logo
This commit is contained in:
jackdoyle
@@ -9,7 +9,7 @@
|
||||
"plugins": [
|
||||
{
|
||||
"name": "gsap-skills",
|
||||
"description": "Teach AI agents correct GSAP usage including tweens, timelines, ScrollTrigger, plugins, utilities, React hooks, and performance optimization",
|
||||
"description": "Official GSAP skills for Cursor, Claude and other AI agents, covering tweens, timelines, ScrollTrigger, plugins, utilities, React hooks, and performance optimization",
|
||||
"author": {
|
||||
"name": "GreenSock"
|
||||
},
|
||||
|
||||
@@ -11,14 +11,12 @@
|
||||
"keywords": [
|
||||
"gsap",
|
||||
"greensock",
|
||||
"animation",
|
||||
"javascript animation",
|
||||
"scrolltrigger",
|
||||
"timeline",
|
||||
"react animation",
|
||||
"performance",
|
||||
"tweens",
|
||||
"plugins"
|
||||
"web animation"
|
||||
],
|
||||
"logo": "./assets/gsap-icon-square.svg",
|
||||
"logo": "./assets/gsap-icon-inverted.svg",
|
||||
"skills": ["skills"]
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# gsap-skills
|
||||
|
||||
Official AI skills for GSAP. These skills teach AI coding agents how to correctly use the GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage.
|
||||
Official AI skills for GSAP. These skills teach AI coding agents how to correctly use the GSAP (GreenSock Animation Platform), including best practices, common animation patterns, plugin usage, performance optimization, as well as usage in frameworks like React, Vue, and others.
|
||||
|
||||
Skills follow the [Agent Skills](https://agentskills.io) format and work with the [skills](https://github.com/vercel-labs/skills) CLI (Cursor, Claude Code, Codex, Windsurf, GitHub Copilot, and others).
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="gsap-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
|
||||
<defs>
|
||||
<style>.b{fill:#0ae448;}.c{fill:#0e100f;}</style>
|
||||
</defs>
|
||||
<rect class="b" width="400" height="400"/>
|
||||
<path class="c"
|
||||
d="M118.16,216.86c1.31,0,2.45-.83,2.7-1.97l4.63-20.09v-.06h0c.02-1.17-.79-2.25-1.95-2.39-.1-.02-.21-.02-.31-.02h-44.49v.05c-1.15.14-2.08.92-2.31,1.95l-4.64,20.13c-.13.55.01,1.11.38,1.56.43.54,1.16.87,1.88.87h6.78c.39,0,.91.06,1.09.3.18.23.16.76-.02,1.43-1.32,4.84-4.45,10.14-8.35,13.2s-10.33,4.9-14.84,2.13c-5.09-3.12-5.95-10.65-6.16-16.01-.44-11.51,1.81-23.06,6.23-33.7,3.17-7.62,9.14-21.36,19.26-21.36,5.74,0,8.63,4.74,8.84,14.47-.01.92.82,1.77,1.76,1.77h26.4c1.28,0,2.34-1.03,2.36-2.31-.01-14.07-3.23-24.83-9.56-31.96-5.99-6.75-14.59-10.13-25.55-10.03-36.04,0-54.75,36.41-58.71,72.49-2.2,19.22,1.43,35.17,10.21,44.91,6.64,7.37,14.47,11.11,26.09,11.11,12.92,0,22.6-2.87,30.45-9.02,9.23-7.22,16.21-19.25,21.37-36.76.11-.4.49-.67.9-.67h5.59l-.03-.02Z"/>
|
||||
<path class="c"
|
||||
d="M169.62,189.84c-9.67-9.38-13.07-14.84-12.96-20.85.09-5.39,3.33-8.47,8.36-8.47s7.48,3.45,7.48,10.55c0,1.57,1.33,2.87,2.93,2.87h24.32c1.28,0,2.34-1.03,2.36-2.29h0c.3-11.66-2.4-20.78-8.02-27.09-5.93-6.66-15.01-10.08-27-10.16-11.97,0-22.28,3.74-29.81,10.81-7.13,6.69-11.15,15.96-11.33,26.08-.31,17.47,9.56,28.57,20.56,39.33,8.52,8.76,10.08,13.1,10,18.04-.1,5.72-2.83,9-7.47,9-1.92,0-3.45-.59-4.56-1.77-1.72-1.81-2.48-5.08-2.2-9.45.1-.57-.06-1.17-.46-1.65-.46-.57-1.13-.9-1.82-.9h-25.15c-1.28,0-2.33,1.02-2.36,2.28-.59,12.13,2.23,21.53,8.4,27.93,6.07,6.31,15.2,9.5,27.16,9.5,23.4,0,38.79-14.62,39.19-37.25.24-13.99-4.86-24.57-17.6-36.52h-.02Z"/>
|
||||
<path class="c"
|
||||
d="M275.35,136.75h-37.64c-1.26,0-1.82,1.09-2.18,1.81l-54.49,120.06v.02s0,.02-.02.03c-.61,1.48.54,3.06,2.14,3.06h26.31c1.42,0,2.36-.43,2.83-1.33l5.22-12.55c.64-1.67.76-1.83,2.59-1.83h25.14c1.75,0,1.78.04,1.76,1.74l-.56,11.67c-.02,1.26,1,2.29,2.28,2.29h26.58c.68,0,1.31-.28,1.73-.78.38-.44.54-1.01.45-1.59l.16-120.31c.02-1.26-1-2.29-2.28-2.29h-.02ZM248.05,217.37c-.18,1.78-.26,1.85-2.01,2l-15.11-.18h-.04,0c-.24,0-.43,0-.59-.03-.39-.04-.66-.41-.56-.79.05-.18.12-.41.23-.7l18.85-46.64c.16-.46.37-.91.58-1.35.31-.63.68-.67.79-.2.1.39-2.16,47.89-2.16,47.89h0Z"/>
|
||||
<path class="c"
|
||||
d="M331.11,136.73h-20c-1.06,0-2.24.57-2.52,1.82,0,0-27.8,120.71-27.8,120.72-.12.56,0,1.11.38,1.57.44.54,1.16.87,1.88.87h24.97c1.34,0,2.26-.66,2.51-1.8,0,0,3.03-13.64,3.03-13.68.21-1.07-.16-1.89-1.11-2.39-.45-.23-.9-.47-1.34-.7l-4.33-2.25-4.31-2.25c-.56-.29-1.11-.58-1.66-.87-.28-.14-.45-.42-.44-.73,0-.46.39-.83.86-.83l13.68.06c4.1.02,8.19-.27,12.22-1.01,28.34-5.23,47.16-27.93,47.7-58.82.46-26.36-14.25-39.72-43.72-39.72h0ZM324.29,208.59h-.53c-1.2,0-1.41-.13-1.45-.18-.02-.03,7.89-34.77,7.9-34.82.2-1,.19-1.58-.43-1.92-.79-.44-12.34-6.53-12.34-6.53-.28-.15-.44-.43-.44-.74,0-.45.39-.83.85-.83h18.27c5.69.18,8.85,5.26,8.7,13.94-.26,15.04-7.41,30.54-20.53,31.07h0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: gsap-core
|
||||
description: Use GSAP core API correctly — gsap.to(), gsap.from(), gsap.fromTo(), easing, duration, stagger, defaults, and gsap.matchMedia() for responsive/accessibility (prefers-reduced-motion). Use when animating DOM elements, SVG, or objects with GSAP, or when the user asks about GSAP tweens, easing, basic animation, responsive animation, or reduced motion. GSAP is used by Webflow Interactions (Webflow acquired GSAP); Webflow outputs or runs GSAP under the hood — GSAP skills apply when debugging or customizing Webflow animations.
|
||||
description: Official GSAP skills for using GSAP core API correctly — gsap.to(), gsap.from(), gsap.fromTo(), easing, duration, stagger, defaults, and gsap.matchMedia() for responsive/accessibility (prefers-reduced-motion). Use when animating DOM elements, SVG, or objects with GSAP, or when the user asks about GSAP tweens, easing, basic animation, responsive animation, or reduced motion. GSAP can be used anywhere JavaScript runs, in any framework (React, Vue, Astro, etc.) or vanilla JS. GSAP powers Webflow Interactions; Webflow runs GSAP under the hood.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
@@ -12,7 +12,7 @@ Apply when writing or reviewing GSAP animations that use the core engine: single
|
||||
|
||||
**Related skills:** For sequencing multiple steps use **gsap-timeline**; for scroll-linked animation use **gsap-scrolltrigger**; for React use **gsap-react**; for plugins (Flip, Draggable, etc.) use **gsap-plugins**; for helpers (clamp, mapRange, etc.) use **gsap-utils**; for performance use **gsap-performance**.
|
||||
|
||||
**Context:** GSAP was acquired by Webflow and powers **Webflow Interactions**. Code generated or run by Webflow’s interaction system is GSAP-based; when users ask about Webflow animations or interactions not behaving as expected, GSAP docs and patterns (e.g. tweens, ScrollTrigger) are relevant for debugging or customizing.
|
||||
**Context:** GSAP powers **Webflow Interactions**. Code generated or run by Webflow’s interaction system is GSAP-based; when users ask about Webflow animations or interactions not behaving as expected, GSAP docs and patterns (e.g. tweens, ScrollTrigger) are relevant for debugging or customizing.
|
||||
|
||||
## When to Use GSAP
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: gsap-frameworks
|
||||
description: Use GSAP correctly in Vue, Svelte, and other non-React frameworks — lifecycle (when to create/kill tweens and ScrollTriggers), scoping selectors, cleanup on unmount. Use when animating in Vue, Nuxt, Svelte, SvelteKit, or when the user asks about GSAP with Vue, Svelte, onMounted, onUnmounted, onMount, onDestroy.
|
||||
description: Use GSAP correctly in Vue, Svelte, and other non-React frameworks — lifecycle (when to create/kill tweens and ScrollTriggers), scoping selectors, cleanup on unmount. Use when animating in Vue, Nuxt, Svelte, SvelteKit, or when the user asks about GSAP with Vue, Svelte, onMounted, onUnmounted, onMount, onDestroy. There is a separate dedicated gsap-react skill for using GSAP in React.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: gsap-performance
|
||||
description: Animate efficiently with GSAP—prefer transforms, avoid layout thrashing, use will-change wisely, and batch updates. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
|
||||
description: Official GSAP skill for animating efficiently with GSAP - prefer transforms, avoid layout thrashing, use will-change wisely, and batch updates. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: gsap-plugins
|
||||
description: Use GSAP plugins correctly — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.
|
||||
description: Official GSAP skill for using GSAP plugins correctly — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: gsap-react
|
||||
description: Use GSAP correctly in React — useGSAP hook, refs, gsap.context(), and cleanup. Use when animating in React, Next.js, or when the user asks about GSAP with React, useGSAP, or cleanup on unmount.
|
||||
description: Official GSAP skill for using GSAP correctly in React — useGSAP hook, refs, gsap.context(), and cleanup. Use when animating in React, Next.js, or when the user asks about GSAP with React, useGSAP, or cleanup on unmount.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: gsap-scrolltrigger
|
||||
description: Use ScrollTrigger for scroll-linked animations, pinning, scrub, and triggers. Use when building scroll-based animations, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning with GSAP.
|
||||
description: Official GSAP skill for using ScrollTrigger for scroll-linked animations, pinning, scrub, and triggers. Use when building scroll-based animations, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning with GSAP.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: gsap-timeline
|
||||
description: Create and control GSAP timelines — gsap.timeline(), position parameter, nesting, and playback controls. Use when sequencing multiple animations, choreographing keyframes, or when the user asks about GSAP timelines, sequencing, or animation order.
|
||||
description: Official GSAP skill for creating and controlling GSAP timelines — gsap.timeline(), position parameter, nesting, and playback controls. Use when sequencing multiple animations, choreographing keyframes, or when the user asks about GSAP timelines, sequencing, or animation order.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: gsap-utils
|
||||
description: Use gsap.utils for clamping, distribution, interpolation, mapping, random, snapping, arrays, and strings. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.
|
||||
description: Official GSAP skill for using gsap.utils for clamping, distribution, interpolation, mapping, random, snapping, arrays, and strings. Use when the user asks about gsap.utils or utility functions, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.
|
||||
license: MIT
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user