skills.rest
Microck
MicrockCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-svg

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

Updated Feb 17, 2026
Search Tags:#animation#svg#gsap#drawsvg#morphsvg#motionpath
One-click install
npx skills add https://github.com/Microck/gsap-skills --skill gsap-svg
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
wubq511wubq511
6

gsap-plugins

Register GSAP plugins for scroll, SVG, and draggable animations.

Community
Advanced
duckhoa-uitduckhoa-uit
1

animated-svg-smil

Animate SVG icons with SMIL for hover and state transitions.

Community
Advanced
wyhlovecppwyhlovecpp

frontend-engineer

Automate React and CSS web UI component development from design specifications.

Community
Intermediate
ayofemiadeayofemiade

animation-designer

Create web animations and transitions using Framer Motion and CSS.

Community
Advanced