gsap-react

To use GSAP animations in React without memory leaks, implement the useGSAP hook from @gsap/react to manage component lifecycles. This ensures animations and ScrollTriggers are properly reverted when components unmount, preventing memory leaks and animation glitches.

GSAP animations break during Next.js server-side rendering because GSAP uses an imperative model that conflicts with React's declarative lifecycle. Integrating context management with the useGSAP hook provides safe scoping and proper component teardown to prevent SSR-related errors.

To scope GSAP selectors to a specific React component, use the useGSAP hook with a container ref. This provides context management and safe scoping, preventing animation selectors from leaking outside the component and affecting unrelated DOM elements.

Yes, you can use GSAP ScrollTrigger for scroll-based reveals in Next.js applications. By utilizing the useGSAP hook, you ensure proper context scoping and automatic cleanup of ScrollTriggers during component unmounting for smooth performance.

The best way to handle complex UI transitions in React is integrating GSAP with the @gsap/react package. This resolves the friction between GSAP's imperative animation model and React's declarative lifecycle, ensuring clean component teardown and smooth motion design.

Yes, you need to install both gsap and @gsap/react to animate components in React. The @gsap/react package provides the useGSAP hook required for proper context scoping and memory management, while the gsap package delivers the core animation library.