skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

gsap-plugins

Implements GSAP plugin registration and usage for scroll, drag, SVG, text, and physics animations.

Updated Jul 16, 2026
Search Tags:#javascript#animation#svg#gsap#scrolltrigger#splittext#draggable
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill gsap-plugins-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-plugins
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/gsap-plugins
Command: npx skills add https://github.com/X-manist/Cohmira --skill gsap-plugins-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP ships dozens of plugins with distinct registration requirements, configuration options, and DOM constraints, and misusing them causes silent failures or broken animations. This Skill provides correct, copy-ready patterns for registering and configuring every major GSAP plugin. ## Core Features & Use Cases - Plugin Registration: Enforces gsap.registerPlugin() before first use, including React and useGSAP contexts. - Scroll, Drag & Layout: Covers ScrollToPlugin, ScrollSmoother, Flip layout transitions, Draggable with InertiaPlugin momentum, and Observer gesture detection. - Text, SVG & Physics: Guides SplitText character/word/line animations, ScrambleText, DrawSVG stroke reveals, MorphSVG shape morphing, MotionPath, CustomEase, Physics2D, and GSDevTools debugging. - Use Case: When building a landing page that needs a draggable card carousel with momentum, scroll-to navigation buttons, and a headline that animates character-by-character, this Skill supplies the exact registration calls and configuration objects for Draggable, InertiaPlugin, ScrollToPlugin, and SplitText. ## Quick Start Ask the AI to register the required GSAP plugins and write a Draggable carousel with inertia plus a SplitText headline animation for your page.

Frequently Asked Questions about gsap-plugins

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I register GSAP plugins in a project?▼

Import each plugin and call gsap.registerPlugin() once before any tween uses it, for example gsap.registerPlugin(ScrollToPlugin, Flip, Draggable). In React, register at the top level rather than inside a re-rendering component.

How do I animate an element along an SVG path with GSAP?▼

Use MotionPathPlugin with a motionPath config specifying the path, align target, and alignOrigin. Set autoRotate to true so the element rotates to follow the path tangent during the animation.

What is the difference between ScrollTrigger and ScrollToPlugin?▼

ScrollToPlugin animates the scroll position of the window or a scrollable element to a target, while ScrollTrigger ties animations to scroll position and is covered by the separate gsap-scrolltrigger skill. Use ScrollToPlugin for one-off scroll-to-element actions.

Why is my GSAP Draggable not throwing with momentum?▼

Momentum requires InertiaPlugin registered alongside Draggable and inertia: true in the Draggable config. Without InertiaPlugin, the element stops immediately on release.

Does SplitText work with SVG text elements?▼

No, SplitText does not support SVG text elements. It splits HTML element text into chars, words, and lines, and works best when splitting after custom fonts load or with autoSplit enabled.

Why does my DrawSVG animation show nothing?▼

DrawSVG only animates strokes, so the target element must have a visible stroke and stroke-width set in CSS or as SVG attributes. It does not affect fill, and contents of use elements cannot be modified.

Related Skills

Explore More Software Engineering Skills→
noklip-ionoklip-io
1

gsap

Create GSAP web animations with timelines and scroll-triggered effects.

Official
Intermediate
hanzoaihanzoai

gsap-plugins

Register and use GSAP plugins for frontend animations.

Official
Advanced
kartojalkartojal
11

gsap-timeline

Sequence GSAP tweens with position parameters, labels, and nested timelines.

Community
Intermediate
wubq511wubq511
6

framer-motion-animator

Implement declarative web animations with Framer Motion and React.

Community
Intermediate