skills.rest
KKChen666
KKChen666COMMUNITY
Explore all skills by this author →
GitHub

gsap-plugins

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

Updated Jun 17, 2026
Search Tags:#frontend#animation#svg#gsap#scroll#splittext#draggable
One-click install
npx skills add https://github.com/KKChen666/TongXiao --skill gsap-plugins-kkchen666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-plugins
Source: https://github.com/KKChen666/TongXiao/tree/main/.opencode/skills/gsap-plugins
Command: npx skills add https://github.com/KKChen666/TongXiao --skill gsap-plugins-kkchen666

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP ships dozens of plugins with distinct APIs, and developers often misuse them by skipping registration, following outdated Club GSAP licensing instructions, or misconfiguring options like Flip states, DrawSVG segments, and SplitText re-splitting. This Skill provides correct, current guidance for every GSAP plugin. ## Core Features & Use Cases - Plugin Registration & Licensing: Register plugins with gsap.registerPlugin() and install everything from the public gsap npm package, with no Club GSAP tokens or private registries. - Scroll, DOM & Text Plugins: Covers ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, and ScrambleText with key config tables and code examples. - SVG, Physics & Easing: Covers DrawSVG, MorphSVG, MotionPath, Physics2D, PhysicsProps, CustomEase, EasePack, CustomWiggle, CustomBounce, PixiPlugin, and GSDevTools. - Use Case: When a user asks to animate an element along an SVG path, morph one icon into another, or split a heading into animated characters, this Skill supplies the correct plugin, registration step, and configuration. ## Quick Start Ask how to animate an element along an SVG path or split text into animated characters using GSAP plugins.

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 first use, for example gsap.registerPlugin(ScrollToPlugin, Flip, Draggable). In React, register at the top level rather than inside a re-rendering component.

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

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

How do I animate an SVG stroke drawing effect with GSAP?▼

Use DrawSVGPlugin by tweening the drawSVG property, which defines the visible stroke segment such as "0% 100%" for a full stroke. The element must have a visible stroke and stroke-width set, and the plugin only affects strokes, not fills.

Why does my GSAP plugin tween not work?▼

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 gsap package and that required setup, such as a stroke for DrawSVG, is in place.

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

Call SplitText.create(target, { type: "words, chars" }) and animate the returned chars array with stagger. For responsive re-splitting, use autoSplit: true and return your animation from onSplit() so it syncs on re-split.

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

Use Flip when animating between two layout states such as reordered lists, grids, or expanded panels. Capture the state with Flip.getState(), change the DOM, then call Flip.from() to animate from the old state to the new one.

Related Skills

Explore More Software Engineering Skills→
gtpgg1013gtpgg1013

gsap-fundamentals

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

Community
Intermediate
Hendo10XHendo10X

gsap

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

Community
Advanced
calesthiocalesthio
55.1k

gsap-scrolltrigger

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

Community
Intermediate
fengshao1227fengshao1227
5.9k

animate

Adds purposeful animations, micro-interactions, and motion effects to frontend features.

Community
Intermediate