Last month I’ve posted the first part of the SVG mini series, it teaches you how to create a path that is valid for animation. Today I am going to follow up on this post, I will teach you what to do when you want to animate. Last time I showed you what to look out for when creating a path that is capable of animating, if you have missed it you can read it here. But how do we animate a path?
Dashed lines
To animate a path in SVG we need a starting and an ending point. The path out of the box is a line that is as long as our path is. Now the following css rule comes into play
svg{
stroke-dasharray: 20;
}
If you use this code, the line will be broken up in dashes with a width of 20 pixels. You can see how this looks in the demo below, the simple rectangle now has a dashed border.
See the Pen QpRMRa by Skippy (@Skippy) on CodePen.0
Dashes of just 20 pixels wide can be usefull in other animation, but this is not what we need. What if the dashes are longer? Let’s say, as long as the shape is. Now the rectangle’s border is completed again.
See the Pen pemWoZ by Skippy (@Skippy) on CodePen.0
How to calculate the length of the path
This can be tricky, I will probably spend an entire post on this subject someday, as you might have multiple paths in the same SVG object. But for now we assume you have one path, or you don’t care if some of the shorter paths animate quicker than the longer ones.
You can easily calculate the length of a path by selecting it with JavaScript and use the getTotalLenght() function to get the path length in pixels.
var path = document.querySelector('path');
var length = path.getTotalLength();
console.log('L:'+length);
Open up your browser’s console to view the output, or print it somewhere on the page. Use this value in your css to set the stroke-dasharray of your path.
I can hear you think, “This is cool and all, but nothing is happening, and it looks just like a regular rectangle”. And you are right! Let’s animate it!
Animate the stroke dasharray
Using the stroke-dashoffset css rule will move the dashed border around. But without setting the stroke-dasharray you get a bunch of stripes following your shape, this will not give the drawing effect. So first we need to make sure we have hidden the border of the shape. Use the stroke-dashoffset and set the value of it the same as the stroke-dasharray value. The shape will now be invisible.
stroke-dasharray: 1604; stroke-dashoffset: 1604;
This ensures us that the starting position of the animation is hidden. Otherwise we break the illusion of drawing the line on screen. If we were to combine this with a CSS animation where we set the stroke-dashoffset to 0, the line will be drawn until the path has been completed.
svg{
stroke-dasharray: 1604;
stroke-dashoffset: 1604;
animation: dash 2s linear forwards infinite;
}
@keyframes dash {
100%{
stroke-dashoffset: 0;
}
}
In the demo I have set the animation to loop forever, it is up to you how you want to display the animation.
See the Pen pemWwq by Skippy (@Skippy) on CodePen.0
And this is how you animate a path. As you can see there is not much code needed, and the end result can make your design a little bit more intriguing.
But I don’t want a stupid rectangle on my site
I wouldn’t either (This is on my site, so I guess I did wanted it?) but you can use any shape you want. I have made some demo’s over the last couple of days, not my best work. But I got a new program on my tablet and wanted to try it’s SVG capabilities. But they do the trick on conveying the idea.
Skippyweb can’t post about SVG animations and not include a kangaroo
See the Pen rypgmj by Skippy (@Skippy) on CodePen.0
As a gamer and retro game collector I needed the triforce wings in here.
This is also a (not so good) example on how you extend the animation after the line has been drawn.
See the Pen Zelda logo svg animated by Skippy (@Skippy) on CodePen.dark
My favorite console is the SNES, meet the controller
Don’t mention the bogged lines around the A-B-X-Y buttons.
See the Pen Rpgbra by Skippy (@Skippy) on CodePen.0
0 Comments