If you’ve ever wanted to draw on a SVG dashed line, you may have encountered a little bit of trouble. There are a few ways to do it, but my preference is to use a mask and the DrawSVG plugin from GreenSock. Let’s take a look.
The DrawSVG plugin
The DrawSVG plugin from GreenSock animates the SVG stroke of an element via control of the stroke-dashoffset and stroke-dasharray properties. You’d normally need to get the length of your path to do the animation manually, but that’s all taken care of under the hood. The plugin also solves some browser inconsistency problems.
Okay, that’s great. Time to create a SVG dashed line animation.
Make a dashed path and duplicate it
Hop into your vector software and create any path of your choosing. You can even code it by hand, if that’s your jam. Apply a stroke-dasharray of any size and color you like and export the code.
Once you’re in your code editor, you need to copy and paste the path you just created. Remove the stroke-dasharray of the duplicate and make sure the stroke color is white. (White in the mask will reveal everything beneath it.) If you need a refresher, check out my article about the basics of masks and clipPaths. That new copy will be placed into a <mask> element in your <defs>.
I always group the element(s) I’m masking and mask the group. It saves you some headaches. You end up with this setup.
<defs>
<mask id="theMask" maskUnits="userSpaceOnUse">
<!-- your duplicate path -->
</mask>
</defs>
<g id="maskReveal" mask="url(#theMask)">
<!-- your dashed path -->
</g>
Everything is now ready for the fun part. Let’s draw this dashed path. Using GreenSock’s DrawSVG plugin is super simple. We just target the path in the mask element and tell it draw from 0.
gsap.from("#maskPath", {
duration: 4,
drawSVG: 0,
ease: "none",
yoyo: true,
repeat: -1,
repeatDelay: 0.4
});
See the Pen Basic dashed path animation by Craig Roblewsky (@PointC) on CodePen.
The dasharray is still live and can be animated
The cool thing about animating with a mask is that you can still do anything you want to the underlying dashed stroke. In the following example, I’ve animated the dasharray from the original size of 24,24 to 8,12 and tweened the stroke color to yellow. This is all happening while the mask is revealing the path.
See the Pen dashed path and strokeDashArray by Craig Roblewsky (@PointC) on CodePen.
Add more dashed paths
You’re certainly not limited to revealing one dashed path. You can make additional copies in the masked group and come up with interesting results.
See the Pen Double Dash by Craig Roblewsky (@PointC) on CodePen.
What if you have a lot of dashed paths?
Do you need to manually copy and paste a mask path for each one or create them in your vector software? Not at all. Let JavaScript do the work for you.
In the following demo, you can see the <mask> element is empty. I added four dashed paths to the masked group and use a loop to duplicate each dashed path to make the masks.
let targets = gsap.utils.toArray("#maskReveal path");
let appendGroup = document.querySelector("#theMask");
targets.forEach((obj, i) => {
let clone = obj.cloneNode(true);
clone.removeAttribute("stroke-dasharray");
gsap.set(clone, { attr: { stroke: "white" }, drawSVG: 0 });
appendGroup.appendChild(clone);
});
Using the array utility method from GreenSock, I grab the paths in the masked group and make a clone of each. I remove the dasharray attribute. As you’ll recall, the DrawSVG plugin uses that attribute to work its magic. Finally, I set the stroke color to white and the path to 0 and append it to the mask element. Now we can target all the paths.
See the Pen Dynamically create masks by Craig Roblewsky (@PointC) on CodePen.
Other cool stuff
You’re not limited to just drawing the dashed path. You can use GreenSock’s MotionPath plugin to attach other elements to the path and they’ll follow along as the path draws. I’ll save the details of that for another tutorial, but here’s a little example.
See the Pen Arrow follow dashed path by Craig Roblewsky (@PointC) on CodePen.
Final thoughts
I’ve just shown a few of the things you can do with dashed lines and the DrawSVG plugin from GreenSock. I hope you’ve picked up some ideas for your own work. I assume you’ll dash off and use this technique to create your own SVG dashed line animation. See what I did there? Until next time, keep your pixels movin’.
