CODEWITHSUNDEEP
csssvgcss-animations
SMacFadyen
SMacFadyen

Reputation: 3165

How can I do an SVG Path drawing animation when the stroke has a dasharray?

Looking to animate the below SVG, which I have got working initially. However, I want it to 'draw' the second SVG in the opposite direction, WITH the dots i've defined.

Is there any way I can do this? Effectively drawing my shape from left to right with the dots.

Codepen: http://codepen.io/anon/pen/gFcAz

Upvotes: 1

Views: 1348

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101956

The normal dash offset animation trick really only works with solid lines.

This is the closest I managed to get using CSS animations.

http://jsfiddle.net/L4zCY/

Unfortunately the dashes crawl because you have no control over the step rate of the stroke-dashoffset. If you could make it step by 10 at a time, the dashes wouldn't move.

So I think the only way around it is to use Javascript.

var path = document.querySelectorAll("svg path").item(0);
animateDashedPath(path);

/*
 * Animates the given path element.
 * Assumes the path has a "5 5" dash array.
 */
function animateDashedPath(path)
{
  var pathLength = path.getTotalLength();
  var animationDuration = 2000;
  var numSteps = Math.round(pathLength / (5+5) + 1);
  var stepDuration = animationDuration / numSteps;

  // Build the dash array so we don't have to do it manually
  var dasharray = [];
  while (numSteps-- > 0) {
    dasharray.push(5);
    dasharray.push(5);
  }
  dasharray.push(pathLength);

  // Animation start conditions
  path.setAttribute("stroke-dasharray", dasharray.join(" "));
  path.setAttribute("stroke-dashoffset", -pathLength);

  // We use an interval timer to do each step of the animation   
  var interval = setInterval(dashanim, stepDuration);

  function  dashanim() {
    pathLength -= (5+5);
    path.setAttribute("stroke-dashoffset", -pathLength);
    if (pathLength <= 0) {
      clearInterval(interval);
    }
  }
}

Demo here

Update

It looks like there is an issue with in FF. If you create the "right" number of dashes for the path length, it doesn't quite reach the end of the path. You need to add extra.

A version of the demo that works properly on FF is here

Upvotes: 1

Related Questions