SVG Line Animation for the Uninitiated
Today, we’re going to be animating an illustration created in Adobe Illustrator, using SVG and CSS. We’ll 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 we’re going to be working with something much simpler.
Preparing Your Vector File
Before we start animating, it’s 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 you’re only interested in how to achieve the drawing effect, you can skip this section.
Name Your Layers
You should always name your layers, and this is especially true when working with SVG’s. If you’re 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 simple — they 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.
Exporting
I tend to export the selected vector by using File > Export Selection…This ensures that the file will crop to the bounds of your artwork and not your artboard. Here are my preferred export settings:
Output
Remember when we named our layers before exporting? This is where that comes in handy.
Notice the ID’s? 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. 😜
Optimization
Typically, it’s good practice to optimize your SVG’s using tools like SVGO, but in a case like this where you’re working directly with the markup, you’ll want to keep your original output in tact. Most optimization tools will minify and strip the file of the id’s, making it difficult to work with.
For more information on how to optimize your SVG’s take a look at Sara Soueidan’s excellent post, SVG Tips for Designers.
Animating the Line
Before we get started, it’s important to understand two properties: stroke-dasharray and stroke-dashoffset.
Stroke Dash Array
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.
Stroke Dash Offset
The stroke-dashoffset property specifies the distance into the path, the pattern will start. Don’t worry too much about the stroke-dasharray settings I’ve applied. All it’s doing is alternating the length of the dashes and the gaps (5px dash, 10px gap, 30px dash, 10px gap). I’ve increased the second dash to 30 pixels to help visualize what is happening.
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 I’ve offset it by 15px, the amount of the first dash and gap combined, starting the stroke on the second 30px dash.
Animating the Offset
Here’s 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 won’t see anything, because the dash and it’s gap are both the same length. Now we’re only seeing the gap. If we animate the offset to the original value of zero, we can create our desired effect.
Sweetening our Popsicle
Now let’s apply what we’ve learned to our popsicle.
You’ll want to figure out the length of each path. It doesn’t 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.
To make this easier to digest, I’ve hidden the path attributes as we’ll 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.
Here’s what we get.
This looks good, but we can do better.
Final Touches
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 you’d like to see the codepen you can find it here.
One final note: This will not work with embedded SVG’s. If you’re planning on using this in a project, you will need to inline your SVG’s, be it manually or with the help of a tool. We’re a fan of react-inlinesvg but if you’re not using react there are plenty of others you can find without too much effort.
Update: 11/19/16
A Note on Browser Compatibility
A few readers pointed out issues with this technique in certain browsers. I’ve added this section for completeness.
Microsoft Edge
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. I’ve updated the pen to include them.
Internet Explorer
Unfortunately, Internet Explorer does not support animating the stroke-dashoffset property using css.
The simplest recommendation would be to disable the animation in IE and prioritize the display of your content. If you’d like to support Internet Explorer, there are a couple javascript solutions at your disposal.
- A StackOverflow user outlines a solution that updates the offset for every frame in the animation.
- Vivus is a popular plugin that comes with a variety of animations and options out of the box.
Huge thanks to CSS Tricks and Vox for their work on the subject. Find out more information about the technique by visiting these links.
