Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JLernDesign

Draw SVG Plugin to animate a dashed line

Recommended Posts

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.

post-308-0-25498900-1439331532_thumb.png

Link to comment
Share on other sites

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! :)

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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? 

  • Like 4
Link to comment
Share on other sites

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

  • Like 8
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

Nice easy solution Diaco :)

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

touché Carl.. bloody brilliant dash effect! :)

Link to comment
Share on other sites

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

  • Like 6
Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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.

 

 

  • Like 5
Link to comment
Share on other sites

  • 4 months later...

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 :D 

Edited by ani7a
  • Like 3
Link to comment
Share on other sites

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.

:)

 

  • Like 3
  • Haha 1
Link to comment
Share on other sites

  • 4 months later...

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×