Does this skill support the latest GSAP React hook?

Yes, it includes comprehensive patterns for the official @gsap/react useGSAP hook and manual context cleanup methods to ensure memory efficiency.

How does it handle animation performance?

It emphasizes hardware-accelerated transforms like x, y, and rotation instead of top/left properties to ensure smooth 60fps performance across devices.

Is it compatible with SVG and Canvas?

Yes, GSAP is highly optimized for animating SVG attributes, CSS properties, and even Canvas or WebGL objects through standard JavaScript objects.

Can I create scroll-based animations with this?

Absolutely. The skill provides detailed configurations for ScrollTrigger, including scrubbing, pinning, markers for debugging, and parallax effects.

GSAP Animation Expert

Name: GSAP Animation Expert
Author: Lobbi-Docs

byLobbi-Docs

•

デザインツール

Creates high-performance, professional-grade web animations and complex timeline sequences using the GreenSock Animation Platform.

The GSAP Animation Expert skill equips Claude with specialized knowledge of the GreenSock Animation Platform, the industry standard for robust JavaScript animations. It provides precise control over timelines, scroll-triggered effects, and complex SVG morphing, while ensuring seamless integration with React via the useGSAP hook. Whether you need frame-perfect UI transitions or sophisticated scroll-driven storytelling, this skill offers the implementation patterns and best practices required to build high-performance, cross-browser compatible animations.

主な機能

01Automatic cleanup patterns to prevent memory leaks in modern frameworks

02Fine-grained control over easing, staggers, and SVG path morphing

033 GitHub stars

04Powerful scroll-triggered animations and pinning with ScrollTrigger

05Advanced timeline orchestration for complex animation sequences

06Seamless React integration using the specialized useGSAP hook

ユースケース

01Developing complex loading sequences and logo animations

02Building interactive, scroll-driven landing pages and storytelling experiences

03Creating sophisticated UI micro-interactions and element reveals

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lobbi-docs/claude gsap

For use in Claude.ai and ChatGPT

Download Skill