Jump to content
GreenSock

MrGrimsley

How can I get GSDevTools to work inside my React app?

Recommended Posts

Hi Folks,

 

Nice to meet you, this is my first post on this forum. Already found some great stuff that helped me on my way.

 

The latest few weeks I've been struggling getting GSAP to work (properly) within my React Application, with success! Learning a lot about tweening, timelines & timing within the React ecosystem.

 

That said, I'm still struggling with the GSDevTools which doesn't seem to work as expected.

 

I've tried:

  1. Implementing GSDevTools inside the componentDidMount() of my homepage component.
  2. Implementing GSDevTools inside the componentDidMount() of my layout wrapper
  3. Implementing GSDevTools inside the componentDidMount() of my page wrapper

 

In all the above scenarios the GSDevTools is being called multiple times as my app refreshes after each change.

componentDidMount(){
  GSDevTools.create();
}

Would be cool if I could destroy this timeline on unmounting the component, but I am almost sure that would not be the right way to go.

I would be happy to learn how to implement the GSDevTools within the React lifecycle properly. 

 

Do you've got the answer for me or a suggestion to push me in the right direction? Let me know.

 

Kind regards,

 

MrGrimsley

Link to comment
Share on other sites

I don't think GSDevTools is dynamic, where you can just add and remove animations. @GreenSock, please correct me if I'm wrong about that.

 

Giving your animations an id, and only calling GSDevTools.create() once might be the best approach. 

 

See how this demo uses IDs, and you can select which animation to view by using the drop-down box in the player.

 

See the Pen MEYdxr by GreenSock (@GreenSock) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

4 hours ago, OSUblake said:

I don't think GSDevTools is dynamic, where you can just add and remove animations.

Correct. GSDevTools sets itself up on initialization and isn't built to work dynamically with animations. It's best to destroy it and create it again if you need to.

Link to comment
Share on other sites

Creating it is easy. But how do you destroy it?

Link to comment
Share on other sites

34 minutes ago, OSUblake said:

Creating it is easy. But how do you destroy it?

let devTools = GSDevTools.create();
//...
devTools.kill();

 

Link to comment
Share on other sites

Should probably document that.

Link to comment
Share on other sites

One more thing I figured I'd mention - unless for some reason you NEED for GSDevTools to control the entire global timeline, I'd suggest linking it to a particular animation instance, like:

 

var tl = gsap.timeline();
tl.to(...); // add your animations or whatever

// link it to this specific timeline:
GSDevTools.create({animation: tl});

It's just cleaner because then GSDevTools doesn't need to worry all the global syncing of things which can be rather complicated. But it's not bad/wrong to go to global route - I'm just saying that a lot of times it's totally unnecessary so you can avoid it by passing in your instance (which can be a tween or a timeline). 

 

Oh, and you can also give a GSDevTools instance an ID so that you can look it up later (like to kill() it):

GSDevTools.create({id:"main"});

//then later...
GSDevTools.getById("main").kill();

 

  • Like 1
Link to comment
Share on other sites

Hi Guys,

 

Thank you for replying to my post. I managed to get my GSDevTools working properly with the following lines of code.

I needed to kill the GSDevTools every time my component got mounted by my application.

 

componentDidMount(){
  if(GSDevTools.getById("main")){
    GSDevTools.getById("main").kill();
  }

  GSDevTools.create({
    id: "main",
    animation: 'homeAnimationTimeline',
    paused: true
  });
}
  • Next.js does a different type of rendering process which made it more difficult for me to find out.
  • Everytime the componentDidMount with an animation was called, the timeline seemed to stop working.
  • I now embed the GSDevTools inside my component which handles the animation I would like to debug at this certain moment.

Adding some information about embedding GSDevTools within React would be helpful for others, great suggestion.

 

Cheers!

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Is there a way to make this work in React with the functional component useEffect hook? I tried just putting the above block of code into the hook, but no dice... I get 

TypeError: Cannot read property 'createElementNS' of undefined
 
Link to comment
Share on other sites

Hm, I'm guessing that maybe you forgot to register GSDevTools first? 

gsap.registerPlugin(GSDevTools);

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...
GSDevTools.kill is not a function -- I having this error also there are no exposed methods like the example above.
On 11/22/2019 at 3:38 PM, MrGrimsley said:
if(GSDevTools.getById("main")){
    GSDevTools.getById("main").kill();
  }

 

Link to comment
Share on other sites

Hey there!

 

If you log out GSDevTools what do you get?

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.
×