Why is my timeline working twice?

[LucieB]

Hey my friends!

 

I'm working with React and I use GSAP for the first time with Contexts.

Perhaps i mistaken (because of the refs and useEffects hooks?), but my timeline's working twice all the time, and I don't know why. I tried to use from, fromTo, to... And actually every time, the issue is present. I created a short CodeSandBox to illustrate my issue. Of course, for my example I don't need the use the Context, but in my real project I would. 

 

Hope you guys are fine in these strange moments.

Have a nice day!

 

Lucie

[OSUblake]

Not sure what's supposed to happen based on your code, but your timeline keeps getting longer because you keep adding to it everytime that useEffect function gets called.

 

If you plan on reusing your timeline, you should create your animations inside another useEffect. 

 

const tl = useRef(null); // don't create timelines inside a ref declaration

useEffect(() => {
  
  const popContainer = popContainerRef.current;
  const popTitle = popContainer.children[1];

  // create timeline here
  tl.current = gsap.timeline({
    paused: true
  })
  .to(popcontainer, { ... });
  
  // return function to kill timeline on dismount
  return () => tl.kill();
}, []);

useEffect(() => {

  // If status is TRUE -> play the timeline
  status && tl.current.play();
}, [status]);

 

[LucieB]

You're the best! Now it's working as I want: THANK YOU!