skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

gsap-plugins

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Working with GSAP's plugin ecosystem requires knowing which plugins exist, how to register them correctly, and their configuration options — mistakes like missing registration or outdated Club GSAP licensing assumptions cause broken animations and wasted debugging time. ## Core Features & Use Cases - Plugin Registration & Licensing Guidance: Covers gsap.registerPlugin() patterns and clarifies that all plugins are free via the public npm package, with no Club GSAP tokens needed. - Scroll, Drag & Observer Plugins: ScrollToPlugin, ScrollSmoother, Draggable with Inertia, and Observer for scroll-to, momentum drag, and gesture detection. - Text, SVG & Physics Plugins: SplitText and ScrambleText for text effects, DrawSVG/MorphSVG/MotionPath for SVG animation, plus CustomEase, Physics2D, Flip, and GSDevTools. - Use Case: A developer wants a headline to animate character-by-character on page load and an SVG icon to morph into another shape on click — this Skill provides the exact SplitText and MorphSVG registration, configuration tables, and code patterns. ## Quick Start Ask the AI to register the right GSAP plugins and write the animation code for your effect, such as splitting a heading into characters with SplitText or morphing one SVG path into another.

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 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 the returned split.chars array with stagger. For re-splitting on resize or font load, enable autoSplit and create animations inside 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 auth token is needed.

How do I morph one SVG shape into another with GSAP?▼

Register MorphSVGPlugin and tween the morphSVG property with a target selector or path data. Use shapeIndex to fix twisted morphs, type "rotational" to avoid kinks, and convertToPath() for circle, rect, or ellipse elements.

Why is my GSAP plugin animation not working?▼

The most common cause is using a plugin in a tween without registering it first via gsap.registerPlugin(). Also verify the plugin is imported from the correct path and that DrawSVG targets have a visible stroke set.

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 a separate skill for scroll-driven animation timelines and pinning.

Related Skills

Explore More Software Engineering Skills→
SharmaAnurag99SharmaAnurag99

gsap-core

Animate DOM and SVG elements with GSAP core tweens and utilities.

Community
Intermediate
MicrockMicrock

gsap-react

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

Community
Intermediate
gtpgg1013gtpgg1013

gsap-fundamentals

Create GSAP tweens, timelines, and stagger effects for web interfaces.

Community
Intermediate
Aniket-a14Aniket-a14
1

framer-motion-animator

Generate Framer Motion animations for React components with declarative API.

Community
Intermediate