Skills
.Work. You
Rest

gsap-svg

Community

Animate SVGs with GSAP: Draw, Morph, Motion.

Design & Creative#animation#svg#gsap#drawsvg#morphsvg#motionpath
AuthorMicrock
Version1.0.0
Installs0

System Documentation

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'.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: gsap-svg
Download link: https://github.com/Microck/gsap-skills/archive/main.zip#gsap-svg

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.