Which GSAP plugins are included in this skill's knowledge base?

The skill covers the full modern GSAP 3+ suite, including ScrollTrigger, Flip, SplitText, MorphSVG, DrawSVG, MotionPath, and ScrollSmoother.

How does this skill handle animation performance?

It follows performance best practices like using hardware-accelerated properties, proper tween overwriting, and efficient timeline nesting to ensure smooth 60fps animations.

Can I use this for complex scroll-driven effects?

Absolutely. It provides comprehensive guidance for the ScrollTrigger plugin, including scrubbing, pinning, snapping, and layout refresh logic.

Does this skill support modern React integration?

Yes, it specifically covers the useGSAP hook and React-specific patterns to ensure animations are properly scoped and cleaned up to prevent memory leaks.

GSAP Animation Suite

Name: GSAP Animation Suite
Author: Microck

byMicrock

•

デザインツール

Implements high-performance JavaScript animations, complex timeline sequencing, and interactive scroll-triggered effects using the GreenSock Animation Platform.

This skill empowers Claude to architect and implement professional-grade web animations using the industry-standard GSAP library. It provides specialized guidance on creating complex timeline sequences, scroll-driven interactions via ScrollTrigger, seamless layout transitions with Flip, and intricate SVG animations. By adhering to modern best practices, including proper plugin registration and framework-specific patterns like the React useGSAP hook, this skill ensures that animations are not only visually stunning but also optimized for performance and free from common memory leak issues.

主な機能

01State-driven layout transitions using the Flip technique for seamless UI changes

02Sophisticated scroll-based interactions including pinning, scrubbing, and parallax effects

032 GitHub stars

04Advanced timeline orchestration for complex, multi-step animation sequences

05Optimized SVG manipulation for drawing paths, morphing shapes, and motion path following

06Framework-aware implementation patterns for React, including automatic cleanup and scoping

ユースケース

01Creating fluid UI/UX transitions for single-page applications and component libraries

02Building immersive marketing landing pages with scroll-triggered storytelling elements

03Developing high-performance data visualizations and interactive SVG-based infographics

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add microck/opendots-microck gsap

For use in Claude.ai and ChatGPT