skills.rest
TOBIASpuchito
TOBIASpuchitoCOMMUNITY
Explore all skills by this author →
GitHub

gsap-plugins

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

Updated Jun 9, 2026
Search Tags:#frontend#javascript#animation#svg#gsap#scroll#splittext
One-click install
npx skills add https://github.com/TOBIASpuchito/Citec --skill gsap-plugins-tobiaspuchito
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-plugins
Source: https://github.com/TOBIASpuchito/Citec/tree/main/citec-frontend/.claude/skills/gsap-plugins
Command: npx skills add https://github.com/TOBIASpuchito/Citec --skill gsap-plugins-tobiaspuchito

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Developers often misuse GSAP plugins by forgetting registration, following outdated Club GSAP licensing instructions, or misconfiguring plugin options like SplitText splitting or MorphSVG shape indexes, leading to broken animations and wasted debugging time. ## Core Features & Use Cases - Plugin Registration & Licensing Guidance: Register plugins correctly with gsap.registerPlugin() and install everything from the public gsap npm package without outdated Club GSAP tokens. - Scroll, DOM & Text Plugins: Configure ScrollToPlugin, ScrollSmoother, Flip, Draggable with Inertia, Observer, SplitText, and ScrambleText for scroll-to, FLIP layout transitions, drag interactions, and per-character text animation. - SVG, Easing & Physics Plugins: Animate stroke drawing with DrawSVG, morph shapes with MorphSVG, move elements along paths with MotionPath, and apply Physics2D or custom eases like CustomEase and CustomWiggle. - Use Case: When building a landing page with a draggable card carousel, staggered headline reveal, and an SVG icon that morphs on hover, this Skill provides the correct registration order, config tables, and code patterns for each plugin. ## Quick Start Ask the AI to register the needed GSAP plugins and write a SplitText character-stagger animation for a heading element.

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, not inside components that re-render.

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

Use SplitText.create() with type "chars" or "words, chars", then animate split.chars with a stagger. Call split.revert() on cleanup or let gsap.context() handle reversion automatically.

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

No. Since Webflow's acquisition of GSAP, all plugins are free including for commercial use. Install everything from the public gsap npm package; no license key, auth token, or private registry 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.

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

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 array into your tween.

When should I use ScrollToPlugin instead of ScrollTrigger?▼

Use ScrollToPlugin when you only need to animate scroll position to an element or offset without scroll-linked triggers. ScrollTrigger is covered by a separate skill and is required for scroll-scrubbed animations and ScrollSmoother.

Related Skills

Explore More Software Engineering Skills→
whimzyLivewhimzyLive
3

gsap-core

Implement GSAP core animations for DOM and SVG elements in React and Vue.

Community
Advanced
Hendo10XHendo10X

gsap

Create GSAP animations with timelines, ScrollTrigger, and React integration.

Community
Advanced
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

hyperframes-animation

Create complex animations across GSAP, Lottie, Three.js, and other runtimes.

Official
Advanced