MotionPath fromCurrent not working as expected

[Les Prétentieux]

Hello, I'm trying to draw a rectangle with a set of coordinates with MotionPath. From what I undertstand the fromCurrent should be removing the (0, 0) starting position and jumping straight to my first coord (100, 100). But it doesn't see to be working.

See the Pen OJeLLRj by Etienne-Clerc (@Etienne-Clerc) on CodePen

[Rodrigo]

Hi @Les Prétentieux and welcome to the GSAP Forums!

 

As far as I can tell, the MotionPath Plugin is doing exactly what's supposed to. Is not including the 0, 0 coordinates in the array, but your element is actually at x: 0, y: 0 when the animation is created, so obviously the plugin has to move the element from that position to the first point in the array being passed so it becomes part of the path.

 

You could try something like this:

gsap.to(".box", {
  x: 100,
  y: 100,
  duration: 1,
  onComplete: () => {
    const tween = gsap.to(".box", {
      motionPath: {
        path: [
          { x: 100, y: 100 },
          { x: 200, y: 100 },
          { x: 200, y: 200 },
          { x: 100, y: 200 },
          { x: 100, y: 100 }
        ],
        curviness: 0,
      },
      duration: 6,
      ease: "power3.inOut"
    });
    MotionPathHelper.create(tween);
  }
});

Or perhaps something like this:

gsap.set(".box", {
  x: 100,
  y: 100,
});

var tween = gsap.to(".box", {
  motionPath: {
    path: [
      { x: 100, y: 100 },
      { x: 200, y: 100 },
      { x: 200, y: 200 },
      { x: 100, y: 200 },
      { x: 100, y: 100 }
    ],
    curviness: 0,
    fromCurrent: false
  },
  duration: 6,
  ease: "power3.inOut"
});

MotionPathHelper.create(tween);

Finally thanks for being a GSAP Club member and supporting GSAP! 💚

 

Hopefully this helps.

Happy Tweening!

[Les Prétentieux]

Thanks so much for you help! That should have been obvious, don't know why I didn't think of that ahaha!