skills.rest
Jatinkrmahato993203
Jatinkrmahato993203COMMUNITY
Explore all skills by this author →
GitHub

gsap-plugins

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

Updated Jul 20, 2026
Search Tags:#javascript#animation#svg#gsap#scroll#splittext#draggable
One-click install
npx skills add https://github.com/Jatinkrmahato993203/crime --skill gsap-plugins-jatinkrmahato993203
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-plugins
Source: https://github.com/Jatinkrmahato993203/crime/tree/main/skills/gsap-plugins
Command: npx skills add https://github.com/Jatinkrmahato993203/crime --skill gsap-plugins-jatinkrmahato993203

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 Flip states, SplitText splitting, and DrawSVG stroke segments. This Skill provides correct, current guidance for every GSAP plugin. ## Core Features & Use Cases - Plugin Registration & Licensing: Correctly register plugins with gsap.registerPlugin() and install all plugins from the public gsap npm package without legacy Club GSAP tokens. - Scroll, DOM & Text Plugins: Configure ScrollToPlugin, ScrollSmoother, Flip, Draggable with Inertia, Observer, SplitText, and ScrambleText with accurate option tables. - SVG, Easing & Physics Plugins: Implement DrawSVG stroke reveals, MorphSVG shape morphing, MotionPath movement, CustomEase, Physics2D, and GSDevTools debugging. - Use Case: When a user asks to animate an SVG icon morphing into another shape, the Skill provides MorphSVGPlugin registration, convertToPath usage, and shapeIndex tuning guidance. ## Quick Start Ask the assistant to write a GSAP animation that splits a heading into characters with SplitText and staggers them in on page load.

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

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 and import plugins directly; no license key, auth token, or private registry is needed.

How do I animate an element along an SVG path with GSAP?▼

Register MotionPathPlugin and pass a motionPath object to a tween with the path selector, align target, and alignOrigin. Set autoRotate to true to rotate the element along the path tangent.

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. Without a stroke, nothing is drawn regardless of the drawSVG value.

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 into the tween; multi-segment paths need an array of values.

When should I use Observer instead of ScrollTrigger?▼

Use Observer when you need normalized swipe, wheel, or scroll-direction input without tying animation to scroll position, such as custom gesture logic. ScrollTrigger is better for scroll-linked animation progress 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
leobbaronileobbaroni
1

gsap

Implements GSAP animations including timelines, ScrollTrigger, and plugins for web interfaces.

Community
Intermediate
utsavm81098utsavm81098

gsap-frameworks

Enable lifecycle-aware, scoped GSAP animations in Vue, Nuxt, and Svelte apps.

Community
Intermediate
MicrockMicrock

gsap-core

Create and control web animations with GSAP core tweening and timelines.

Community
Intermediate