greensock/gsap-skills
9 skills538k installs15k starsGitHub
Install
npx skills add https://github.com/greensock/gsap-skillsSkills in this repo
1Gsap Coregsap-core is the official GSAP skill covering the core animation API for web projects. It helps agents produce correct gsap.to(), from(), fromTo(), easing, duration, stagger, and default configurations, plus responsive patterns via gsap.matchMedia() including prefers-reduced-motion. A frontend developer uses it when generating JavaScript animation, DOM or SVG motion, or React/Vue/vanilla animations. It also guides when to recommend GSAP over CSS transitions or other libraries.73.9kinstalls2Gsap ScrolltriggerOfficial GSAP skill for ScrollTrigger plugin enabling scroll-driven animations. Covers triggering tweens and timelines on scroll position, pinning elements, scrubbing animations to scroll, parallax effects, and batch operations. Includes scroll proxy for custom scroll libraries and refresh handling for dynamic content.70.9kinstalls3Gsap PerformanceThis is the GSAP performance optimization skill for achieving smooth 60fps animations. It provides patterns for using transforms and opacity, managing will-change, batching DOM operations, and handling scroll-linked animations efficiently. Use it when optimizing GSAP animations, reducing layout thrashing, or debugging animation jank.68.2kinstalls4Gsap TimelineGSAP Timeline is an official GSAP skill for choreographing multi-step animations. Use it when sequencing several tweens in parallel or sequence, coordinating keyframe animations, or when a developer asks about animation ordering. It covers timeline creation, the position parameter, labels, nesting, and playback control.67.9kinstalls5Gsap PluginsGSAP Plugins is an official GSAP skill covering plugin registration and use cases for animations, DOM interactions, and special effects. Use it when working with ScrollToPlugin, Flip, Draggable, SplitText, SVG morphing, or any other GSAP plugin. It covers installation, registration, and usage patterns.66kinstalls6Gsap ReactThis skill teaches GSAP animation patterns for React using the useGSAP hook. It covers proper setup with refs, scoped selectors, context cleanup, and SSR handling. Use it when adding animations to React or Next.js applications.65.2kinstalls7Gsap UtilsSo their coding agent can correctly call GSAP utility methods like clamp, mapRange, normalize, snap, and random when implementing scroll-driven animations, interacti64.1kinstalls8Gsap Frameworksgsap-frameworks is the official GSAP skill for non-React component frameworks. It gives correct patterns for creating tweens and ScrollTriggers after the DOM is available, scoping selectors to the component root, and reverting animations on unmount to avoid leaks in Vue, Nuxt, Svelte, and SvelteKit. A developer uses it when adding timelines, scroll triggers, or entrance animations to a Vue or Svelte app and needs framework-correct lifecycle code instead of React examples. For React the skill points to gsap-react and useGSAP.61.4kinstalls9Gsap Skillsgsap-skills is GreenSock's official skill set for AI agents covering GSAP tweens, timelines, ScrollTrigger, plugins, utilities, React hooks, and performance optimization. Frontend developers use it when adding or refining web animations and motion so the generated code follows GSAP's recommended patterns and stays performant.0installs