skills.rest
malikkotb
malikkotbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-plugins

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

Updated Sep 6, 2026
Search Tags:#javascript#animation#gsap#scroll#splittext#draggable#morphsvg
One-click install
npx skills add https://github.com/malikkotb/shellpluscore --skill gsap-plugins-malikkotb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-plugins
Source: https://github.com/malikkotb/shellpluscore/tree/main/.agents/skills/gsap-plugins
Command: npx skills add https://github.com/malikkotb/shellpluscore --skill gsap-plugins-malikkotb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP ships dozens of plugins with distinct registration requirements, configuration options, and gotchas; this Skill provides correct, up-to-date guidance so animations using ScrollToPlugin, Flip, Draggable, SplitText, MorphSVG, and others work on the first attempt without outdated licensing or install advice. ## Core Features & Use Cases - Plugin Registration & Install: Correct gsap.registerPlugin() patterns and modern install guidance (all plugins free in the public npm package, no Club GSAP tokens). - Scroll, DOM & UI Plugins: ScrollToPlugin, ScrollSmoother, Flip layout transitions, Draggable with Inertia momentum, and Observer gesture normalization. - Text, SVG & Physics Plugins: SplitText and ScrambleText for text effects, DrawSVG/MorphSVG/MotionPath for SVG animation, CustomEase and physics plugins, plus GSDevTools for debugging. - Use Case: A developer needs to animate a heading character-by-character and morph one SVG icon into another; the Skill supplies the exact SplitText onSplit pattern and MorphSVG shapeIndex configuration with working code. ## Quick Start Ask the AI to register the GSAP plugin you need and write an animation using it, for example a Flip layout transition or a DrawSVG stroke reveal.

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

Import each plugin from the gsap package and call gsap.registerPlugin() once before using 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 text character by character with GSAP?▼

Use SplitText: call SplitText.create('.heading', { type: 'words, chars' }) and animate split.chars with a stagger. For re-splitting on font load or resize, use autoSplit: true and return your tween from onSplit().

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 private registry token is needed.

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. It works on path, line, polyline, polygon, rect, and ellipse elements, but not on fill or contents of <use>.

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 print the auto-calculated value, then paste that number (or an array for multi-segment paths) into your tween.

When should I use Observer instead of ScrollTrigger?▼

Use Observer when you need normalized swipe, wheel, or scroll-direction input for custom gesture logic without tying animation to scroll position. ScrollTrigger, covered by a separate skill, is for scroll-linked animation timelines.

Related Skills

Explore More Software Engineering Skills→
fanguyunfanguyun

gsap-core

Create GSAP animations for DOM elements and SVGs with sequencing.

Community
Advanced
calesthiocalesthio
55.1k

gsap-scrolltrigger

Implements scroll-linked animations, pinning, and scrubbing with the GSAP ScrollTrigger plugin.

Community
Intermediate
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
hanzoaihanzoai

framer-motion

Implement Disney's 12 animation principles in React with Framer Motion.

Official
Intermediate