Does it provide help with SVG performance?

Absolutely. The skill includes best practices for optimizing path complexity, caching morph targets, and using correct transform origins for smoother rendering.

Can I use this skill to create scroll-driven SVG effects?

Yes, it includes implementation patterns for combining SVG plugins with GSAP's ScrollTrigger for scroll-synced animations.

Which GSAP plugins are covered by this skill?

This skill specifically covers DrawSVGPlugin for stroke animations, MorphSVGPlugin for shape transitions, and MotionPathPlugin for moving elements along paths.

How do I handle morphing between primitives like circles and paths?

The skill provides guidance on using MorphSVGPlugin.convertToPath() to transform SVG primitives into paths automatically for seamless morphing.

GSAP SVG Animations

Name: GSAP SVG Animations
Author: Microck

byMicrock

•

设计工具

Implements high-performance SVG animations using GSAP's DrawSVG, MorphSVG, and MotionPath plugins.

This skill equips Claude with specialized knowledge to create professional-grade SVG animations using the GreenSock Animation Platform (GSAP). It provides standardized implementation patterns for stroke drawing, complex shape morphing, and animating elements along intricate vector paths. By offering performance optimization tips and common pitfall resolutions, this skill enables developers to build fluid, interactive vector graphics and narrative-driven web experiences with production-ready code.

主要功能

01Animated stroke drawing and path sequences using DrawSVGPlugin

02SVG path optimization and performance best practices

03Integration patterns for ScrollTrigger-driven SVG animations

04Dynamic movement and rotation along vector paths via MotionPathPlugin

052 GitHub stars

06Seamless shape-to-shape transformations with MorphSVGPlugin

使用场景

01Creating scroll-synchronized storytelling illustrations for landing pages

02Developing animated UI components and complex data visualizations

03Building interactive brand logos and icons that morph on hover or click

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck gsap-svg

For use in Claude.ai and ChatGPT

Download Skill