Simple SVG animation with Greensock DrawSVG-Plugin

I had some free time and thought to experiment a bit with the new DrawSVG plugin from Greensock, it is a plugin that animates the border of an SVG, other parts of the SVG like fill or opacity could already be tweened via TweenMax/Lite.

Here’s a quick tutorial to get you started and I hope you’ll forgive my lousy Illustrator skills…

See the Pen OPNOgM by Michael Dobekidis (@netgfx) on CodePen.

Learn more about the SVG Plugin here: Greensock DrawSVG-Plugin

So let’s get started, first we produce some artwork in illustrator or illustrator like program, the svg that will be exported would be best if it contained a path or polygon. In my example the svg looks like this:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="-100px" y="-200px"
     width="100%" height="1102px">
<polyline fill="none" id="line1" stroke="#1E1E1E" stroke-width="3" stroke-miterlimit="10" points="431.765,160.979 431.765,160.979
    431.765,158.765 431.765,156.182 391.43,155.445 235.403,155.63 235.403,188.443 235.403,255.43 235.403,376.445 433.705,376.445
    431.765,160.979 "/>
<polyline fill="none" id="line2" stroke="#1E1E1E" stroke-width="3" stroke-miterlimit="10" points="432.602,253.965 606.054,255.43
    621.054,255.43 654.054,255.485 687.054,256.485 788.054,255.485 859.054,253.965 859.054,253.965 884.054,253.965 926.054,253.965
    951.054,253.965 "/>
<polyline fill="none" id="line3" stroke="#1E1E1E" stroke-width="3" stroke-miterlimit="10" points="951.167,255.916 954.526,366.385
    959.55,367.226 959.55,367.226 993.396,366.3 1149.417,364.778 1149.135,331.967 1148.56,264.981 1147.523,143.971 949.229,145.671
    951.167,255.916 "/>
</svg>

As you see the svg polygons have no fill, a stroke color, a stroke-width, and the points are constructed of a single stroke border and drawn in the direction that we wish to animate them (if we go 0 – 100%, we could always do the reverse though, the plugin allows us that and much more options)

As fast as styling go we just make the svg elements invisible to begin with so that we can animated them into view.

#Layer_1 polyline {
  visibility: hidden;
}

Now the interesting part of javascript and the animation procedure

$(document).ready(function(){
  TweenLite.set("svg>polyline", {visibility:"visible"});
  TweenLite.set("svg",{scale:0.8});
  var tm = new TimelineMax({});
 
  tm.add(TweenLite.fromTo("#line1",2, {drawSVG:"0%"}, {drawSVG:"100%", onComplete:function(){
    TweenLite.to("#line1", 0.5,{fill:"#fec72c"});
  }}));
  tm.add(TweenLite.fromTo("#line2",2, {drawSVG:"0%"}, {drawSVG:"100%"}));
  tm.add(TweenLite.fromTo("#line3",2, {drawSVG:"0%"}, {drawSVG:"100%", onComplete: function(){
    TweenLite.to("#line3", 0.5,{fill:"#ff3333"});
  }}));
 
  tm.play();

});

So let us see what is going on here.
First we set the visibility of the items into visible then we apply some scaling for better viewing (as the actual assets ended up bigger than intended).
Then initialize a default TimelineMax object and start adding tweens.
The drawSVG attribute allows us to declare options for the DrawSVG plugin and we simply pass the option that we wish to animate from or to, in our case we want the border to animate from 0% to 100% (start to finish).
And when that action ends we want the polygon to fill with color, hence the TweenLite.to(“#line1″, 0.5,{fill:”#fec72c”});

So there you have it, a simple tutorial to showcase one portion of the new greensock DrawSVG plugin.

Drop me a line if you want to see more DrawSVG tutorials and examples.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Leave a Reply

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