Jump to content
Search Community

GSAP target null not found (draggable)

Rick May test
Moderator Tag

Recommended Posts

I've got a problem with a website I'm building.  I've reduced it down to the example linked.  While it isn't the same error I'm getting on my site, I'm guessing that it is related.  I hope anyway.

 

Can anyone tell me why this works fine (drag boxes to see the "default" word move down/up), until you hover over the word "default".  Then when trying to drag a box, it throws a "GSAP target null not found"?

 

Thanks,

Rick

 

Codesandbox:

https://codesandbox.io/s/draggable-problem-v05-jopcr

 

Link to comment
Share on other sites

Hey Rick.

 

The issue is because the reference disappears when the mouseenter/mouseleave events happen. You can check this by console.logging what animateThis_ref is inside of the mouseenter/mouseleave events.

 

As for how to fix it, I managed to figure out a way to fix it through my Google-foo skills finding this similar post. But I have no idea if it's the correct way to do it in React because I have never used React :) Maybe our resident React expert @Rodrigo can pitch in and explain why the references are reset and maybe provide a better way to do it.

  • Like 1
Link to comment
Share on other sites

Interesting.   The problem I'm having in my project is not actually using mouse over.  I just used it in the reduced example to easily force a new state.  I'll take what you've done and insert it into my website to see what happens.  

 

I originally had this problem without changing any states.   I noticed that whenever I saved a code change and my site was rebuilt-- the next time I touched the draggable, GSAP threw an error (only to be fine once the browser was refreshed).    I ignored it for the longest time.  But once I introduced a state change on an element that GSAP was trying to tween, it happened again, but this time a browser refresh didn't help.  Since a refresh doesn't fix w/ state change, I can no longer ignore it. 

 

Funny thing is.  I had this working fine in gsap v2 and never had this issue.   (edit:  just remembered that the reason why it may of worked in v2 is because at the time I was using a class instead of a functional)

 

Thanks,

Rick

 

 

Link to comment
Share on other sites

11 minutes ago, Rick May said:

Funny thing is.  I had this working fine in gsap v2 and never had this issue.

Well, it definitely has to do with React's states and not GSAP :) So I can't tell you why that's the case if it is.

 

I hope you get it figured out! If you can get a demo that shows the actual error more clearly feel free to post.

Link to comment
Share on other sites

As Zach points the issue becomes the state update. The ref is not kept for subsequent re-renders by react, since the DOM element has actually changed because is a React component instance (styled component actually).

 

The solution is to add a bit more boilerplate to your code using the useRef hook in order to persist the DOM node reference through re-renders. As you can see is not a lot of code so the overhead should be unnoticeable:

 

https://codesandbox.io/s/draggable-problem-v05-hcq2r

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

Thanks Rodrigo and Zach.

 

I realize now that the reason it used to work (I'm pretty sure anyway) is because I was using a class.    I'm going to play around with the examples you guys provided and see how that fits in with my real (non-reduced) problem to see if that fixes it.  If not, I'll probably go back to using a class as much as I'd prefer not to. 

 

 

Link to comment
Share on other sites

Alright, got it working...  I created a reduced example that is closer to the actual problem I was having in my real-world project.  I took what you guys presented and modified it slightly.   I not only wanted to post it here just in case someone else runs across the same issue, but hopefully check with the experts whether it is violating some React rule that I'm unaware of.  (I'm still pretty new to React)

 

What I did differently was to not connect multiple refs together in useEffect, but simply call the ref name with .current attached anytime GSAP needed to find the reference.  i.e.

gsap.to(myRefName.current, 1, {x:100});

 

Here is my sandbox...

https://codesandbox.io/s/draggable-problem-v05a-wdraggable-z1q0z

 

Thanks again for your help,

Rick

 

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...