Chapter 405: React

Core Idea

There are React-specific libraries that offer a more declarative approach. So why choose GSAP?

Key Concepts

• New to React? Check out this tutorial from the React team.
• New to GSAP? Our getting started guide covers animation basics.
• In need of React help? Hit up the Reactiflux community for expert advice.

• Property

• scope

• revertOnUpdate

• context: The gsap.context() instance that keeps track of all our animations.
• contextSafe: converts any function into a context-safe one so that any GSAP-related objects created while that function executes will be reverted when that Context gets reverted (cleanup). Selector text inside a context-safe function will also use the Context's scope. contextSafe() accepts a function and returns a new context-safe version of that function.

Code Examples

npm install @gsap/react

• What it demonstrates: typical usage of React in a GSAP animation.

Key Takeaways

1. New to React?
2. New to GSAP?
3. In need of React help?

4. Property

5. scope