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.
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
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.
Read the full article on Tuts+