I tried the following tutiroal from here: /

var path = document.querySelector(".svg1");
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition = "none";
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition = "stroke-dashoffset 1s ease-out";
path.style.strokeDashoffset = 0;

HTML is as following:

<path class="svg1" 
style="fill: none; stroke: #3498db; stroke-width: 7; stroke-linecap: round; stroke-linejoin:  miter; stroke-miterlimit: 4;"
d="M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103"
/>

The thing is when I use it in Firefox, it works. But if I go for Chrome, the animation freezes at something like 75% and instantly jumps to 100% in like 30s. I've noticed, that the animation doesn't freeze only in one case - if I use stroke-dashoffset 530ms ease-out, i.e. 530ms or less.

Could someone suggest a solution for that or remend a good way to animate an svg path without tons of useless code?

I tried the following tutiroal from here: http://jakearchibald./2013/animated-line-drawing-svg/

var path = document.querySelector(".svg1");
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition = "none";
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
path.getBoundingClientRect();
path.style.transition = path.style.WebkitTransition = "stroke-dashoffset 1s ease-out";
path.style.strokeDashoffset = 0;

HTML is as following:

<path class="svg1" 
style="fill: none; stroke: #3498db; stroke-width: 7; stroke-linecap: round; stroke-linejoin:  miter; stroke-miterlimit: 4;"
d="M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103"
/>

The thing is when I use it in Firefox, it works. But if I go for Chrome, the animation freezes at something like 75% and instantly jumps to 100% in like 30s. I've noticed, that the animation doesn't freeze only in one case - if I use stroke-dashoffset 530ms ease-out, i.e. 530ms or less.

Could someone suggest a solution for that or remend a good way to animate an svg path without tons of useless code?

• javascript
• jquery
• css
• animation
• svg

• To be clear, when you say "animate path", you're talking about the specific animation shown in the example? – nrabinowitz Commented Oct 29, 2014 at 20:57
• Also, what path are you talking about? The answer is very different here is you have a plex looping path vs e.g. a timeline, which only draws in LTR. – nrabinowitz Commented Oct 29, 2014 at 20:59
• 1 No, "to animate a path" might mean moving a fixed path across the screen, rotating it, etc. The "draw in" animation is pretty specific. – nrabinowitz Commented Oct 29, 2014 at 21:00
• 2 Works fine for me. Can you show an example that doesn't work? – r3mainer Commented Oct 29, 2014 at 23:05
• 1 How plex is the rest of your page? It is possible that other code or animations are slowing down the overall refresh rate, causing a jump in the animation. Have you used the timeline in Chrome's developers tools to observe the display refresh rate and factors that might be slowing it down? – AmeliaBR Commented Oct 29, 2014 at 23:36

1 Answer 1

CSS-Tricks recently wrote an article on this:

The idea is we set our SVG shape with a dashed stroke where the dash length is the length of the entire path. Then we offset each dash with that path length with an animation. (Read the article)

FIDDLE

.svg1 {
  stroke-dasharray: 822;
  stroke-dashoffset: 822;
  animation: dash 5s linear alternate infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 822;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg version="1.1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
  <path class="svg1" style="fill: none; stroke: #3498db; stroke-width: 7; stroke-linecap: round; stroke-linejoin:  miter; stroke-miterlimit: 4;" d="M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103" />
</svg>

So how do you get the length of the path?

That's also covered in the above article:

Just run the code:

var path = document.querySelector('.svg1');
var length = path.getTotalLength();