Today, were going to be animating an illustration created in Adobe Illustrator, using SVG and CSS. Well use a technique popularized by Polygon in their reviews of the Playstation 4 and Xbox One. These are great examples of what is possible but were going to be working with something much simpler. A popsicle.
Before we start animating, its important to take the time to properly prepare your file. This initial step requires some knowledge of illustrator. In order to achieve the drawing effect, first and foremost, your illustration will need to use strokes. If youre only interested in how to achieve the drawing effect, you can skip this section.
You should always name your layers, and this is especially true when working with SVGs. If youre not used to them, SVG output can look rather complicated. Be nice to your future selves, or colleagues and take a moment to name your layers. Keep it simplethey just need to be descriptive enough to identify the path. Name the sub layers which are nested under the parent layer. You can view sub layers by clicking the dropdown of the parent layer.
Naming your (sub)layers before export will save you a huge headache.
I tend to export the selected vector by using File > Export SelectionThis ensures that the file will crop to the bounds of your artwork and not your artboard. Here are my preferred export settings:
Remember when we named our layers before exporting? This is where that comes in handy.
Notice the IDs? Imagine trying to figure out which path is which by reading the path description (d=M4808.8.395). Technically, you could if you were a masochist with a deep understanding of the path syntax.
Typically, its good practice to optimize your SVGs using tools like SVGO, but in a case like this where youre working directly with the markup, youll want to keep your original output in tact. Most optimization tools will minify and strip the file of the ids, making it difficult to work with. For more information on how to optimize your SVGs take a look at Sara Soueidans excellent post, SVG Tips for Designers.
Before we get started, its important to understand two properties: stroke-dasharray and stroke-dashoffset.
The stroke-dasharray property creates dashes in your stroke. In the example below I have a 200px line. As you can see, adjusting the value creates evenly spaced dashes and gaps.
The stroke-dashoffset property specifies the distance into the path, the pattern will start. Dont worry too much about the stroke-dasharray settings Ive applied. All its doing is alternating the length of the dashes and the gaps (5px dash, 10px gap, 30px dash, 10px gap). Ive increased the second dash to 30 pixels to help visualize what is happening.
The stroke-dashoffset property specifies the distance into the path, the pattern will start.
As you can see, adjusting the stroke-dashoffset, repositions or offsets the start position (by moving it backwards) of the dash sequence. In the example Ive offset it by 15px, the amount of the first dash and gap combined, starting the stroke on the second 30px dash.
Heres where things get fun.
If we set the dash length to the same length of the line, and offset the start position the same length (remember it moves the start position to the left) we wont see anything, because the dash and its gap are both the same length. Now were only seeing the gap. If we animate the offset to the original value of zero, we can create our desired effect.
Now lets apply what weve learned to our popsicle. Youll want to figure out the length of each path. It doesnt need to be exact. You can do this by guessing (I usually just increment by 100 until the path is completed) but if you want a more exact number you can navigate to the Document Info panel in Illustrator and select a path, it will display its length.
Window > Document Info > Objects > Paths
To make this easier to digest, Ive hidden the path attributes as well be primarily focusing on the CSS in this example. I give each of our paths a class and applied the offset animation to them. Next, by using the technique I described previously, I gave each path a dash array and dash offset value.
Heres what we get.
This looks good, but we can do better.
By increasing our dash values, we can speed up the animation of certain strokes. This is because it has a further distance to travel but still only 2s to complete it, which we defined in our offset animation. We can also delay when certain strokes start animating, using animation-delay. Varying the speeds and setting delays on different strokes will create a more interesting outcome.
And there we have it. If youd like to see the codepen you can find it here.
A caveat: This will not work with embedded SVGs. If youre planning on using this in a project, you will need to inline your SVGs, be it manually or with the help of a tool. Were a fan of react-inlinesvg but if youre not using react there are plenty of others you can find without too much effort.
This technique is supported. Edge requires you to use an explicit unit for your property values. So, in our case we simply need to adjust all of our stroke properties to use px as its unit. Ive updated the pen to include them.
Unfortunately, Internet Explorer does not support animating the stroke-dashoffset property using css.
Huge thanks to CSS Tricks and Vox for their work on the subject.