0

I was trying to morph a clip-path from 1 shape to another using anime.js. The shapes have an identical number of points.

I ran into some issues with the paths not correctly showing. Upon further inspection I found that when I tried to animate the d property of a path using anime.js, the outcome in the DOM would be different than what I passed in the anime.js animation function.

I built a simple codepen to show the issue..

Initially, the image is clipped using the path with id path, which has a d attribute equal to:

M-82.511-84.642a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259.677.677,0,0,1-.14.222.467.467,0,0,1-.251.112.572.572,0,0,1-.314-.041.377.377,0,0,1-.224-.226.617.617,0,0,1,.072-.326.8.8,0,0,1,.158-.3.366.366,0,0,1,.305-.1A.621.621,0,0,1-82.511-84.642Z

Then, when you click the button, the anime function runs on the path and tries to change it to the same value.

That anime function is as follows:

anime({
  targets: 'svg path',
  duration: 500,
  easing: 'linear',
  d: 'M-82.511-84.642a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259.677.677,0,0,1-.14.222.467.467,0,0,1-.251.112.572.572,0,0,1-.314-.041.377.377,0,0,1-.224-.226.617.617,0,0,1,.072-.326.8.8,0,0,1,.158-.3.366.366,0,0,1,.305-.1A.621.621,0,0,1-82.511-84.642Z'
})

I have also tried the following, as it is closer to the code that is shown in the anime.js documentation:

anime({
  targets: 'svg path',
  duration: 500,
  easing: 'linear',
  d: [{ value: "M-82.511-84.642a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259.677.677,0,0,1-.14.222.467.467,0,0,1-.251.112.572.572,0,0,1-.314-.041.377.377,0,0,1-.224-.226.617.617,0,0,1,.072-.326.8.8,0,0,1,.158-.3.366.366,0,0,1,.305-.1A.621.621,0,0,1-82.511-84.642Z"}]
})

However, as you can see visually, the svg is nowehere near what it was. Inspecting the path shows that the d attribute that should be the same before and after the animation is no longer the same. It is now:

M-82.511 -84.642a0,0,1,0,0,1 0,0,1 0,0,1 0,0,1 -0.314 0.377,0,0,1 -0.224 0.617,0,0,1,0.072 0.8,0,0,1,0.158 0.366,0,0,1,0.305 -0.1A0,0,1 -82.511 -84.642Z.

As I said, this is a simplified version of what I'm trying to do. The anime.js documentation doesn't explicitly mention being able to animate the d attribute, but seeing as it does actually change the path, I would imagine this should be doable.

Tyadan
  • 123
  • 1
  • 6

1 Answers1

0

Apparently, anime.js has a bug parsing highly minified path data strings.

Probably, the parsing regex should be improved to handle concatenated floating point values like

a.483.483,0,0,1,.174.226.45.45,0,0,1-.061.259

translates to

a .483 .483 0 0 1 .174 .226
.45 .45 0 0 1 -.061 .259

But gets parsed as a0,0,1,0,0,1 0,0,1 0,0,1 0,0,1

Workaround: "deminify" your path data e.g with svg path editor.

Paste you d string and click the minify checkbox twice.

Result:

M -82.511 -84.642 a 0.483 0.483 0 0 1 0.174 0.226 a 0.45 0.45 0 0 1 -0.061 0.259 a 0.677 0.677 0 0 1 -0.14 0.222 a 0.467 0.467 0 0 1 -0.251 0.112 a 0.572 0.572 0 0 1 -0.314 -0.041 a 0.377 0.377 0 0 1 -0.224 -0.226 a 0.617 0.617 0 0 1 0.072 -0.326 a 0.8 0.8 0 0 1 0.158 -0.3 a 0.366 0.366 0 0 1 0.305 -0.1 A 0.621 0.621 0 0 1 -82.511 -84.642 Z
herrstrietzel
  • 11,541
  • 2
  • 12
  • 34