skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-svg

Implement SVG stroke drawing, shape morphing, and path motion animations with GSAP plugins.

52|3|Updated Aug 20, 2026
Search Tags:#javascript#SVG#animation#gsap#drawsvg#morphsvg#motionpath
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-svg-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-svg
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/gsap-svg
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-svg-wayn-git

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Animating SVG elements requires coordinating stroke-dasharray tricks, path point matching, and motion alignment, which is error-prone when done by hand. This Skill provides ready-to-use GSAP patterns for DrawSVGPlugin, MorphSVGPlugin, and MotionPathPlugin so you can implement SVG animations correctly on the first attempt. ## Core Features & Use Cases - Stroke Drawing: Animate SVG strokes from any start/end percentage, sequence multiple paths, and combine with ScrollTrigger for scroll-driven drawing. - Shape Morphing: Morph between paths and primitives with shapeIndex control, rotational matching, and smooth transitions. - Motion Along Paths: Move elements along SVG paths with auto-rotation, custom start/end offsets, and curved bezier paths. - Use Case: Build a scroll-driven landing page where a logo outline draws itself, morphs into a new icon on hover, and a marker travels along a curved route path. ## Quick Start Use the gsap-svg skill to draw an SVG path stroke on scroll and morph an icon into its hover state.

Frequently Asked Questions about gsap-svg

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

FAQPage Schema
How do I animate SVG stroke drawing with GSAP?▼

Use DrawSVGPlugin by registering it with gsap.registerPlugin, then animate with gsap.to targeting the path and setting drawSVG to a range like '0% 100%'. The element must have a stroke attribute and fill set to none for the drawing effect to be visible.

How to morph one SVG shape into another in JavaScript?▼

Use MorphSVGPlugin and pass the target selector in the morphSVG property, such as gsap.to('#shape1', { morphSVG: '#shape2' }). Tune the shapeIndex option or set it to 'auto' when the morph matches the wrong points, and use convertToPath for primitive elements like circles.

Does GSAP MotionPathPlugin support auto rotation along a path?▼

Yes, MotionPathPlugin supports autoRotate, which rotates the element to follow the path direction. Set transformOrigin to 'center center' on the element first, otherwise the rotation may appear offset or point in the wrong direction.

Why is my GSAP DrawSVG animation not showing anything?▼

The most common cause is a missing stroke on the SVG element, since DrawSVGPlugin animates strokes, not fills. Add stroke, stroke-width, and fill="none" attributes to the path, and confirm the plugin is registered before creating the tween.

Can I combine GSAP SVG animations with ScrollTrigger?▼

Yes, register ScrollTrigger alongside the SVG plugin and add a scrollTrigger config to the tween with trigger, start, end, and scrub options. This works with drawSVG, morphSVG, and motionPath to create scroll-driven SVG effects.

Related Skills

Explore More Design & Creative Skills→
tryopendatatryopendata
121

svg-design

Create and edit SVG logos, icons, and graphics with hand-authored markup.

Official
Advanced
ManancodeManancode
1

svg-animations

Create and animate scalable SVG graphics with SMIL and CSS techniques.

Community
Advanced
gajjalaashok75-UIgajjalaashok75-UI
2

motion-choreography

Build coordinated GSAP motion sequences with timelines, scroll triggers, and spring easing.

Community
Advanced
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

hyperframes-animation

Create complex animations across GSAP, Lottie, Three.js, and other runtimes.

Official
Advanced