GSAP - Next JS - useRef()

[Jacot Sylvain]

Hello guys !

How are today ?

I wanted to try gsap with next.js but I'm struggling with useRef() hook. I try to put a ref on my <Bullet/> component (imported functional component) but I get this console error.

I don't get how to use React.createRef() for an imported component or am I doing wrong with useRef ?

 

p-s: I also tried firstbullet.current and firstbullet.current.focus into gsap function

p-s: the same gsap function is working great on a simple div with a useRef (el => (div = el).

 

Thank you so much ! Have a nice day.

 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Yeah, basically the warning is telling you the problem and the solution. Refs basically return the rendering result of a specific JSX element, normally an HTML tag such as <div>, <p>, <li>, etc., which in those cases is a DOM node. In your case you're using ref on an actual React component, therefore the return is a React component, resulting in that warning and the fact that GSAP, while it can use and tween a property in the component (GSAP basically updates a property in any JS object you pass as target and a React component is an object), is not affecting an actual DOM node.

 

Using Forwarding Refs is the best option in this case. Here is a simple example of using it with GSAP:

 

https://codesandbox.io/s/react-hover-forward-ref-ybtgs

 

If you check the file Twitter.js you'll see how it actually works, which is quite simple.

 

Now given that you're also passing the event handlers, I don't see the need to keep all that logic in the parent component, that could easily be in the <Bullet /> component as well so you won't have to use forward refs.

 

Happy Tweening!!!

[Jacot Sylvain]

Thank you so much ! I'll try this. Once it's done, I'll post a codepen with my solution. You are very helpful