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.
Key Features
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
Use Cases
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
