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?

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.

4864

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.

4864

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→

Conclusion

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.