March 3rd, 2017
The way you draw your SVGs can have a big impact on how easy or hard it is to animate them. This can be especially noticeable when you’re animating SVG strokes. I Tweeted vaguely about this a couple days ago, but I thought a more detailed explanation and some examples would be way more helpful.
Sometimes editing your SVG can get you to the visual results you want faster than writing more code would. And in the case of SVG stroke animations, editing the SVG can make animation changes that your code couldn’t make. I know I’ve learned this the hard way more than once! So, here are three Illustrator ticks that can make your life easier when animating SVG strokes:
1. Changing the start point of the path animation
The point you think should be the first one to draw on, isn’t always the one Illustrator decides to put first in the SVG’s definition.(Silly computers!) When this happens, editing the path in Illustrator can change the starting point of your animation. This is especially handy because the CSS or JS you’re using to animated the stroke probably can’t affect where the stroke begins, that’s all in the SVG path itself.
For example, this heart started in a weird place the first time I animated it. This could work in a pinch, but it would look a lot better if the drawing started form the top center of the heart instead of off to the right:
To change the starting point of the heart’s stroke animation I use the scissors tool (grouped with the eraser tool) in Illustrator to cut the path at the heart’s peak (the point I wanted it to start from), then selected both the points that cut created, and re-joined them (command + R) to re-close the path. That sounds a bit like the vector equivalent of turning it on and off again, but it works.
That changed the heart’s SVG path definition from this:
< path d="M170.5,46.5c0,46.9-85,108.3-85,108.3S.5,93.5.5,46.5s51.8-64.6,85-21C119.3-16.4,170.5-.5,170.5,46.5Z"/ >
< path d="M85.5,25.5c33.8-41.9,85-26,85,21s-85,108.3-85,108.3S.5,93.5.5,46.5,52.3-18.1,85.5,25.5Z" />
SVG path points aren’t the most human readable things, but I can see that first numbers in the path changed and that’s enough to convince me. So even though our heart looks the same visually, the order of the points of the path has changed.
Applying the same animation code to our revised path, give us the starting point for the stroke animation that we wanted. The small change in the path made things look a whole lot better (at least in my opinion) even though the animation code didn’t change. This cut and re-join trick is a helpful one to have up your sleeve.
See the Pen SVG draw-on animation: Change the start point part 2 by Val Head (@valhead) on CodePen.
2. Changing the direction of the stroke animation
So far, our example heart draws on in a clockwise direction. If that wasn’t what I wanted, I could reverse the points in the heart’s path to make the draw on animation happen in an counter-clockwise direction.
To reverse the direction of the points of in a closed shape like this one in Illustrator, right-click on the path and select “make compound path”, then click the “reverse path direction” button in the Attributes panel.
That’s what I did with the heart to make the 3rd variation of the heart animation. Once reversed the heart path looks like this:
< path class="heartpath3" d="M85.5,25.5C52.3-18.1.5-.5.5,46.5s85,108.3,85,108.3,85-61.4,85-108.3S119.3-16.4,85.5,25.5Z”/ >
(Honestly, I’m not well-versed enough at reading SVG paths quickly to know that’s reversed just by the numbers, so I took Illustrator’s word on that one.)
When the same drawSVG animation from before is applied to that version of the heart path, it draws on counter-clockwise:
The heart is a closed shape, but you can also reverse the points of an open path in Illustrator. Clicking on the first point with the pen tool in illustrator will reverse the points of an open path. Or, if the path is something easy to read like a line, you can reverse the points in your SVG code manually by swapping the order of the x and y co-ordinates.
< line x1="5" y1="2.6" x2="5" y2="221.1"/ > and
< line x1="5" y1=“221.1” x2="5" y2=“2.6”/ > will look the same visually, but will draw on in opposite directions. (And hand-editing SVGs makes you feel like you have super powers.)
ETA: Chris Gannon recommended this script for reversing paths in Illustrator on Twitter. It looks pretty darn helpful. (File > Scripts > Other Script + selecting this script will reverse any path you have selected.)
3. More shapes for more flexibility
It might be a bit of stretch to call this one a trick but it’s something I end up doing quite often for SVG animations. SVGs that are drawn efficiently using the fewest shapes or paths possible often don’t leave you with enough to work with when animating. (If you’re used to drawing super efficiently to make icons or similar things, that probably sounds really weird.)
You can always join paths and merge shapes after you know you don’t need them, but if you aren’t sure which shapes you’ll need, erring on the side of having more shapes will leave more options open for animating.
For example, the R on the left below is drawn nice and efficiently with only two paths. The minimum needed to draw that R shape. (I’ve given each path a different stroke colour so you can see them more easily.) But when we apply a drawSVG animation to those paths to draw them on, the resulting animation looks a bit odd.
See the Pen SVG draw-on animation: more paths for a better look by Val Head (@valhead) on CodePen.
Breaking the R up into more individual strokes on the right —in this case three strokes like you might use to draw this R with a pen — results in a more pleasing animation in the end. I find this is most often true with letters and sometimes other shapes as well. The extra pieces give you more to work with and more leeway to get to an animated effect that you wanted.
I might have been able to manipulate the drawSVG animation numbers to start and stop at the right points to get to the same visual results with code in this particular case. But breaking up the R into more strokes was an easier solution than re-working the code itself.
That’s three SVG drawing and editing tricks that have made my life easier in recent projects. Hopefully they might save you some time too! I should note that even though I used GreenSock’s drawSVG plug-in for these examples, I’ve also used these tricks for CSS-based SVG stroke animations too. You don’t have to be using drawSVG for these to be helpful.
For even more helpful SVG preparation and optimization tips, check out Sara Soueidan’s SVG Tips for Designers. She has some super helpful tips in there as always.
This article was written for the super cool subscribers of the UI Animation Newsletter. Subscribe and join the crew for helpful web animation tips and resources straight to your inbox each week.