Rick May Posted January 15, 2020 Share Posted January 15, 2020 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 More sharing options...
ZachSaucier Posted January 15, 2020 Share Posted January 15, 2020 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. 1 Link to comment Share on other sites More sharing options...
Rick May Posted January 16, 2020 Author Share Posted January 16, 2020 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 More sharing options...
ZachSaucier Posted January 16, 2020 Share Posted January 16, 2020 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 More sharing options...
Rodrigo Posted January 16, 2020 Share Posted January 16, 2020 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!!! 2 Link to comment Share on other sites More sharing options...
Rick May Posted January 16, 2020 Author Share Posted January 16, 2020 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 More sharing options...
Rodrigo Posted January 16, 2020 Share Posted January 16, 2020 3 hours ago, Rick May said: If not, I'll probably go back to using a class as much as I'd prefer not to. I'm sorry but what exactly is the problem with using classes for some components in a React app, and in general on any JS app? Link to comment Share on other sites More sharing options...
Rick May Posted January 16, 2020 Author Share Posted January 16, 2020 34 minutes ago, Rodrigo said: I'm sorry but what exactly is the problem with using classes for some components in a React app, and in general on any JS app? No problem at all with it. Just a personal preference. Link to comment Share on other sites More sharing options...
Rick May Posted January 16, 2020 Author Share Posted January 16, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now