JuVince

That's very clear thank you so much ! I converted everything to use killTweensOf, it just seems more readable and economical. I found this reference for useRef, will take a closer look

@OSUblake thank you, that makes a little more sense. I realize this came from the solution you gave me here, I'm really not serious student ? To be honest I still understand very little about .current, I need to study it. If you happen to know some "for dummies" intro to it, I'm interested ! Also, in that case, would there be any reason to choose either kill() or killTweensOf()? Or do they behave roughly the same (without extra variable for killTweensOf I guess) .killTweensOf

Ok typical me, I think I found the solution 3 min after posting — always helps the brain to "explain"... ? So I'm setting let names tweenCount and tweenPercent to store the gsap.to instances, and then simply tweenCount.kill() / tweenPercent.kill() inside the cleanup() functions Now what I don't understand is why gsap.killTweensOf wouldn't work, while kill does. I'm really interested if something has an explanation for this ! Thanks !

Hi everyone, Sorry to revive this not so old topic, I have a similar problem but with React hooks, Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. I'm pretty new to React and I'm not sure what I can do to clean the gsap process. I'm using gsap in two useEffects to drive simultaneously a countdown (in seconds going down) and a loading bar (in percent going up) I tried the following : ///// COUNTDOWN ///// const [countdown, setCountdown] = useState(props.seconds); const proxyCount = useRef({ countdown }); useEffect(() => { gsap.to(proxyCount.current, { countdown: 0, duration: props.seconds, ease: "linear", overwrite: "auto", onUpdate: () => { setCountdown(proxyCount.current.countdown); } }); return function cleanup() { gsap.killTweensOf(proxyCount, "countdown"); }; }, [setCountdown]); ///// PERCENT ///// const [percent, setPercent] = useState(0); const proxy = useRef({ percent }); useEffect(() => { gsap.to(proxy.current, { percent: 100, duration: props.seconds, ease: "linear", overwrite: "auto", onUpdate: () => { setPercent(proxy.current.percent); } }); return function cleanup() { gsap.killTweensOf(proxy, "percent"); }; }, [setPercent]); I thought that would be it but gsap.killTweensOf, either with or without the 2nd argument ( "countdown" / "percent" ) doesn't seem to fix it. I'm not using timelines yet so I wondered if anyone has an alternative to the t1.kill() here. Thanks in advance ! Julien

Hi @OSUblake Thank you so much, that's exactly what I needed. I didn't study useRef yet, this is why. And I obviously I missed the second argument of of useEffect, in my missed attempt I did put the percent variable but I didn't think it should be setPercent instead, I think I get it now. About 2), I don't have really an example, but I think you did answer my question, precisely with the conditional firing of useEffect. This way I guess the state is not overloaded. But I'll follow you advice and make sure to avoid animating states as much as possible. Finally to answer your question about React. It's a tricky one, because I'm really new to this, and definitely not (and not planning to become) a professional programmer, so my opinion will probably be marginal. I'm a music composer and digital artist, usually working with very different programming environments, mostly MaxMSP (visual prog. language) and CommonLISP (I know, pretty old school ). I have a specific artistic project where I want the audience to interact collectively with my system, during the performances, with their own smartphone. Problem, our budget is still too small (hello covid) to hire someone full-time to program the interfaces. So in order to move on with the project and do actual testings in artistic setting I didn't have other choice than to train myself and start making prototypes. I hired a teacher a couple weeks ago, to help me figure things out and he oriented me towards React very early, I think because it's more adapted and accessible for what I have in mind. If you want to know more don't hesitate to PM, but again I'm sure that's very far from the typical React user.

Hello again (so soon...) I wrote this test trying to control a ant.design Progress bar's percent value, simply moving from 0 to 100 in a few seconds. https://codesandbox.io/s/test-threegsap-7cuco To see what "happens", open the console and click "press start". then click "go back" to return home and do it again I want to use gsap for the job, obviously not for such simple task but also to eventually define "weirder", fake loadbar behaviors. Problem : my proxy value updates correctly (i.e. log from onUpdate), but I cannot figure out the correct place to call the state setter (setPercent). It tried two places that are commented out in "src/components/loadingbar/loadingbar.js" (lines 21 & 27) but it generally ends up slowing down everything, and the progress bar is not even updated. I can't reproduce it anymore, but I also saw once an error message saying there was basically too many new values. Now my questions are : 1) do you see any way to modify this to get the progressbar to update as expected? I'm still new to gsap + React (especially useEffect) so again my apologies if that's extremely simple. 2) in general, what would be good practice when dealing with objects that cannot be updated too often. Is there a way to downsample gsap somehow?... Many thanks in advance !

Fantastic, thank you Jack it worked beautifully. I tried using a proxy object at first but I was missing the onUpdate part, makes total sense now. Tweening is definitely super happy...!

Hi ! Apologies in advance, I'm a musician / digital artist and a total beginner with gsap (like 2 days ago) but also very new to Js, React and Three.js. I'm really amazed how easily gsap handles animation of any params compared to other solutions I found in the past. It will make my life so much easier, I'm already considering to join the Greensock club soon...! Since yesterday I've been hitting my head against the wall and I can't figure this out. Here's the sandbox : https://7cuco.csb.app I have this button that triggers random variations of color and rotation speed of a cube. I wanted gsap to smooth every random value by a few seconds. I managed to make this happen very easily for the rotation speed (I guess because I worked from a simple object) but for some reason it doesn't work as excepted with the Three.color object. Every click resets the color to black, before moving gradually to the selected color. Almost... I'm really sorry in advance, I expect this to be a really stupid mistake. Thanks in advance for your help !