gsap-react_skill

Overview

This skill provides a React-friendly integration for GSAP, including a useGSAP hook, ref patterns, context management, and cleanup strategies. It helps implement performant, lifecycle-aware animations inside React components and offers helpers for event-safe handlers and reusable animation hooks.

How this skill works

useGSAP runs GSAP code inside a scoped context so selectors and animations are limited to a container or set of refs. It returns context helpers like contextSafe for event handlers and automatically reverts timelines and ScrollTriggers on unmount. The patterns show single, multiple, and dynamic refs, timeline refs for external control, and explicit cleanup when needed.

When to use it

• Animating elements in React components while respecting mount/unmount lifecycle
• Building reusable animation hooks (fade, hover, controlled timelines)
• Using GSAP ScrollTrigger inside React with automatic cleanup
• Managing complex timelines from component controls (play, reverse, progress)
• Handling event-driven animations safely with contextSafe

Best practices

• Scope selector-based animations with a container ref to avoid global queries
• Prefer refs over string selectors for frequently animated elements for performance
• Kill or reuse tweens on rapid state changes to prevent buildup
• Return cleanup functions or rely on useGSAP’s automatic revert for timelines and ScrollTriggers
• Use timeline refs for externally controlled sequences and expose play/reverse/restart

Example use cases

• A staggered list reveal using useGSAP with a container ref and .item selectors
• A hover button using useHoverAnimation that returns event props bound with contextSafe
• A controlled animation where parent props update timeline.progress(progress)
• A dynamic list that maps DOM nodes into a Map ref and animates only new items
• Scroll-triggered section reveals that register ScrollTrigger and kill triggers in cleanup