Scoping Issue with GSAP Timeline in React Componen

[Ritik]

I'm encountering a scoping issue when trying to use a GSAP timeline (tl1) inside a React component (MemberRenderer). The goal is to play the timeline when the user hovers over a specific element. However, I'm noticing that the tl1 timeline doesn't behave as expected and seems to have scoping issues.

Here's a simplified version of the code:

 

CODE THAT ISN'T WORKING

import React, { useRef } from 'react';
import { gsap } from 'gsap';

function MemberRenderer(member) {
  const memberRef = useRef();
  let tl1 = gsap.timeline({ paused: true });

  tl1.to("#Aakash", { opacity: 0.2 });

  const handleMouseEnter = (e) => {
    console.log("tl1", tl1);
    tl1.play();
  };

  // Rest of the code...
}

 

CODE THAT WORKS

function MemberRenderer(member) {
  const memberRef = useRef();
  
  const handleMouseEnter = (e) => {
    
    let tl1 = gsap.timeline({ paused: true });
  
    tl1.to("#Aakash", { opacity: 0.2 });
    console.log("tl1", tl1);
    tl1.play();

 

The handleMouseEnter function should play the tl1 timeline when the user hovers over the memberRef element. However, I'm encountering issues with scoping and the timeline doesn't play as expected. It seems like the tl1 instance is not being captured correctly inside the handleMouseEnter function.

What could be causing this scoping issue and how can I resolve it to make the timeline play as intended when the user hovers over the element? I'd appreciate any insights or suggestions on how to fix this. Thank you!

Apologies for not including a demo but this I am not sure how to convey.

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://greensock.com/react

Happy tweening!

[alig01]

Hey,

 

On top of the previous post, I'd like to share a super simple example that animates the background color of a button and reverses the effect (in React).

See the Pen OJwLPvq?editors=0010 by alig01 (@alig01) on CodePen

 

I hope it serves you as a good starting point.

Good luck with your project.