gsap-svg

Name: gsap-svg
Availability: InStock
Author: Microck

Animate SVG drawings, morphs, and path-based motion with GSAP plugins.

Updated Feb 17, 2026

Search Tags:#animation #svg #gsap #drawsvg #morphsvg #motionpath

Ready to run

npx skills add https://github.com/Microck/gsap-skills --skill gsap-svg

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-svg
Source: https://github.com/Microck/gsap-skills/tree/main/skills/gsap-svg
Command: npx skills add https://github.com/Microck/gsap-skills --skill gsap-svg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation of dynamic and engaging SVG animations, enabling complex visual effects like drawing strokes, morphing shapes, and animating elements along paths.

Core Features & Use Cases

DrawSVGPlugin: Animate the drawing of SVG strokes, from simple lines to intricate illustrations.
MorphSVGPlugin: Smoothly transform one SVG shape into another, perfect for transitions and character animations.
MotionPathPlugin: Move any element along a defined SVG path, ideal for character movement or guided animations.
Use Case: Create an animated infographic where icons draw themselves, morph into different states on hover, and move along a timeline path.

Quick Start

Use the gsap-svg skill to animate the drawing of the SVG element with the ID 'my-path'.

Frequently Asked Questions about gsap-svg

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create an animated infographic with self-drawing icons?▼

Create animated infographics by combining DrawSVGPlugin for self-drawing icons, MorphSVGPlugin for hover state transitions, and MotionPathPlugin for timeline path movement.

How do I animate SVG strokes to create a drawing effect?▼

Animate SVG strokes by utilizing the DrawSVGPlugin to progressively reveal path lengths from simple lines to complex illustrations, creating dynamic self-drawing visual effects.

Can I smoothly morph one SVG shape into another?▼

Smoothly morph one SVG shape into another using the MorphSVGPlugin, which enables fluid shape transitions for interactive web elements and character animations.

What is the best way to move elements along an SVG path?▼

Move elements along an SVG path using the MotionPathPlugin, which facilitates guided path-based motion for character movement and interactive timeline animations.

Do I need the GSAP core library to animate SVGs?▼

The GSAP core library is required as a base dependency, alongside specific SVG plugins like DrawSVGPlugin and MorphSVGPlugin, to implement the animation logic.

How do I create an animated infographic with self-drawing icons?▼

Create animated infographics by combining DrawSVGPlugin for self-drawing icons, MorphSVGPlugin for hover state transitions, and MotionPathPlugin for timeline path movement.