skills.rest
luce12
luce12COMMUNITY
Explore all skills by this author →
GitHub

gsap-plugins

Implements GSAP plugin animations including Flip, Draggable, SplitText, MorphSVG, and physics effects.

1|Updated Aug 6, 2026
Search Tags:#frontend#animation#gsap#scroll#splittext#draggable#morphsvg
One-click install
npx skills add https://github.com/luce12/agent-dev-workflow --skill gsap-plugins-luce12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-plugins
Source: https://github.com/luce12/agent-dev-workflow/tree/main/toolkits/gsap-plugins
Command: npx skills add https://github.com/luce12/agent-dev-workflow --skill gsap-plugins-luce12

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP ships dozens of plugins with distinct registration requirements, configuration options, and caveats, and using them incorrectly causes silent failures, broken animations, or outdated licensing advice. This Skill provides accurate, current guidance for registering and configuring every GSAP plugin so animations work on the first attempt. ## Core Features & Use Cases - Plugin Registration & Licensing: Correctly registers plugins with gsap.registerPlugin() and clarifies that all plugins are free in the public npm package with no Club GSAP token required. - Scroll, DOM & Text Plugins: Covers ScrollToPlugin, ScrollSmoother, Flip layout transitions, Draggable with Inertia momentum, Observer gestures, SplitText character/word/line splitting, and ScrambleText effects. - SVG, Easing & Physics: Guides DrawSVG stroke reveals, MorphSVG shape morphing with shapeIndex tuning, MotionPath movement, CustomEase curves, and Physics2D/PhysicsProps animations. - Use Case: When building a landing page with a draggable card carousel, staggered headline text reveal, and an SVG icon morph, use this Skill to get the correct imports, registration calls, and configuration tables for each plugin. ## Quick Start Use the gsap-plugins skill to add a SplitText character stagger animation and a Draggable slider with inertia to my 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 from the gsap package and call gsap.registerPlugin() once before using it in any tween. In React, register at the top level or once in the app, never inside a component that re-renders.

How to animate text character by character with GSAP?▼

Use SplitText.create() with type "words, chars" to split the element, then animate split.chars with stagger. For autoSplit re-splits, create animations inside onSplit() and return the tween for automatic cleanup.

Do GSAP plugins like SplitText and MorphSVG require a paid license?▼

No. Since Webflow's acquisition of GSAP, every plugin is free including for commercial use. Install everything from the public gsap npm package; no Club GSAP membership, license key, or auth token is needed.

Why is my GSAP DrawSVG animation not showing anything?▼

DrawSVG only animates strokes, so the element must have a visible stroke and stroke-width set in CSS or as SVG attributes. Without a stroke, nothing is drawn regardless of the drawSVG values.

How do I fix a MorphSVG morph that twists or inverts?▼

Set the shapeIndex option to control which start point maps to the first end point. Use shapeIndex: "log" once to log the auto-calculated value, then paste that number or array into the tween.

Can I use GSAP Draggable with momentum scrolling?▼

Yes, register both Draggable and InertiaPlugin, then set inertia: true in Draggable.create(). This enables throw physics so elements glide to a stop after release, with onThrowUpdate and onThrowComplete callbacks.

Related Skills

Explore More Software Engineering Skills→
AlejandroFiginiAlejandroFigini

gsap-core

Create GSAP tweens and timelines for UI animations across frameworks.

Community
Advanced
ananddtyagiananddtyagi
688

Comprehensive Testing & Verification

Test Vue.js application functionality with Playwright and enforce evidence-based verification protocols.

Community
Intermediate
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
wubq511wubq511
6

framer-motion-animator

Implement declarative web animations with Framer Motion and React.

Community
Intermediate