skills.rest
Gito125
Gito125COMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-plugins

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

Updated May 4, 2026
Search Tags:#javascript#animation#svg#gsap#scrolltrigger#splittext#draggable
One-click install
npx skills add https://github.com/Gito125/gideon_portfolio --skill gsap-plugins-gito125
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-plugins
Source: https://github.com/Gito125/gideon_portfolio/tree/main/.github/skills/gsap-plugins
Command: npx skills add https://github.com/Gito125/gideon_portfolio --skill gsap-plugins-gito125

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP's plugin ecosystem is large and each plugin has distinct registration requirements, configuration options, and pitfalls. This Skill provides accurate, reference-grade guidance for registering and using GSAP plugins correctly, preventing common errors like unregistered plugins, wrong DrawSVG values, or broken SplitText line breaks. ## Core Features & Use Cases - Plugin Registration: Enforces correct gsap.registerPlugin() usage before any plugin call, including React and useGSAP contexts. - Scroll & DOM Plugins: Covers ScrollToPlugin, ScrollSmoother, Flip (FLIP layout transitions), Draggable with InertiaPlugin momentum, and Observer gesture normalization. - Text & SVG Animation: Details SplitText (chars/words/lines, autoSplit, masks, accessibility), ScrambleText, DrawSVG stroke drawing, MorphSVG shape morphing, and MotionPath path-following. - Easing, Physics & Dev Tools: Documents CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin, and GSDevTools debugging. - Use Case: When building a scroll-driven portfolio with character-by-character heading reveals and SVG line-drawing effects, use this Skill to correctly register SplitText and DrawSVGPlugin, configure autoSplit re-splitting, and animate stroke segments without rendering bugs. ## Quick Start Ask the AI to register the required GSAP plugins and write the animation code for your specific effect, such as a SplitText character reveal or a Draggable slider with inertia.

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?▼

Call gsap.registerPlugin() once with every plugin you use, before any tween or API call that references them. In React, register at the top level or once in the app, never inside a component that re-renders.

How do I animate text character by character with GSAP?▼

Use SplitText.create() with type "chars" or "words, chars", then animate the returned split.chars array with stagger. For responsive layouts, enable autoSplit and create animations inside onSplit() so they re-sync on re-split.

Why is my DrawSVG animation not showing anything?▼

DrawSVG only animates strokes, so the target element must have a visible stroke and stroke-width set in CSS or as SVG attributes. Also verify the plugin is registered and the drawSVG value uses the "start end" segment format.

How do I make an element draggable with momentum in GSAP?▼

Register both Draggable and InertiaPlugin, then call Draggable.create() with type "x,y" and inertia: true. Use bounds to constrain the drag area and edgeResistance to control behavior past the bounds.

Can I use GSAP Flip for layout transition animations?▼

Yes. Capture the current layout with Flip.getState(), make your DOM changes such as reordering or class changes, then call Flip.from() with the saved state to animate from the old layout to the new one.

Should GSDevTools be included in production builds?▼

No. GSDevTools is a development-only debugging UI for scrubbing timelines and inspecting animations. Register and create it during development, but exclude it from production bundles.

Related Skills

Explore More Software Engineering Skills→
AlejandroFiginiAlejandroFigini

gsap-core

Create GSAP tweens and timelines for UI animations across frameworks.

Community
Advanced
calesthiocalesthio
55.1k

gsap-plugins

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

Community
Intermediate
MicrockMicrock

gsap-react

Integrate GSAP animations into React components using the useGSAP hook with automatic cleanup and scoping.

Community
Intermediate
wubq511wubq511
6

framer-motion-animator

Implement declarative web animations with Framer Motion and React.

Community
Intermediate