MotionPathPlugin: element aligns to a different path / stuck at top-left (React + SVG)

[Tseku]

Hello,

 

I’ve run into a MotionPathPlugin issue that I can’t seem to isolate.

When I animate an SVG element (a droplet/rect) along a path using align: pathEl, the motion path itself renders fine, but the element always stays at the top-left corner of the SVG. When I enable MotionPathHelper.create(pathEl), the edit gizmo also appears at the top-left instead of over the actual dashed path.

 

What’s confusing is that the path itself is visible and positioned correctly, but MotionPathPlugin seems to think the path is just a small curve near (0, 0).

Here's what I'm doing (simplified for clarify):

 

import gsap from "gsap";
import { useEffect, useRef } from "react";
import MotionPathPlugin from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { MotionPathHelper } from "gsap/MotionPathHelper";

gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);

export default function TestMotion() {
  const pathRef = useRef(null);
  const dropletRef = useRef(null);

  useEffect(() => {
    const pathEl = pathRef.current;
    const droplet = dropletRef.current;

    gsap.set(droplet, {
      transformOrigin: "50% 50%",
    });

    gsap.to(droplet, {
      motionPath: {
        path: pathEl,
        align: pathEl,
        alignOrigin: [0.5, 0.5],
        autoRotate: 270,
      },
      ease: "none",
      scrollTrigger: {
        trigger: pathEl,
        start: "top center",
        scrub: true,
      },
    });

    MotionPathHelper.create(droplet);

    MotionPathHelper.create(pathEl);
  }, []);

  return (
    <svg viewBox="0 0 1021 3018" width="100%" height="100%">
      <path
        ref={pathRef}
        d="M100,100 C100,300 400,300 400,500" // example
        stroke="#97D5D0"
        fill="none"
      />
      <rect ref={dropletRef} width="40" height="40" fill="#97D5D0" />
    </svg>
  );
}

 

 

What happens

• The dashed path renders correctly in the SVG.

• The blue helper overlay and the animated element both appear at the top-left corner.

• It looks like GSAP is aligning to some other invisible path (maybe a duplicate?).

 

What I’ve checked

• Plugins are registered (MotionPathPlugin, ScrollTrigger)
• The refs are valid, not null
• pathEl.getBoundingClientRect() returns the expected dimensions

I can provide a minimal CodePen demo if needed — just wanted to check if there’s an obvious mistake first.

 

Thanks so much! 🙏

 

Environment:

GSAP 3.13.0

React 19.1.0

@gsap/react 2.1.2

Zen (Firefox) | Macos

 

 

[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? 

 

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 GSAP as shown in the Install Helper in our Learning Center : 

• 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. ✅

[Tseku]

Absolutely, here's a small demo showing what I want to do. Basically, in motionPath i'm trying to align dropletRef (<rect>) to align on the pathRef and animate along the path. But when I use align it stays on the top left corner and never move. The image I attached above is screen shot of MotionPathHelper visualizing the path where dropletRef is following. Does this make sense? If not I can provide more information. Thanks in advance!

https://stackblitz.com/edit/react-zavqiucw?embed=1&file=src%2FApp.js

Edited October 15, 2025 by Tseku

[Tseku]

I still haven't figured it out yet. Anyone?

[Rodrigo]

Sorry for the late response, this one slipped through the cracks 😞 🙏

 

There are a few issues in your demo, first you need to use ease: "none" in this type of situations in order to have a uniform progress of the MotionPath instance, otherwise you could have a feeling of an uneven speed as you scroll up/down. Second your start point was past the start trigger and the end point never reached the end trigger so the animation wasn't going to complete like that. You can look into the clamp feature (click the view more details link):

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#start

 

But is always a better idea to have that space in order to correctly reach the start and end triggers.

 

Also you're passing a ref that is null to the scope of the useGSAP hook so GSAP can find the right elements. Of course you were using just React refs so there shouldn't be a problem, but if you use any selector for example that could be a problem.

 

Here is a fork of your demo that seems to be working the way you intend:

https://stackblitz.com/edit/react-4d82dfyd?file=src%2FApp.js,src%2Fstyle.css

 

Once again sorry for the late response.

 

Hopefully this helps

Happy Tweening!

[Tseku]

No worries, thank you for the response.

However, the demo doesn't seem to be working for me. As you can see, I've provided the screenshot of your fork on stackblitz. The <rect> element is attached to the top and doesn't move when I scroll.

[Rodrigo]

Hi,

 

Is working on my end 🤷‍♂️, here is a screen recording:

https://i.imgur.com/z7Dzkq2.mp4

[Tseku]

Thanks Rodrigo,

I think I found the issue. I've attached a screen recording showing that the demo doesn't work on Zen browser (firefox) but works on Safari.

What do I do in this situation?

 

https://imgur.com/MoR7wHi

[GreenSock]

I don't have much time to look at this, but it sounds like it could be related to this which is a Firefox bug they introduced related to fill="none" (I'd recommend changing it to transparent instead of none) but we've got a workaround implemented in our next release: 

This is a preview of the upcoming MotionPathPlugin that works around Firefox's bug: 

https://assets.codepen.io/16327/MotionPathPlugin.min.js

[Rodrigo]

Yep, Jack is right! Changing the fill to transparent fixes the issue in Firefox. I updated the demo, same URL as in my previous post.

 

Happy Tweening!

[Tseku]

That fixed the issue! Thanks guys.