Creating SVG line drawing animations
May 7, 2015
Recently, I came across a very nice page on the Square Space site while surfing the web. The page features some nice animations. which improve the user experience. The animations are implemented with the Scrollr jQuery plugin, an elegant way of performing scroll based page animations. However, what caught my eye was the SVG line animation. Having stayed away from SVG usage, mainly because of inconsistent browser support, I got curios and decided to build a small test case. Here is what I learned along the way:
How to animate a SVG line drawing?
There are several very good sources about SVG line animation on the web already so here is my summaryt of it.
Looking at animated SVG line drawings, it seems that the length of the individual lines is animated from zero to full length. I was surprised to learn that you cannot animate the length of a line, or a path, at all. Turns out that we can create the illusion of animating the line length by using the stroke-dash property of a SVH path. These two blog posts explain this expertly:
- Jake Archibald’s: Animated line drawing in SVG
- Vox Product’s: Polygon feature design: SVG animations for fun and profit
Using requestAnimationFrame instead of using an interval timer
Paul Irish provided an early introduction “requestAnimationFrame for Smart Animating” in 2011. At the time the spec wasn’t finished and browser support was just not there. Today, browser support has much improved , even IE supports it for version 10 and above. For older browsers there are polyfills that emulate requestAnimationFrame functionality with an interval timer. For my test case I used Oleg Slobodskoi’s polyfill AnimationFrame.js.
Knowing the mechanics of animating SVG lines I started out to build my test case. I fired up Adobe Illustrator and created three rectangular shapes and saved them as .svg files.
To get the svg code, click Show SVG Code… in the SVG Options modal window and you’ll see the code in another modal text window.
Note: If you create simple shapes like a rectangle or circle , the svg code will describe them as basic shapes and not as paths and that will not work. So to convert a basic shape into a compound path just select the shape and go to Object > Compound Path > Make or hit Command + 8 (on a Mac).
There is one more thing to do before we are finished. We need to make the svg line drawing responsive. Again, there are plenty of resources on the web about this subject. One that I found helpful can be found here.
Below you can see what this test case looks like