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 preloader.
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.
Note: the special version of the plugin will only work on the CodePen domain.
Building Our Loader
The code that follows represents everything we need to make this SVG loader work!
You’ll find the demo renders in any browser that supports SVG (pretty solid support if you ignore IE8 and earlier). You can also view the full Filler Loader demo on CodePen.
Within our index.html lives a single <svg> tag which contains a <circle> tag. Attached to<circle> are two attributes that help positioning within the bounding box (the black square). These two attributes are cx and cy and position the circle within the viewBox of the <svg> element.
You can see how this system works in the image that follows. The first frame of the series represents our <circle> without any attributes, the second frame adds cx="50" and finally the last frame adds cy="50" . The x and y of these attributes refer to the cartesian coordinate system positioning our shape on its corresponding horizontal and vertical plane.
The last attribute (r) of circle sets the radius of our circle or, in other words, the length from the center of the circle to the edge of its box. Feel free to adjust that value in my CodePen demo to see the results as the value is altered.
This particular example has very minimal styling. We define some constraints like width and height (32 x 32), then the .fill-path class is what gives our path its appearance by setting a few SVG properties available to us in CSS land. We give the path a width, a color, and stroke end type. The end type for this demo is set to butt and completely squares the end points of the path.
Now we can rotate the circle -90deg (counter-clockwise). You can see why based on the following screen captures below. The left image depicts the circle before our rotation and the second image depicts the circle after our rotation.
The JavaScript
Now to make things work.
var loader = new TimelineMax({ repeat: -1 }),
fill_path = $('.fill-path'),
fill_duration = 1.2,
fill_position = '+=.25'; // place tween .25secs after end of init tween
loader.fromTo( fill_path, fill_duration, { drawSVG: '0' }, { drawSVG: '100%' }, fill_position )
.to( fill_path, fill_duration, { drawSVG: '100% 100%' }, fill_position );
If you’ve never seen the TimelineMax call don’t fear. You can read more about that here before going any further.
Think of TimelineMax as a timeline that we’ll be adding our frames to. In our case we have one single timeline which contains an object with a key:value paring to control the playback of the animation. The playback is set to repeat, represented by the value -1 assigned to the repeat key of our TimelineMax options object. Since we’re using jQuery for DOM retrieval we’re capturing the path by using the .fill-path class as our hook. This is the reference we’ll use for the path as we begin to animate it.
The last remaining lines of our JavaScript is where the magic really happens. The object that contains drawSVG begins by starting our path animation clockwise from empty (drawSVG: '0') to filled (drawSVG: '100%'). Now that we’ve filled the path in one direction we need to reverse the fill (counter-clockwise). This is where our to() method comes in and where we’ve set drawSVG to '100% 100%'. Since we ended our fill animation at 100% we need to reverse the fill another 100%. This animates the fill from wherever the stroke is currently to a state where the stroke exists along the path. Viola!
Conclusion
As we’ve seen DrawSVG is extremely lightweight and quick to setup making path animations for SVG great fun to create even for the beginning developer. With very little config we can bring another arsenal to our next project making interactions and experience delightful.
If you have any questions feel free to ask in the comments below. Happy animating!
