react scrolltrigger code works in codepen but nowhere else :)

[dagda1]

I am having this problem a lot.  I try and add some greensock animations to a react app and it does not work so.....I create a react codepen example and then it magically works but the problem is, it won't work outside of the codepen.

 

Below is a codepen working perfectly and here is a codesandbox with the same code that does not trigger the animations in the same way..

 

I really like the look of gsap but I cannot get any of the examples to work outside of the codepen that showcases them.

 

Can anyone shine any light on why this may be?

 

See the Pen ExdwoXm by dagda1 (@dagda1) on CodePen

[dagda1]

I just did a google and it is because <StrictMode> is causing useLayoutEffect to run twice.

 

As you were

[Cassie]

Yep, that's the one. Did you check out our React article? We came up with gsap.context as a solution to this exact issue. It'll certainly help make your life in React land easier.
 

 

Quote

 

gsap.context()
Proper animation cleanup is crucial to avoid unexpected behaviour with React 18's strict mode. This pattern follows React's best practices.

gsap.context makes cleanup nice and simple, all GSAP animations and ScrollTriggers created within the function get collected up so that you can easily revert() ALL of them at once.

 

Here's the structure:

 

 

const comp = useRef(); // create a ref for the root level element (for scoping)
const circle = useRef();

useLayoutEffect(() => {
// create our context. This function is invoked immediately and all GSAP animations and ScrollTriggers created during the execution of this function get recorded so we can revert() them later (cleanup)
  let ctx = gsap.context(() => {
    
    // Our animations can use selector text like ".box" 
    // this will only select '.box' elements that are children of the component
    gsap.to(".box", {...});
    // or we can use refs
    gsap.to(circle.current, { rotation: 360 });
    
  }, comp); // <- IMPORTANT! Scopes selector text
  
  return () => ctx.revert(); // cleanup
  
}, []); // <- empty dependency Array so it doesn't re-run on every render
  
// ...

 

[dagda1]

@Cassie excellent!  Thank you

[dagda1]

I wonder if there is any way to highlight that `useLayoutEffect` running twice in StrictMode.

I wasted a lot of time trying all sorts of crazyness before writing this post.

I would hate to think of anyone else going through that .

NOw everything suddenly works with 1 simple condition added.

[Rodrigo]

Hi,

 

We do highlight that situation in our resources, unfortunately we can't find a better way to do it, other that having such information on our docs and resources and inform users about it. We are always open to suggestions in order to improve how this is passed onto users, especially those who are unaware of this, as we all have been at certain point, trust me a lot (and I mean a lot) of people have been bitten by this.

 

Happy Tweening!