skills.rest
trobias
trobiasCOMMUNITY
Explore all skills by this author →
Website𝕏@tobiasnwnGitHub

gsap-plugins

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

Updated Aug 28, 2026
Search Tags:#javascript#animation#svg#gsap#splittext#draggable#flip
One-click install
npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill gsap-plugins-trobias
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-plugins
Source: https://github.com/trobias/portfolio-nextjs-v2/tree/main/.agents/skills/gsap-plugins
Command: npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill gsap-plugins-trobias

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 guidance for registering and using GSAP plugins correctly, preventing common errors like unregistered plugins, broken SplitText line breaks, or malformed FLIP transitions. ## Core Features & Use Cases - Plugin Registration & Scroll: Covers gsap.registerPlugin() patterns, ScrollToPlugin for scroll-to animations, and ScrollSmoother DOM structure. - DOM, Text & SVG Plugins: Documents Flip for layout transitions, Draggable with InertiaPlugin for momentum dragging, Observer for gesture input, SplitText and ScrambleText for text effects, and DrawSVG, MorphSVG, and MotionPath for SVG animation. - Easing, Physics & Dev Tools: Includes CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin, and GSDevTools for debugging timelines. - Use Case: A developer building a landing page needs character-by-character headline reveals, a draggable card carousel with momentum, and an SVG icon morph. This Skill supplies the correct registration order, configuration tables, and cleanup patterns for each. ## Quick Start Ask the AI to register the required GSAP plugins and write a SplitText character 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?▼

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 of the app rather than inside components that re-render.

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

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

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

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

Does DrawSVG work on SVG fill or only stroke?▼

DrawSVG only animates the stroke via stroke-dashoffset and stroke-dasharray; it does not affect fill. The element must have a visible stroke and stroke-width set, otherwise nothing is drawn.

Why does my GSAP plugin animation not run?▼

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 target elements exist when the tween is created.

When should I use Flip instead of a regular GSAP tween?▼

Use Flip when animating between two layout states, such as reordering lists or expanding cards. Capture the state with Flip.getState(), change the DOM, then call Flip.from() to animate the transition.

Related Skills

Explore More Software Engineering Skills→
SharmaAnurag99SharmaAnurag99

gsap-core

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

Community
Intermediate
JenilRevaliyaJenilRevaliya

gsap-expert

Implements GSAP 3 animations including tweens, timelines, ScrollTrigger, and React useGSAP integration.

Community
Intermediate
calesthiocalesthio
55.1k

gsap-scrolltrigger

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

Community
Intermediate
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate