svg animation not following defined path, moving erratically

Question

I created an svg and am attempting to move one circle element along a path. I added the path into the svg to make sure it is appearing in the correct place and it is. However, when using offset-path, the object is not moving along the path provided, but rather moving erratically on the page.

I was basing my model off this pen and but my pen is not successful.

The code:

body{
  max-width: 400px;
  box-sizing: border-box;
}

#vine-tomatoes circle:first-of-type {
  animation: move 5s infinite linear;
    offset-path: path("M264,29.7 L270,29.7 L256,29.7 C257.9,30.5 260.9,31.5 264.6,31.5 C266.7,31.5 266.6,52.3 265,63 C256.7,57.3 249.7,55.9 244,56.3 C212.3,58.6 185.1,120.6 173.3,209.7");
}
#vine-tomatoes circle:nth-of-type(4) {
  animation: get-hit 2s linear infinite .4s; /* 2s * .2 =  */
}
@keyframes move {
  0% {
    offset-distance: 0;
  }
  100% {
    offset-distance: 100%;
  }
}
/* @keyframes wiggle-drop-bounce {
  5% {transform: translateX(-1%);}
  10% {transform: translateX(1%);}
  20% {transform: translateX(0) translateY(10%);}
  30% {transform: translateX(-5%) translateY(8%);}
  60% {transform: translateX(-15%) translateY(20%);}
  100% {transform: translateX(-30%) translateY(45%);}
} */

@keyframes get-hit {
  0% {transform: translateX(1%);}
  40% {transform: translateX(0);}
}

Kaiido · Accepted Answer

It seems the Path commands in the path CSS function are relative to the target's position, even though you used the capitalized absolute version of these commands...

I have to admit I don't know this function, and can't tell if it is a bug in Blink (only implementors yet) or else.

But for a fix, set your 's cx and cy to 0, or rewrite the path data so it is relative to the circle's position.

body{
  max-width: 400px;
  box-sizing: border-box;
}

circle {
  animation: move 5s infinite linear;
    offset-path: path("M264,29.7 L270,29.7 L256,29.7 C257.9,30.5 260.9,31.5 264.6,31.5 C266.7,31.5 266.6,52.3 265,63 C256.7,57.3 249.7,55.9 244,56.3 C212.3,58.6 185.1,120.6 173.3,209.7");
}
@keyframes move {
  0% {
    offset-distance: 0;
  }
  100% {
    offset-distance: 100%;
  }
}

svg animation not following defined path, moving erratically

Answers (1)

Related Questions