[React/GSAP] Why I can't use class selector in ScrollTrigger inside gsap.context?

[artyor]

https://stackblitz.com/edit/react-gskvp7?file=src%2FButton.jsx,src%2Fstyle.css,src%2FApp.js,src%2Findex.js

Hello all,

Here is React/GSAP/ScrollTrigger example made with GSAP starter template.

In Button.jsx file, inside the gsap.context, I have scrollTrigger, where I animate .my-button__bg, but if I use class selector to target it inside my timeline, it will trigger animation for all 5 buttons, but if I use btnBg useRef(), it will work.

so if u replace btnBg.current with '.my-button__bg' code will not work as intended, instead it will run animations for all 5 buttons.

Why is that?

[Rodrigo]

Hi

 

I'm on my phone now and I can't tinker with the code . What I can see from a quick glance is that you're not cleaning up your animation in your button component.

 

You should revert your GSAP context instance in the return function of your effect hook:

 

useLayoutEffect(() => {

  const ctx= gsap.context();

  return () => ctx.revert();

}, []);

 

Take a look at our React resources here

 

https://gsap.com/react

 

Hopefully this helps

Happy Tweening!

[artyor]

3 hours ago, Rodrigo said:

Hi

 

I'm on my phone now and I can't tinker with the code . What I can see from a quick glance is that you're not cleaning up your animation in your button component.

 

You should revert your GSAP context instance in the return function of your effect hook:

 

useLayoutEffect(() => {

  const ctx= gsap.context();

  return () => ctx.revert();

}, []);

 

Take a look at our React resources here

 

https://gsap.com/react

 

Hopefully this helps

Happy Tweening!

Hi Rodrigo, thanks but unfortunately that didnt fix my problem, I dont think it's related .

Here is new link with ctx.revert() and I also replaced ref with class selector to show that it's not working:
https://stackblitz.com/edit/react-rywjch?file=src%2FButton.jsx,src%2Fstyle.css,src%2FApp.js,src%2Findex.js

[GreenSock]

Ah, that's because the selector text is Context-specific which is active only while that function is being executed. You're creating a new tween inside an onEnter which executes later (not while that context is active). So you just need to context.add() it so that it's associated with that context: 

https://stackblitz.com/edit/react-nup1tc?file=src%2FButton.jsx

 

In the next release, I plan to make that happen automatically in ScrollTrigger callbacks like that. Sorry about any confusion. 

 

Another solution would be to just use gsap.utils.selector(). There are quite a few options, but I don't want to overwhelm you

 

Happy tweening!

[artyor]

21 hours ago, GreenSock said:

Ah, that's because the selector text is Context-specific which is active only while that function is being executed. You're creating a new tween inside an onEnter which executes later (not while that context is active). So you just need to context.add() it so that it's associated with that context: 

https://stackblitz.com/edit/react-nup1tc?file=src%2FButton.jsx

 

In the next release, I plan to make that happen automatically in ScrollTrigger callbacks like that. Sorry about any confusion. 

 

Another solution would be to just use gsap.utils.selector(). There are quite a few options, but I don't want to overwhelm you

 

Happy tweening!

Thank you for explanation and solution!