greensock/gsap-skills
9 skills289k installs112k 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.39.6kinstalls2Gsap 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.37.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.36.5kinstalls4Gsap 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.36.4kinstalls5Gsap 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.35.7kinstalls6Gsap UtilsOfficial GSAP skill for gsap.utils - clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP. --- name: gsap-utils description: Official GSAP skill for gsap.utils - clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP. license: MIT --- # gsap.utils ## When to Use This Skill Apply when writing or reviewing code that uses **gsap.utils** for math, array/collection handling, unit parsing, or value mapping in animations (e.g. mapping scroll to a value, randomizing, snapping to a grid, or normalizing inputs). **Related skills:** Use with **gsap-core**, **gsap-timeline**, and **gsap-scrolltrigger** when building animations; CustomEase and other easing utilities are in **gsap-plugins**. ## Overview **gsap.utils** provides pure helpers; no need to register.35kinstalls7Gsap 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.34.6kinstalls8Gsap 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.33.3kinstalls9Gsap 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