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

[MrGrimsley 2 Likes (Newbie)]

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

[OSUblake 18,365 Likes (Superhero)]

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

 

 

[ZachSaucier 7,059 Likes (Superhero)]

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.

[OSUblake 18,365 Likes (Superhero)]

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

[ZachSaucier 7,059 Likes (Superhero)]

34 minutes ago, OSUblake said:

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

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

 

[OSUblake 18,365 Likes (Superhero)]

Should probably document that.

[GreenSock 16,612 Likes (Superhero)]

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();

 

[MrGrimsley 2 Likes (Newbie)]

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!

[billyZduke 2 Likes (Newbie)]

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

 

[GreenSock 16,612 Likes (Superhero)]

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

gsap.registerPlugin(GSDevTools);