Jump to content
GreenSock

iongion

MotionPathHelper - missing kill method

Go to solution Solved by Rodrigo,

Recommended Posts

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

  • Solution

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!

  • Like 2
Link to comment
Share on other sites

Lovely, it works like a charm! Many thanks!

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×