anime icon indicating copy to clipboard operation
anime copied to clipboard

[BUG] Svg morph, isn't really morphing

Open aervxa opened this issue 6 months ago • 2 comments

Describe the bug

When i use svg morph on a path element, it just scales down path1 and scales path2 back instead of morphing, or atleast that's what it looks like

Provide a minimal reproduction demo of the bug

https://codepen.io/aervxa/pen/RNPEMEY

Detail the steps to reproduce the behavior in the minimal reproduction demo

Watch the animation, you can toggle it via the button

Describe the expected behavior

This is a codepen example doing it with GSAP https://codepen.io/aervxa/pen/azOPYXy

Environment details

Let me know which OS and browser version you're using.

  • OS: Windows 11
  • Browser: Chrome and Firefox (zen)
  • Version: 137.0.7151.120 and 1.13b respectively

aervxa avatar Jun 24 '25 22:06 aervxa

Thanks for reporting this. I think the issue here is that Anime.js doesn't adjust the starting point of the morphed path, this is what causes the weird "flip" effect. I have an improved version of the morph code working locally, I'll try to ship it in the next release!

juliangarnier avatar Jun 25 '25 09:06 juliangarnier

Oh yeah, it's a "flip" effect, not scale 😭 Thanks and goodluck! 🫡

aervxa avatar Jun 26 '25 08:06 aervxa