Share Posted November 19, 2019 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 Link to comment Share on other sites More sharing options...
Share Posted November 19, 2019 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 2 Link to comment Share on other sites More sharing options...
Share Posted November 19, 2019 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 More sharing options...
Share Posted November 19, 2019 Creating it is easy. But how do you destroy it? Link to comment Share on other sites More sharing options...
Share Posted November 19, 2019 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 More sharing options...
Share Posted November 19, 2019 Should probably document that. Link to comment Share on other sites More sharing options...
Share Posted November 19, 2019 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(); 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 22, 2019 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! 2 Link to comment Share on other sites More sharing options...
Share Posted March 9, 2021 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 More sharing options...
Share Posted March 9, 2021 Hm, I'm guessing that maybe you forgot to register GSDevTools first? gsap.registerPlugin(GSDevTools); 2 Link to comment Share on other sites More sharing options...
Share Posted July 28, 2022 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 More sharing options...
Share Posted July 28, 2022 Hey there! If you log out GSDevTools what do you get? 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