MotionPathHelper - missing kill method

[iongion]

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

 

[Rodrigo]

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!

[iongion]

Lovely, it works like a charm! Many thanks!

[GreenSock]

I just added a kill() function to the MotionPathHelper instance in 3.11.3. Enjoy!