CODEWITHSUNDEEP
csssvg
Kaung Khant Zaw
Kaung Khant Zaw

Reputation: 1638

Svg animation with d: path

I am trying to animate my svg with path property by following this codepen, but my animation path is not smooth and going with some weird steps. Is there something wrong with path values or what am I doing wrong here ?

.p-4 path {
  d: path("");
  fill: #ff9fba;
  animation-name: dash;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


@keyframes dash {
  0% {
    d: path("");
  }
  25% {
    d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572a3.033,3.033,0,0,1,1.216,4.057,2.967,2.967,0,0,1-3.985,1.266c-.29-.15-.788-.47-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
  }
  50% {
    d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.13.02,2.61,1.726c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
  }
  75% {
    d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.273-.478-2.89-.8c2.144-7.713,7.106-11.175,14.747-10.291a3,3,0,0,1,2.635,3.325,3,3,0,0,1-3.325,2.635c-5.923-.685-7.377,2.705-8.276,5.937l-.423,1.42c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
  }
  100% {
    d: path("M-375.047,1034.989a3.005,3.005,0,0,1-.562-.053A3,3,0,0,1-378,1031.43c3.037-16.029,8.67-25.866,16.742-29.239,9.747-4.073,19.479,2.47,23.143,4.933l.872.572c2.935,1.514,5.3,1.92,7.007,1.2,3.235-1.366,4.915-6.892,6.265-11.331l3.273-.478-2.89-.8c2.144-7.713,7.106-11.175,14.747-10.291,3.293.381,11.241-.41,13.927-15.954a3,3,0,0,1,3.467-2.445A3,3,0,0,1-289,971.059c-3.658,21.167-16.638,21.342-20.529,20.892-5.923-.685-7.377,2.705-8.276,5.937l-.423,1.42c-1.714,5.637-3.848,12.653-9.671,15.113-3.426,1.447-7.5.975-12.11-1.4-.29-.15-.788-.469-1.451-.915-2.931-1.97-10.715-7.2-17.482-4.376-6.009,2.511-10.559,11.094-13.161,24.82A3,3,0,0,1-375.047,1034.989Z");
  }
}
 <svg xmlns="http://www.w3.org/2000/svg" width="89.095" height="67.442" viewBox="0 0 89.095 67.442" class="usp_overlap_photo p-4">
                                <path id="home-usp4-p4" transform="translate(378.051 -967.547)"/>
                              </svg>

Upvotes: 0

Views: 111

Answers (1)

chrwahl
chrwahl

Reputation: 13070

Would it be ok if the shape was turned into a path with a stroke instead of an outline of the shape with a fill?

Here I refactured the shape and animate the stroke-dasharray instead of the d attribute.

.p-4 path {
  fill: none;
  stroke: #ff9fba;
  stroke-width: 5px;
  stroke-linecap:round;
  animation-name: dash;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


@keyframes dash {
  0% {
    stroke-dasharray: 0 100;
  }
  25% {
    stroke-dasharray: 25 100;
  }
  50% {
    stroke-dasharray: 50 100;
  }
  75% {
    stroke-dasharray: 75 100;
  }
  100% {
    stroke-dasharray: 100 100;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100" class="usp_overlap_photo p-4">
  <path transform="translate(5 5)" id="home-usp4-p4" d="M 0,63 C 0,63 5,23 32,38 43,45 49,42 53,33 57,24 56,19 69,19 82,20 85,0 85,0" pathLength="100" stroke-dashoffset="0"/>
</svg>

Well, then we don't need all the keys in the keyframe:

.p-4 path {
  fill: none;
  stroke: #ff9fba;
  stroke-width: 5px;
  stroke-linecap:round;
  animation-name: dash;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


@keyframes dash {
  0% {
    stroke-dasharray: 0 100;
  }
  100% {
    stroke-dasharray: 100 100;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100" class="usp_overlap_photo p-4">
  <path transform="translate(5 5)" id="home-usp4-p4" d="M 0,63 C 0,63 5,23 32,38 43,45 49,42 53,33 57,24 56,19 69,19 82,20 85,0 85,0" pathLength="100" stroke-dashoffset="0"/>
</svg>

Upvotes: 2

Related Questions