MrGrimsley

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!

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: Implementing GSDevTools inside the componentDidMount() of my homepage component. Implementing GSDevTools inside the componentDidMount() of my layout wrapper 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