Draw SVG Plugin to animate a dashed line

[JLernDesign]

I am wondering if there is a way to achieve this. I have a path that is dashed, but once I run the plugin and animate it, the path becomes solid. Trying to animated the dotted circle in the attached image.

[Jonathan]

Hello JLernDesign, and welcome to the GreenSock Forum!

 

It will be pretty hard to help you based on just an image. Could you please setup a codepen demo so we can see the actual SVG markup, as well as the GSAP code you have written. This way we can see what your trying that is giving you trouble.

 

Here is a great video tut by Carl, on How to create a codepen example demo.

 

By seeing your code live and in context, we can better help you!

 

Thank You!

[PointC]

Hey JLernDesign   ,

 

I've been working a lot with SVGs lately so I'm assuming you're referring to setting a stroke-dasharray in your path settings and then having the DrawSVG plugin turn it into a solid line during animation? 

 

I won't pretend to understand the inner-workings of the plug-in, but the docs state that the animation uses stroke-dasharray and stroke-dashoffset CSS properties so I would make a guess that any stroke-dasharray settings in the SVG path are being overwritten by the plug-in?

 

I'm curious about this myself so maybe Carl or Jack could let us know if animating a dashed stroke is possible?

[JLernDesign]

Jonathan, thanks for pointing me towards that tutorial on how to create a codepen (never did that before). Link is below. I put a delay on the animation so you can see how I want it to look with a dotted line, then once the circle draws on it is solid.

 

PointC, I had the same thought that if the plugin works by using the dash properties, it is most likely overwriting the dashes in my line. 

 

See the Pen QbPLre by anon (@anon) on CodePen.

 

Thanks for any help you can offer!

[OSUblake]

If it's just a circle, you can use a clip path.

 

See the Pen doLyvQ by osublake (@osublake) on CodePen.

[GreenSock]

DrawSVGPlugin does not support dashed lines, sorry.

 

Blake's idea is a clever one. I don't see an easy way to maintain the dotted line and animate it into place. I suppose you could try setting the dash array to a bunch of dashes and then the final one would be a much longer dash, and then you animate the stroke-dashoffset in an onUpdate to make it move. But you'd have to figure out how many dashes you'd need based on the length of the path/shape. Like stroke-dasharray="3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,450" - see what I mean? 

[Diaco]

Hi JLernDesign 

 

in addition , if you background color is a solid color you can go this way too :

 

See the Pen zGXvWW by MAW (@MAW) on CodePen.

[JLernDesign]

Thanks for the help! I think that last idea from Diaco is perfect. I am indeed working on a solid background and that seems to be a very simple way of achieving this. 

[Jonathan]

Nice easy solution Diaco

[Carl]

Just to throw my hat in the ring, here is the least efficient approach:

http://codepen.io/GreenSock/pen/MYMOpP?editors=001

 

Each dash is a separate path... not so good if you have 100 or so dots.

 

However, it might help people searching for a basic animated dash effect.

[Jonathan]

touché Carl.. bloody brilliant dash effect!

[OSUblake]

Diaco's solution is clever. It's also a good way to create to different colored dashes. 

 

I was curious about what Jack said about using the correct number of dashes so I created a function to do that. Just pass in an array of the pattern and the length of your path.  

// Ex: var myDash = getDash([5,3,5], 500);

function getDash(pattern, length) {

  var dash = [];
  var full = false;       
  var len  = pattern.length;
  var sum  = 0; 

  while (!full) {        
    for (var i = 0; i < len; i++) {
      var val = pattern[i];
      if (sum + val >= length) {
        full = true; break;                
      }
      sum += val;
      dash.push(val)
    }
  }    

  var last = length - sum;
  dash.length % 2 ? dash.push(0, last, length) : dash.push(last, length);
  return dash;
}

It seems to work great across all browsers.

 

 

See the Pen jPRbjL by osublake (@osublake) on CodePen.

[GreenSock]

You guys are nuts. 

 

I love how this community pounces on opportunities to get creative with solutions and inspire each other. Way to go, guys. 

[essentialtoils]

I am not sure if Answered Posts still get attention, but having the need to animate a dashed line, I thought I'd ask in the most relevant thread.

Currently, I am resorting to having to split each dashed line in AI and then produce a <g> of <paths> instead of a single <path>.

After that, I simply hide each point <path> with CSS:

svg g#line > path {
    display:none;
}

And then reveal them one by one with a time function:

var d = 130; // delay between each dash (ms)
var maxI = 0;
$($("svg g#line").children().get().reverse()).each(function(i, child){
    if (maxI < i) maxI = i;
    setTimeout(function(){
        $(child).css({
            "display":"inline"
        });
    }, d + (i*d));
});

Due to the top-to-bottom processing of the SVG export by Adobe Illustrator, I'm having to iterate over the children of the <g> in reverse order because I need to animate in that order, and I'm too lazy to reprocess the SVG manually, maybe someone will find this useful!

 

Anyhow, it works all good and fine, however, this approach seems to run mostly on the CPU, while it seems to me that GSAP functions are mostly GPU heavy.

 

Initially, I combined the MorphSVGPlugin's ability to animate along path with this "revealing" tactics with Linear.easeNone easing on the Tween, and it worked perfectly fine. HOWEVER! After loading up my GPU with screen recording software, I noticed that the 2 animations are COMPLETELY out of sync.

 

Can anyone think of a way to incorporate the point-revealing method into a Timeline perhaps to run the 2 animations completely in sync? 

 

Here's the CodePen: 

See the Pen bwdkXP by IGaMbLeRI (@IGaMbLeRI) on CodePen.

[essentialtoils]

Ha! Wow... Amazing how simple it is:

var d = 0.25; // delay between each dash (s)
var maxI = 0;
var tl = new TimelineLite({repeat:0});
$($("svg g#line").children().get().reverse()).each(function(i, child){
  tl.to($(child), d, {"opacity":1});
});

And it seems to have fixed my synchronization problems Great product, guys!

[kailash]

Great work guys. This forum helped me. Specially Diaco's comment. 

[OSUblake]

Hi @kailash

 

I think a better approach might be using the technique @PointC shows here. It doesn't require using the same color as the background.

 

 

[kailash]

Thanks @OSUblake

[ani7a]

This one is based on Diaco's idea, but with NO solid background 

 

See the Pen XqerqJ by ani7a (@ani7a) on CodePen.

 

EDIT: I've just saw  @PointC idea, seems that is the same  

Edited May 4, 2018 by ani7a

[PointC]

That's o.k. @ani7a - it's a good idea.

 

Something else to keep in mind with those mask animations is adding a slight rotation. Some of the browsers are getting fussy with mask animations (especially strokes) so you have to add a slight rotation to force the mask to be redrawn. I should probably add that tip to the SVG Gotchas thread.

 

Thanks for jumping in and welcome to the GreenSock forum.

 

Happy tweening.

 

[volgograd]

Faced the same problem and came to this, maybe someone will come in handy.

It works without masks and white path underneath.

See the Pen WOLaKB by nevolgograd (@nevolgograd) on CodePen.

[GreenSock]

3 hours ago, volgograd said:

Faced the same problem and came to this, maybe someone will come in handy.

It works without masks and white path underneath.

See the Pen WOLaKB by nevolgograd (@nevolgograd) on CodePen.

 

Thanks @volgograd! I noticed that it doesn't work on iOS Safari, though.