MotionPathPlugin: Start at current element position

[baothien]

Hello, I am using the MotionPathPlugin to move a character to specific points on an HTML page upon clicking and navigating to a subpage.

Each time I navigate to a subpage, I will set a cookie to determine the location of the main character on the path. And I want the function to run by taking the start index as the current position of the character.

CodePen it not available now . The purpose of the code is: Move an element to a specific point and navigate to a new page after a timeout.

My code:

function moveCharacterFn(url, endPoint, movingTime) {
    gsap.registerPlugin(MotionPathPlugin);
	
  	//redirect to subpage after moving animation is done!
  	setTimeout(function () {
            url.click();
        }, movingTime * 1000 - 100);
    // declare a null tween variable
    let tween;

    function createTween() {
        // save progress before we kill tween if it exists.
        let progress = tween ? tween.progress() : 0;
        // kill any pre-existing tween.
        tween && tween.progress(0).kill();

        // create the tween
        tween = gsap.to(".character", {
            motionPath: {
                path: ".path",
                align: ".path",
                alignOrigin: [0.8, 0.8],
                autoRotate: false,
                start: 0.05,
                end: endPoint
            },
            duration: movingTime,
            repeat: 0,
            repeatDelay: 1,
            ease: "power1.inOut",
        });

        // update tween's progress
        tween.progress(progress);

    }
    createTween();

    // listen for window resize to recalculate tween.
    window.addEventListener("resize", createTween);
}

My HTML:
 

<div class="character"></div>

<div class="road">
  <svg viewBox="0 0 1467 632" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_323_1396)">
<path class="path"
d="M-25.9998 42.1445C-25.9998 42.1445 547.056 40.2526 860 46.1438C1311.5 54.6434 1392 145.643 1392 218.143C1392 290.643 1315.5 312.144 1131.5 320.644C1049.64 324.426 838.814 312.538 786 332.143C720.099 356.604 858.209 421.941 883 436.143C936.604 466.849 1019.98 501.916 1050.5 528.643C1123 592.143 1131.5 634.643 1131.5 634.643"
stroke="#020878" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-dasharray="20 20" />
</g>
</svg>
</div>

.character {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0%;
  bottom: 30vw;
  background-color: green;
}

.roads {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80vw;
  height: 68vh;
}

.roads svg {
  position: absolute;
  bottom: 0;
}

// do not wonder why am i using bottom 

I know it's a bit of complicated. Well, i cant explain a complicated problem with quite sketchy, hope you can understand it!
Have a good day!

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

It's nice that you provided a few excerpts of the code, but that isn't adequate to see the issue illustrated clearly. We'd need, for example, to see the function called and what you're passing in, etc. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[baothien]

The problem is, in the first time, it's okay to be start at the left, the box moves the right way. However, when I click on the black one, I don't want the box to move from the start to black. It should move from its current position to black. 
My problem is that I can't get the current position of the box to set the 'start' property and if it moving from green to black, the box should be flip

I cant make a Demo on Codepen cuz it's not let me login/sign up. So i make this.
Let me know if something is not good with the demo!

[GreenSock]

Are you trying to do this?:

https://codesandbox.io/p/sandbox/funny-bush-forked-gpj8xt?file=%2Findex.js%3A19%2C23

 

let tween;
function moveCharacterFn(endPoint, movingTime) {
  gsap.registerPlugin(MotionPathPlugin);

  function createTween() {
    // save progress before we kill tween if it exists.
    let start = 0.05;
    if (tween) {
      start =
        tween.vars.motionPath.start +
        (tween.vars.motionPath.end - tween.vars.motionPath.start) * tween.ratio;
      tween.kill();
    }

    // create the tween
    tween = gsap.to(".character", {
      motionPath: {
        path: ".path",
        align: ".path",
        alignOrigin: [0.8, 0.8],
        autoRotate: false,
        start: start,
        end: endPoint,
      },
      duration: movingTime,
      repeat: 0,
      repeatDelay: 1,
      ease: "power1.inOut",
    });
  }
  createTween();

  // listen for window resize to recalculate tween.
  window.addEventListener("resize", createTween);
}

 

[baothien]

Yes. thank you!!!