Gsap react target got undefined or not found

[Sherlok]

Hello

 

I try to implement the two scenes where onClick in Scene One I got the smooth transition to scene two. But already on starter, I got gsap target not found. 

Here is the https://codesandbox.io/s/quiet-wood-lzun01?file=/src/Scene1.js

 

[Rodrigo]

Hi,

 

I'm not in front of my computer now so there's not a lot I can do from my phone. 

 

What I can see is that you're not using the useLayoutEffect hook and you're not using GSAP context neither. I recommend you to check the resources in this page:

https://greensock.com/react

 

Also you can see some simple starter templates here where GSAP Context is being used

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Finally you should update the versions of both react and GSAP, since the demo is using older ones. Give a try to the approach using GSAP context and the layout effect hook.

 

Most likely this stems from not using the layout effect hook and the DOM not being rendered when your GSAP code runs.

 

Hopefully this helps.

Happy Tweening!

[Sherlok]

@Rodrigo

Thanks for your reply.

But should I use layout hook in my click function? I mean mostly I saw that it's just playing timeline in click function and if it is without click function, it's mostly using context.

[Rodrigo]

https://react.dev/reference/react/useLayoutEffect

 

This particular example shows how to use a GSAP timeline with a click handler

https://stackblitz.com/edit/gsap-react-basic-f48716

 

This is mostly react related. I recommend you to get a good look at the react page we have and that I linked before and perhaps learn your way around react and how to use event handlers and hooks.

https://greensock.com/react

 

Happy Tweening!