gsap-react

GSAP animations in React require proper cleanup to avoid memory leaks. This Skill provides guidelines for using the `useGSAP()` hook to manage animation contexts safely, ensuring deterministic task execution and automatic cleanup when components unmount.

The best way to manage GSAP refs and context in React is by using the `@gsap/react` library. This Skill outlines best practices for hook usage, ref management, and context safety to create complex animations without conflicting with React's lifecycle.

Yes, building complex GSAP animations in React requires installing both `gsap` and `@gsap/react`. These dependencies provide the necessary hooks and context management tools to integrate animations safely within React's rendering lifecycle.

The `useGSAP` hook handles animation cleanup by automatically reverting animations and killing tweens when the component unmounts. It simplifies context management compared to manual `useEffect` cleanup, preventing animation conflicts and memory leaks.

Yes, you can create deterministic animation tasks using GSAP with React hooks. This Skill demonstrates how to use `useGSAP()` for deterministic task execution, ensuring animations run predictably and are properly cleaned up within the React component tree.

You should use GSAP for React animations when building applications that require complex, timeline-based animations. This Skill provides the implementation guidelines needed to leverage GSAP's advanced animation capabilities safely within React's component architecture.