gsap_skill

Overview

This skill provides practical guidance and patterns for implementing performant, production-ready web animations with GSAP and its plugins. It covers core concepts, common patterns, plugin registration, React integration via useGSAP, and common pitfalls to avoid. Use it to accelerate building timelines, scroll-driven effects, SVG animations, and layout transitions.

How this skill works

The skill explains how to create tweens and timelines, register and use plugins like ScrollTrigger, Flip, and DrawSVG, and how to scope animations to avoid conflicts. It includes code patterns for basic tweens, staggered animations, scroll-triggered sequences, and React-friendly lifecycle management. It also lists plugin availability, quick reference commands, and critical mistakes with safe fixes.

When to use it

• Building sequenced UI animations or choreographed timelines
• Creating scroll-linked animations, parallax, or pin/scrub effects
• Animating SVGs (draw, morph, motion paths) or complex text effects
• Implementing layout transitions with FLIP or cross-component animations
• Integrating GSAP into React apps and avoiding memory leaks

Best practices

• Always register required plugins once at app entry (gsap.registerPlugin(...))
• Scope selectors or use gsap.utils.selector to avoid global collisions
• Use timelines to sequence related tweens and enable unified controls
• Refresh ScrollTrigger after DOM/layout changes to keep positions correct
• Kill or overwrite conflicting tweens before starting new ones
• Prefer useGSAP or explicit cleanup in React effects to prevent leaks

Example use cases

• Fade-and-stagger a list of cards on page load with gsap.from and stagger
• Create a scroll-scrubbed hero animation using ScrollTrigger with pin and scrub
• Animate SVG line drawing and morph between shapes with DrawSVG/MorphSVG
• Implement a modal enter/exit timeline with pause, reverse, and progress controls
• Smooth scrolling and parallax sections using ScrollSmoother for visual polish