iongion Posted October 3, 2022 Share Posted October 3, 2022 In React 18 we must ensure resilience of apps when multi rendering to detect leaks. I am using this kind of code. Without the ability to cleanup previous motion path helpers, I see the helper twice on the screen. Is there a way to clean-up ? useLayoutEffect(() => { const guide = `#ProgressIndicatorMotionPath-${id}`; const targetProps = { // log: true, duration, transition: "linear", motionPath: { path: guide, align: guide, autoRotate: false, alignOrigin: [0.5, 0.5], }, }; const startTime = (frameStart / 60) * 1000; console.debug("Adding tween", targetProps, startTime); const tween = gsapTimeline.to(ref.current, targetProps, startTime); const helper = MotionPathHelper.create(guide); return () => { tween.kill(); // gsap.killTweensOf(helper); }; }, [id, target, frameStart, duration, pathSelector, gsapTimeline]); Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 3, 2022 Solution Share Posted October 3, 2022 Hi, The create method doesn't return a tween, it returns an object that among other things has the tween, so it would be like this: useLayoutEffect(() => { const guide = `#ProgressIndicatorMotionPath-${id}`; const targetProps = { // log: true, duration, transition: "linear", motionPath: { path: guide, align: guide, autoRotate: false, alignOrigin: [0.5, 0.5], }, }; const startTime = (frameStart / 60) * 1000; console.debug("Adding tween", targetProps, startTime); const tween = gsapTimeline.to(ref.current, targetProps, startTime); const helper = MotionPathHelper.create(guide); return () => { tween.kill(); helper.animation.kill(); }; }, [id, target, frameStart, duration, pathSelector, gsapTimeline]); But now GSAP has Context which helps you with all this: https://greensock.com/docs/v3/GSAP/gsap.context() So it would look like this: useLayoutEffect(() => { const guide = `#ProgressIndicatorMotionPath-${id}`; const targetProps = { // log: true, duration, transition: "linear", motionPath: { path: guide, align: guide, autoRotate: false, alignOrigin: [0.5, 0.5], }, }; const startTime = (frameStart / 60) * 1000; console.debug("Adding tween", targetProps, startTime); const ctx = gsap.context(() => { const tween = gsapTimeline.to(ref.current, targetProps, startTime); const helper = MotionPathHelper.create(guide); }); return () => ctx.revert(); // <- Cleanup! }, [id, target, frameStart, duration, pathSelector, gsapTimeline]); You can also pass a scope that resides inside the component in order to narrow down the selectors passed to GSAP. Check the docs and let us know if you have any more questions. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
iongion Posted October 4, 2022 Author Share Posted October 4, 2022 Lovely, it works like a charm! Many thanks! 3 Link to comment Share on other sites More sharing options...
GreenSock Posted October 4, 2022 Share Posted October 4, 2022 I just added a kill() function to the MotionPathHelper instance in 3.11.3. Enjoy! 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