Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll-to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap-scrolltrigger).
Fetches gsap-plugins from greensock/gsap-skills and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/gsap-plugins
Restart Cursor to activate gsap-plugins. Access via /gsap-plugins in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll-to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap-scrolltrigger).
Related skills: For core tweens use gsap-core; for ScrollTrigger use gsap-scrolltrigger; for React use gsap-react.
Registering Plugins
Register each plugin once so GSAP (and bundlers) know to include it. Use gsap.registerPlugin() with every plugin used in the project:
✅ Register before using the plugin in any tween or API call.
✅ In React, register at top level or once in the app (e.g. before first useGSAP); do not register inside a component that re-renders. useGSAP is a plugin that needs to be registered before use.
Scroll
ScrollToPlugin
Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger.
Target scroll position (number), or "max" for maximum
element
Selector or element to scroll to (for scroll-into-view)
offsetX, offsetY
Offset in pixels from the target position
ScrollSmoother
Smooth scroll wrapper (smooths native scroll). Requires ScrollTrigger and a specific DOM structure (content wrapper + smooth wrapper). Use when smooth, momentum-style scroll is needed. See GSAP docs for setup; register after ScrollTrigger. DOM structure would look like:
<body><divid="smooth-wrapper"><divid="smooth-content"><!--- ALL YOUR CONTENT HERE ---></div></div><!-- position: fixed elements can go outside ---></body>
DOM / UI
Flip
Capture state with Flip.getState(), then apply changes (e.g. layout or class changes), then use Flip.from() to animate from the previous state to the new state (FLIP: First, Last, Invert, Play). Use when animating between two layout states (lists, grids, expanded/collapsed).
gsap.registerPlugin(Flip);const state =Flip.getState(".item");// change DOM (reorder, add/remove, change classes)Flip.from(state,{duration:0.5,ease:"power2.inOut"});
Flip — key config (Flip.from vars):
Option
Description
absolute
Use position: absolute during the flip (default: false)
nested
When true, only the first level of children is measured (better for nested transforms)
scale
When true, scale elements to fit (avoids stretch); default true
simple
When true, only position/scale are animated (faster, less accurate)
Element, selector, or { minX, maxX, minY, maxY } to constrain drag
inertia
true to enable throw/momentum (requires InertiaPlugin)
edgeResistance
0–1; resistance when dragging past bounds
cursor
CSS cursor during drag
onDragStart, onDrag, onDragEnd
Callbacks; receive event and target
onThrowUpdate, onThrowComplete
Callbacks when inertia is active
Inertia (InertiaPlugin)
Works with Draggable for momentum after release, or track the inertia/velocity of any property of any object so that it can then seamlessly glide to a stop using a simple tween. Register with Draggable when using inertia: true:
Then use "auto" to continue the current velocity and glide to a stop:
gsap.to(obj,{inertia:{x:"auto"}});
Observer
Normalizes pointer and scroll input across devices. Use for swipe, scroll direction, or custom gesture logic without tying directly to scroll position like ScrollTrigger.
Callbacks when swipe/scroll passes tolerance in that direction
tolerance
Pixels before direction is detected; default 10
type
"touch", "pointer", or "wheel" (default: "touch,pointer")
Text
SplitText
Splits an element’s text into characters, words, and/or lines (each in its own element) for staggered or per-unit animation. Use when animating text character-by-character, word-by-word, or line-by-line. Returns an instance with chars, words, lines (and masks when mask is set). Restore original markup with revert() or let gsap.context() revert. Integrates with gsap.context(), matchMedia(), and useGSAP(). API: SplitText.create(target, vars) (target = selector, element, or array).
›Access to product documentation and roadmap tools (Jira, Notion, etc.)
›Understanding of product management frameworks (RICE, Jobs-to-be-Done, etc.)
›Stakeholder contact information and communication channels
Time Estimate
30-60 minutes to see productivity improvements
Steps
1Install product management skill
2Start with user story generation for known feature
3Progress to competitive analysis: research 2-3 competitors
4Use for roadmap prioritization: apply RICE/ICE scoring
5Draft stakeholder communications and refine based on feedback
6Build template library for recurring PM tasks
7Share effective prompts with product team
Common Pitfalls
⚠Not validating competitive research—verify facts before sharing
⚠Accepting user stories without involving engineering team
⚠Over-relying on frameworks without qualitative judgment
⚠Not customizing outputs to company culture and communication style
⚠Skipping stakeholder validation of generated requirements
Best Practices
✓ Do
+Validate research and competitive analysis with real data
+Collaborate with engineering when generating technical requirements
+Customize frameworks and templates to your company context
+Use skill for first drafts, refine with stakeholder input
+Document successful prompt patterns for PM tasks
+Combine AI efficiency with human judgment and intuition
✗ Don't
−Don't publish competitive analysis without fact-checking
−Don't finalize user stories without engineering review
−Don't make prioritization decisions solely on AI scoring
−Don't skip customer validation of generated requirements
−Don't ignore company-specific context and culture
💡 Pro Tips
★Provide context: company goals, constraints, customer feedback
★Ask for alternatives: 'Show 3 ways to prioritize this roadmap'
★Request stakeholder-specific formatting: 'Executive summary vs. engineering spec'
★Use skill for 70% generation + 30% customization to company needs
When to Use This
✓ Use when
Use for user story writing, competitive research, roadmap prioritization, stakeholder communication, and PRD drafting. Best for reducing repetitive documentation and research work.
✗ Avoid when
Avoid for strategic product vision (requires deep customer empathy), pricing decisions (needs market and financial expertise), or when face-to-face customer discovery is more valuable than speed.
Learning Path
1Basic: user stories, feature specs, status updates
