DrawSVG Tutorial: How to Make a Reveal Effect With GreenSock

DrawSVG plugin by GreenSock

You’ve probably seen on some websites the animation of text or shapes being drawn. Drawing produces an elegant reveal effect and can bring your websites to live.

Want to know the best part?

You can easily make this effect with GreenSock’s DrawSVG plugin. But…

…there are a few key things you need to set up for it to work.

In this tutorial, I will walk you through the process step-by-step to make this animated logo:

See the Pen Simple Logo Reveal with GreenSock’s DrawSVG by Jason Baciulis (@jasonbaciulis) on CodePen.

#What You Will Learn:

  • How DrawSVG works, and its capabilities.
  • How to prepare typed text in Illustrator for DrawSVG.
  • How to optimize your SVGs.
  • How to set up the code and start animating.

Note: DrawSVG is available only to Club GreenSock members. But later in the article, I’ll show where you can try it out for free.

#How DrawSVG Works

First of all, you need to know how DrawSVG works to be able to prepare your assets correctly.

You can either reveal or hide the stroke of these shapes drawn in you vector graphic editor like Illustrator:

  • <path>
  • <line>
  • <polyline>
  • <polygon>
  • <rect>
  • <ellipse>

DrawSVG does this by controlling the stroke-dashoffset and stroke-dasharray CSS properties.

#Quick Demo Showing How DrawSVG Works

See the Pen DrawSVGPlugin Values by GreenSock (@GreenSock) on CodePen.

#How to Convert Typed Text to Paths

Select Type Tool (T) and type your text.

Now get back to Selection Tool and right click on the text. Select Create Outlines.

Adobe Illustrator's create outlines option

Now your text is converted to paths you can draw.

But there’s a catch.

Most fonts are converted to outline paths. Meaning that DrawSVG will draw only outlines and leave a fill empty. Of course, that’s maybe exactly what you’re after, and you can also animate the fill as I did in the demo. But…

If you want to achieve a handwriting effect, there’s some extra work to do. Luckily, Craig Roblewsky – to the addition of his awesome codepen – also made the detailed tutorial about it.

#Export SVG from Illustrator

When you export SVG, your artboard will become viewBox. So usually you’d want it to be the size of your illustration but when you animate you need to think ahead if your animation won’t be hidden. Although, sometimes that’s what you want. So just keep that in mind:

Artboard = viewBox.

In case your viewBox is too small it’s easily fixable with CSS. Just set overflow: visible on your SVG.

Now:

Go to Artboard Tool (Shift+O) and at the top choose from the presets Fit to Artwork Bounds.

Adobe Illustrator's fit to artwork bounds option

Then Save As and choose from the save as type: SVG.

Adobe Illustrator's Save As SVG option

You could just export the code straight away from Illustrator and paste in your code editor, but I also suggest to clean up and optimize code.

Adobe Illustrator's SVG Code export

And I’m going to show you next how to do it very easily…

#How to Optimize Your SVGs

There is the great tool for SVG optimizations called SVGOMG from Jake Archibald.

Open your SVG file or paste the code inside SVGOMG.

You’ll see many options for optimization, and I won’t go into each one of them because it depends on your preferences. The default options should work well most of the time, but here are a few to keep in mind:

Clean IDs: If you wrote IDs for elements in illustrator you’d want to turn this off.

Marge paths: It provides significant size savings but may affect your animation, because maybe you want to animate paths separately and now it becomes one path. So use it with caution, and in this case, I toggled it off.

Round/rewrite paths: Same here, you’ll definitely save on file size, but it may affect your animation. For this demo, I toggled it off.

SVGOMG is based on SVG Optimizer so you can find more details about each option in there.

#Start Animating

Okay, when you have your clean SVG code it’s time to start animating.

As I mentioned earlier for DrawSVG to work, you must set stroke-width and stroke for the paths you want to draw. You can do that with CSS or inline SVG.

For my DrawSVG example I set it with CSS:

stroke-width: 1px;
stroke: #ff0054;

Also set fill: none to hide the fill. But since I’m animating the fill I did that later with JavaScript.

Using DrawSVG is super simple:

Create a timeline, select elements and add drawSVG value:

var tl = new TimelineMax();

tl.from('.st0', 1, {drawSVG: '50% 50%'});

To fully understand how various drawSVG values work watch this video from GreenSock:

#Try DrawSVG for Free on Codepen

There’s a special, fully-functional version of the DrawSVGPlugin inside Codepen, so feel free to create your pen, add your own SVGs, and take DrawSVG for a spin.

#Wrapping It Up

There you have it. Now you can start using drawSVG in your projects.

Leave a comment and let me know:

How you’re going to use DrawSVG?

2 thoughts on “DrawSVG Tutorial: How to Make a Reveal Effect With GreenSock

  1. Thanks Jason, this is awesome. I was wondering if it would be easy to apply a cross-browser safe glow effect to a stroke animation like this and if so do you have any advice on this? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *