SVG Loader using GreenSock DrawSVG

Today’s tutorial is one that will leave you feeling impressed that you’ve written so little code to achieve such a delightful animation. DrawSVG by the incredibly smart group at GreenSock allows you to progressively reveal (or hide) the stroke of an SVG. Let’s examine how that works by building an animated pre-loader.

tuts plus sample demo

What you’ll be making

What Does DrawSVG Do?

As mentioned, the DrawSVG plugin will grant you the power to reveal (or hide) the stroke of an SVG, but it can also animate outward from the center of a stroke (or any position/segment). This is exactly what we’ll be doing in the coming exercise.

DrawSVG is part of the GreenSock Animation Platform (GSAP) and can be used in any TweenLite, TweenMax, TimelineLite or TimelineMax animation. All the popular features within GSAP (runtime controls, callbacks, eases, overwrite management, nesting) will work with your fancy SVG animations too! *fist bump*

Grab a Copy of DrawSVG

Access to the DrawSVGPlugin plus documentation and support requires a Club GreenSock Membership. At the time of writing plans range from $50 to $150 per year depending on the membership type.

Try DrawSVGPlugin for Free on Codepen!

There’s a special, fully-functional version of the DrawSVGPlugin linked to from within GreenSock’s DrawSVGPlugin Codepens, so feel free to fork any of them, add your own SVG graphics, and take DrawSVGPlugin for a spin.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

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

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2015/01/20