Possible MotionPathPlugin edge case with perfectly vertical SVG paths and

[Kei233]

Hi GSAP team, I apologize in advance if anything isn't entirely clear; English is not my native language.

 

I think I may have found an edge case in MotionPathPlugin.

Before posting this, I reduced my original React project to a minimal reproducible example using only plain HTML, CSS and JavaScript.

CodePen (minimal reproduction):

 

 

Expected behavior

Both cursors should follow their respective paths identically. The only difference between the two paths is a 1px horizontal offset.

 

Actual behavior

The blue cursor follows its path correctly.

The red cursor behaves differently, even though the code is identical except for the path coordinates.

The issue only occurs when the path is perfectly vertical (dx = 0).

For example:

<!-- Doesn't work --> 
<path d="M150 0 L150 100" />
<!-- Works --> 
<path d="M150 0 L149 100" />

 

Changing the endpoint by just 1 unit on the X axis makes the issue disappear completely.

During testing I also noticed that replacing the SVG transform="scale(...)" with a GSAP-applied scale changes the symptoms, but the issue still appears to be triggered only by perfectly vertical paths.

 

Environment

• GSAP 3.15.0
• MotionPathPlugin
• Plain HTML/CSS/JavaScript (no React or other frameworks)
• Reproduced in Brave, Chrome and Edge

I'm not sure whether this is an intended limitation or an actual bug, but the behavior seemed unusual enough to report.

If I'm missing something in the way MotionPath is expected to work, I'd be happy to learn the correct approach.

 

I would appreciate it if you could let me know whether this is an actual bug or expected behavior. If this is a known limitation, I'd also appreciate a pointer to any documentation or previous discussion, as I wasn't able to find anything about this specific case.

 

 

Thanks for your time!

See the Pen azpKeqQ?editors=1010 by Johan-Yesid-Tavera (@Johan-Yesid-Tavera) on CodePen.

[Rodrigo]

Hi,

 

Right now I can't look into this and I'm not really that well versed in SVG, but this (for some reason I can't explain) seems to work:
 

<svg class="svg" viewBox="-1000 -1000 2000 2000" preserveAspectRatio="xMidYMid meet" fill="none" stroke="white" stroke-width="6" xmlns="http://www.w3.org/2000/svg">
  <g class="group">
    <!--    No work -->
    <path d="M149 0 L150 100" class="vertical" />
    <!--    Work -->
    <path d="M-99 0 L-100 100" class="vertical2" />
  </g>
  <circle r="50" fill="rgb(255, 0, 0)" class="cursor" />
  <circle r="50" fill="rgb(0, 0, 255)" class="cursor2" />
</svg>

Is worth noticing as well that the initial scale you're applying to the whole group is not helping neither, again I couldn't really tell you, but this code creates the same effect without the initial scale:

<svg class="svg" viewBox="-1000 -1000 2000 2000" preserveAspectRatio="xMidYMid meet" fill="none" stroke="white" stroke-width="18" xmlns="http://www.w3.org/2000/svg">
  <g class="group">
    <!--    No work -->
    <path d="M250 0 L250 300" class="vertical" />
    <!--    Work -->
    <path d="M-100 0 L-100 300" class="vertical2" />
  </g>
  <circle r="50" fill="rgb(255, 0, 0)" class="cursor" />
  <circle r="50" fill="rgb(0, 0, 255)" class="cursor2" />
</svg>

Later I'll look and ask around in order to provide a proper explanation.

 

In the meantime I hope this helps

Happy Tweening!

[Kei233]

Hace 23 minutos, Rodrigo dijo:

Hola,

 

En este momento no puedo investigar esto y realmente no estoy muy versado en SVG, pero esto (por alguna razón que no puedo explicar) parece funcionar:
 

También vale la pena notar que la escala inicial que estás aplicando a todo el grupo tampoco ayuda, nuevamente no podría decirte, pero este código crea el mismo efecto sin la escala inicial:

Más tarde miraré y preguntaré para poder dar una explicación adecuada.

 

Mientras tanto espero que esto ayude

¡Feliz preadolescencia!

Thanks for taking the time to look into this!
 

On my side, I already managed to work around the issue. In my particular case, it only happened when I applied the scale transformation, which is why I included it in the CodePen example.
 

I'm not sure if this helps, but I also noticed that the behavior tends to become more noticeable when more paths are added. I experimented with different viewBox values as well, but I couldn't find another workaround.
 

If I come across any other related behavior while experimenting, I'll be sure to share it here. I mainly wanted to report what seemed like an unexpected behavior, so I hope the information is useful.