What is the most robust and modern way to handle cleanup of GSAP animations and triggers within a React component to prevent memory leaks?
React JS interview question for Advanced practice.
Answer
Wrapping all GSAP code in gsap.context() and calling .revert() in the cleanup function.
Explanation
gsap.context() is the recommended best practice. It creates a scope for all your GSAP animations, timelines, and ScrollTriggers. Calling the revert() method on the context in the useEffect cleanup function will automatically find and kill everything created within that scope. This is safer than gsap.killAll() (which is global and could affect other components) and much cleaner than manually tracking every animation (B).