GreenSock Introduces DrawSVGPlugin

GreenSock Introduces DrawSVGPlugin

Have you ever tried to animate SVGs using GreenSock? The latest addition to the Greensock plugin library makes animating SVGs a breeze.

Why drawing SVG?

GreenSock Introduces DrawSVGPlugin

You’ve seen the emerging trend on the web, where shapes and outlines are being drawn on a page?

This creates an elegant reveal or draw effect and can bring your websites to live.

It can also increase user engagement if it’s combined with creative scrolling animations.

Check out this CodePen demo created by GreenSock guys while testing their new plugin.


How does SVG drawing work?

So how does the line drawing work? Hm, it’s quite simple.

Any shape you can draw in Illustrator or any other vector graphics editor is either:

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

The stroke of these shapes can be animated in or out to create the drawing animation effect.

stroke-dashoffset and stroke-dasharray are the two CSS properties that are controlling the SVG stroke animation.

The new plugin from GreenSock let’s you animate these two properties with ease.

GreenSock DrawSVGPlugin

Let’s have a look at the simple demo and explore the syntax, that’s the best way get familiar with the plugin.


First animation

tl.staggerFromTo(shapes, 1, {drawSVG:"100%"}, {drawSVG:"50% 50%"}, 0.1)

Here we are animating the SVG from fully drawn drawSVG:"100%" into the centre of the stroke drawSVG:"50% 50%".

Second animation

.fromTo(shapes, 0.1, {drawSVG:"0%"}, {drawSVG:"10%", immediateRender:false},"+=0.1")
.staggerTo(shapes, 1, {drawSVG:"90% 100%"}, 0.5)

Here we are firstly animating the first 10% of the SVG stroke, then moving it to the end of the element drawSVG:"90% 100%".

Third animation

.to(shapes, 1, {rotation:360, scale:0.5, drawSVG:"100%", stroke:"white", strokeWidth:6, transformOrigin:"50% 50%"})

Here we are rotating and scaling our elements at the same time as drawing the full stroke to drawSVG:"100%”, changing the stroke color to stroke:"white" and width to strokeWidth:6.

Fourth animation

.staggerTo(shapes, 0.5, {stroke:"red", scale:1.5, opacity:0}, 0.2)

The final part of this animation sequence is animating the stroke to red stroke:"red”, scaling it and fading out by using scale:1.5, opacity:0.

Find out more about DrawSVGPlugin

You can read more about this brand new DrawSVGPlugin and explore a few other CodePen demos in the official GreenSock article.

Read more about DrawSVGPlugin


I’ve recently created a few articles covering SVG animations using GreenSock and ScrollMagic and will be releasing them in the coming weeks.

They will show you how to animate SVG even without the plugin and how to trigger these SVG animations based on the scroll position.

If you are not sure where to start with SVGs, check out my article how I created my first SVG.

And what’s your preferred method for animating SVGs?

Let me know in the comments below.

Download Free Toolkit

All you need to know to get started with GreenSock and ScrollMagic, in one single package. Straight into your inbox.

100% Privacy. Guaranteed! Powered by ConvertKit

One thought on “GreenSock Introduces DrawSVGPlugin

  1. tho

    I was bummed to find out that this plug-in is a benefit of the paid Greensock membership! It’d be nice if that was mentioned in the article somewhere.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.