Line Drawing Animation with an SVG in Ionic

Transcript

In this video, we’re going to take a look at a little SVG animation trick in Ionic. It doesn’t really matter if it’s in an Ionic application, you can just do this with SVG’s generally.

0:12 What we’re going to create is just this little animation with this tick here. What is going to happen is that when I refresh the application eventually, or we can just replay the animation from down here (in the Animations tab), we’re going to have this tick animate in. It’s going to animate in with a sort of line-drawing effect. So, rather than with a typical animation, we’d have a fade in or pop in or slide in on-screen we’re actually going to have it draw itself.

0:47 What it will do is basically start blank and just animate down and then up in a sort of tick motion. I call this an animation trick because the way in which we do it isn’t the way you might imagine doing it. It is somewhat of a trick - the effect that we’re going to create. Basically, it makes the process of animating any sort of SVG line whether that’s like a circle path or just a general polyline like this one is. We could have this in different sorts of shapes. This one is a tick but we could have squares, circles, an outline of something, it doesn’t really matter.

1:30 The concept for this effect I discovered in a CSS tricks article. This one is by Chis Coyler who I believe is the founder of CSS tricks in general. I’d recommend reading this article, it goes into a lot of depth about how it works. We’re just going to do a pretty quick example on-screen of implementing this to create this tick animation. Although we won’t really be doing much else with it in this video, you could probably imagine some ways you could use this same effect for form submissions or button animations and things like that to indicate that something is complete or finished or whatever.

2:10 Before we do the animation, I just want to cover the concept in general. I’m working with an Ionic/Stencil application here as I do with most of the things I do in regards to animations. It doesn’t really matter whether you’re using Angular, React, Stencil, or whatever, all the concepts are going to be basically the same it might just look a little bit different for you.

2:33 Basically, we have this SVG here and I’ll show you in the app this is just basically rendered directly onto the home page. I’ve set up a template here that renders out an inline SVG. I just got this from Ionicons. This is just the tick or checkmark from Ionicons. Rather than using it as an <ion-icon>, typically, you might, for example, say <ion-icon> and then you give the name of the icon you want to use. I actually have downloaded this directly from the Ionicons website which you can find at ionicons.com. Basically, you just download the source SVG for any of these icons if you want to use them. I’ve put that inline here so that we can animate it.

3:24 If we look at this SVG, we can see it’s basically just a single polyline and the points are being drawn on that polyline to create this tick. I’m not going to go into the specifics of how SVG works here and the different methods that are a much broader topic that I couldn’t cover in this video. The basic idea with the polyline is we provide these points and it’s going to draw a line between those points. Since an SVG has a DOM structure like you can see on-screen here it means we can animate it as we usually would with CSS or JavaScript.

3:58 Let’s look at this polyline here and I’ll show you the basic idea of the trick that is covered in this article. Basically, I have the line as it is now and we have stroke widths of 32 to make it a bolder line. We have some other styling here but the important bits that we need to do for this animation effect is use stroke-dasharray. What this is going to do is essentially, like with a border, if you were to give a border to an element on your page you can give it a dashed border and that’s just going to go around that element with dashes instead of a solid line. It’s the same sort of concept here. It’s going to break up our solid line into an array of dashes. If I say stroke-dasharray: 10;, for example, you can’t really see it that well but you can see there are these funny little bumps to the line. If I increase that to say 50 - now you can see that dash effect taking place. Our solid line is now a series of dashes.

5:04 Another important part of this effect is another CSS property called stroke-dashoffset. I just set it to 10 and you might have seen that move a little bit there. This is just going to offset where those dashes are. If I scroll up and down now it’s going to change this offset value. You can see as I scroll down the dashes are basically getting offset more and more but it kind of creates this illusion that the dash is moving along a line as if it’s animating. That’s the basic concept that we’re going to use to achieve our effect. I can do the same in reverse as well.

5:56 What we want to do is we want to create a stroke-dasharray that is big enough so that we only have a single dash on the screen. For example, if I increase this to 100 you can see now we have three dashes, they’re a bit further apart, change that to 200 and we’re down to two dashes, and then to 300 and we have the one dash but we still need to fill out the entire tick otherwise it’s not going to look right. For this instance, a stroke-dasharray of around 500 is going to fill out this whole tick line with just the one dash. This is going to change depending on what sort of SVG you’re using. It’s not the most precise method in the world but it does create a pretty easy way to achieve the line animation.

6:47 Another thing we are going to do is add a stroke-dashoffset. We’re going to use that to make it so that initially we can’t see this dash. Again, if I say stroke-dashoffset: 100;. You can see that we’ve lost a bit of our dash and that’s because part of it has moved off-screen now or out of the visible area of the tick. We can keep increasing that and then we’ll find that around 500 is where we can no longer see the tick. That is where we want to start because we want it to be off-screen initially and then we want to animate it on. If I decrease this value, you can see that it starts to draw itself on the screen. In this case, it’s starting from the top down. I don’t know if this is just me personally but I always draw ticks starting from here and I tick up. I don’t know if that’s a me thing or an everyone thing but it feels weird to me having the tick go in that way. If we actually set stroke-dashoffset to -500: (stroke-dashoffset: -500;) it’s going to animate in from the other direction.

7:54 That’s the basic concept, we just need to use these properties and we’re going to animate that with CSS. All we need to do is just animate this dashoffset and it will draw it for us. Let’s actually add that to our application, to the SVG, and see what that looks like. What we’re going to do is just add this directly to the CSS for the SVG here. We’re going to say:

polyline { 
	stroke-dasharray: 500;
	stroke-dashoffset: -500;
}

8:26 Now we need to create an animation to animate that from -500 to 0. What we’re going to do is create a keyframe. What we’ll do is say keyframes and we’ll give this a name. We’ll just call this draw. You could call it whatever you like and we want to make this keyframes animation anime to stroke-dashoffset: 0;. When this animation is applied it’s going to change this value to zero.

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

8:58 Now we want to apply this keyframe animation to the polyline element in our SVG. So, we say animation: draw. We’ll animate that over say 0.5 of a second - you can make this whatever you like. I’ll give them an ease-in easing so it starts lower and then speeds up towards the end of the animation. Another important property is the fill mode. We want this to be forwards and, so, basically, what we want is for the element to retain the properties of the animation so when this animation finishes we want it to keep a stroke-dashoffset of 0.

polyline { 
	stroke-dasharray:500;
	stroke-dashoffset:-500;
	amimation: draw .5s ease-in forwards
}

9:42 We’ll save that, go back into the browser and we’ll refresh that. You can see we have the tick animating on-screen there. I’ve just got the animations debugging console up here so if you just click on the animation that was captured in there we can repeat that animation. We can even sort of drag along the animation to inspect what it looks like as its executing more slowly if we like. That is the basic idea. We can play around with the easings or the timing of that if we wanted. Maybe you want a bit of a quicker tick, maybe you want an ease-in-out easing to change animation a bit and you can see now it’s a much faster tick. You can play around with this but the general concept is pretty simple to implement, I think. I just have that - array to create a dashed SVG line. You could also do it to other SVG methods as well. It doesn’t have to be a polyline it could be anything that supports creating a stroke-dasharray and dashoffset. We created that dasharray, get the dashed line and increase the offset enough to where we can only see the one dash and it’s off out of the visible area. Then we just animate it back on by reducing the dashoffset.

11:12 So, that was a pretty wordy explanation. I think the concept, in general, can be a bit hard to come to terms with initially but once you’ve got it I think it is a pretty simple method and really sort of cheap and easy way to get a cool line animation that looks like an element is being drawn in. Okay, I hope you like this video. If you did do feel free to leave a like and subscribe and I will see you in the next video.

Advanced Animations & Interactions with Ionic

NEW Create next level Ionic applications by harnessing the power of the Ionic Animations API and Gestures.

Utilise these powerful APIs to design and build your own custom animations and interactions. No external libraries required, everything is built with just Ionic. Learn more.

Follow me on Twitter or subscribe to me on YouTube for more web development content.

Check out my latest videos: