Jump to content
Search Community

Draw SVG Plugin to animate a dashed line

JLernDesign test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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 7
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...
  • 4 months later...

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...

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.
×
×
  • Create New...