Jump to content
Search Community

Problem with React/Draggable while using Emitter

Rick May test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've been having an issue with a Gatsby project I'm working on.  I've reduced it down to a codesandbox example...

 

codesandbox example

 

Visit the link and drag the top grey box to see the bottom orange box follow.  What I'm doing is passing the drag value as an emitter to the second box (which is a component).  The tween on the orange box works fine, until you go to another page (click on "Go to page 2") and then return to the original page.  Now, when you try to drag the top box, the bottom box doesn't move and an error ("cannot tween a null target") goes to the console.

 

I've been pulling my hair out trying to figure out what the problem is.  I originally thought the issues was caused by the reference being re-created when going back to the original page.  However, Gsap seems to be okay with this as long as I'm not using an emitter at the same time.  I'm not sure how the emitter is playing into this. 

 

Does anyone have any idea what I can do to get around this.  I feel like I've hit a wall.

 

Thank you!  :)

 

Rick

 

See the Pen by s (@s) on CodePen

Link to comment
Share on other sites

Hey Rick,

 

I think this is related to the component unmounting. You can read more about the situation in the React docs here.

 

I was able to work around the issue by adding a check for the element being not null in your Box2 like so:

 

dragValueReceived(currentDragPosition) {
  if(this.box)
    TweenLite.set(this.box, { y: currentDragPosition })
}

 

  • Like 3
Link to comment
Share on other sites

Hi Zach.

 

Thanks for the response.  I came across that (React docs) link as well and I also think that could be part (or all of) the problem.  I just haven't figured out how to get around it.  I'm still very new to React and still trying to come to terms with it.  The odd thing is, if I do not use an emitter, there are no errors with trying to tween a null object.

 

Regarding your work around with a check for !null.  That does work.  Unfortunately in my real world project, there are dozens of tweens on dozens of elements.  I'm trying to avoid having to do this, if possible.  Although it may be what I end up doing.  I'll keep re-reading the docs and searching to see if I can stumble upon something.

 

Thanks

Link to comment
Share on other sites

Alright.  I figured it out.  Like I said, I'm new at React (insert embarrassed emoji here).

 

I basically was improperly setting up my emitter in my index file.  I should of defined this.emitter in the constructor not as a const outside the class.

 

 

:o

 

Thanks,

Rick

  • Like 3
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...