Overview

The @gsap/react package makes integrating GSAP animations into React applications a seamless experience. Being framework-agnostic, GSAP can seamlessly work with React without needing additional wrappers. The hook useGSAP() simplifies interactions with the animation library, making it easier for developers to implement eye-catching animations without getting bogged down by the typical complexities that come with React’s lifecycle methods.

This utility serves to not only streamline your animation logic but also enhances safety and cleanliness in your code. With features designed to handle specific React concerns, useGSAP() lets developers focus on creative aspects while ensuring their animations perform smoothly, even in server-side rendering scenarios.

Features

• Automatic Cleanup: The useGSAP() hook simplifies cleanup by leveraging gsap.context(), ensuring proper disposal of animations when components unmount.

• Isomorphic Layout Effect: Utilizes the useIsomorphicLayoutEffect() technique to ensure safe use in both client and server environments by falling back to useEffect() when needed.

• Flexible Dependency Management: Provides options for defining dependencies with customizable configurations, including the ability to revert animations based on dependency changes.

• Scope Definition: Allows optional definition of selector text scope, reducing the need for multiple useRef() instances and making the code cleaner and safer.

• Convenient Context References: The hook exposes easy access to context instances and the contextSafe() function, assisting in integrating event handlers without additional complexity.

• Simplified Syntax: Defaults to using an empty dependency array, reducing common mistakes that lead to repetitive animations in React’s lifecycle methods.

• Context-Safe Functions: Automatically makes the primary function context-safe, which is crucial for maintaining the integrity of GSAP-related objects created during its execution.