GSAP mapping over array of objects in React

[jnemec 3 Likes (Newbie)]

I have three boxes with text in them and I want the animation to be played on the box I click on. I have it almost how I want it except after I select a box and then click it again to reverse it; the next time I click on another box, the first box I clicked on animates and then the other box animates after. Anyone have any idea what is causing this? 

 

(Select the "components" folder, then click on the "Hero.tsx" file to see the code)

 

https://codesandbox.io/p/sandbox/gsap-columns-rgi7s2?file=%2Fcomponents%2FHero.tsx&selection=[{"endColumn"%3A17%2C"endLineNumber"%3A52%2C"startColumn"%3A17%2C"startLineNumber"%3A52}]

[GreenSock 18,591 Likes (Superhero)]

You were using a single timeline and cramming everything into that, so that timeline would just keep getting longer and longer and longer, never allowing the finished animations to get garbage collected. So there were various logic problems in your code. I think you could simplify it quite a bit: 

https://codesandbox.io/p/sandbox/gsap-columns-forked-lhro3k?file=%2Fcomponents%2FHero.tsx

 

Is that more like what you wanted? 

[jnemec 3 Likes (Newbie)]

8 hours ago, GreenSock said:

You were using a single timeline and cramming everything into that, so that timeline would just keep getting longer and longer and longer, never allowing the finished animations to get garbage collected. So there were various logic problems in your code. I think you could simplify it quite a bit: 

https://codesandbox.io/p/sandbox/gsap-columns-forked-lhro3k?file=%2Fcomponents%2FHero.tsx

 

Is that more like what you wanted? 

That makes sense! Yes, that is exactly what I was wanting. THANK YOU!

[jnemec 3 Likes (Newbie)]

8 hours ago, GreenSock said:

You were using a single timeline and cramming everything into that, so that timeline would just keep getting longer and longer and longer, never allowing the finished animations to get garbage collected. So there were various logic problems in your code. I think you could simplify it quite a bit: 

https://codesandbox.io/p/sandbox/gsap-columns-forked-lhro3k?file=%2Fcomponents%2FHero.tsx

 

Is that more like what you wanted? 

In my original copy, I had the timeline as a ref. Is there any benefit of making it a ref? I've just seen some people doing that 

[Rodrigo 5,420 Likes (Superhero)]

Hi,

 

If you have to access the timeline outside the scope of the effect hook you're using to create it, then yes it's a good idea to keep it as a ref so is not changed through re-renders. But this approach is a bit complicated TBH:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    isClicked ? tl.current.play() : tl.current.reverse();
  });
  return () => ctx.revert();
}, [isClicked]);

You don't need to create a new GSAP Context instance for playing/reversing a timeline that is already inside another GSAP Context instance, just use the timeline's ref and you should be OK. Also you don't need a layout effect, just a regular effect hook, since that condition is not creating changes in the DOM just some logic in your component:

useEffect(() => {
  isClicked ? tl.current.play() : tl.current.reverse();
}, [isClicked]);

Finally this is a trick I always use when creating a timeline that will be toggled during the app's lifecycle:

const tl = useRef();

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    tl.current = gsap.timeline();
    tl.current
      .to(".box", { x: 200 })
      .to(".box", { rotation: 360 })
      .reverse();// <- After adding all the instances set the timeline to be reversed
  });
  return () => ctx.revert();
}, []);

useEffect(() => {
  tl.current.reversed(!condition);
}, [condition]);

But in this case, Jack's approach should be exactly what you need.

 

Happy Tweening!