Animations

Animating vector paths in Framer (Animation Lesson 18)

Joseph

14:36

18K views

Nov 7, 2025

About this lesson

Vector path animations can bring icons, logos, and illustrations to life, revealing each shape with smooth, hand-drawn motion.

And we can pull it of in just a few clicks using the Stroke effect in Framer. In this lesson, we’ll use the Stroke Effect to animate a few icons with engaging motion that feels thoughtful and refined.

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=0s Intro

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=24s Set up

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=131s Animate the signature with Stroke (defaults and preview)

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=246s Reverse the draw using Offset

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=299s Loop modes: repeat, mirror, continuous

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=351s Transition settings

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=377s Fingerprint icon animation

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=489s Lotus icon animation

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=566s Reverse path direction

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=742s Pulse icon animation

https://www.youtube.com/watch?v=MOmvYoUFQWU&t=850s Wrap up

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Vector path animations can bring icons,0:03logos [music]0:03and illustrations to life, revealing 0:06each shape with a smooth hand-drawn 0:08motion. And we can pull it off in just a 0:10few clicks with the stroke effect in 0:13[music] Framer. In this lesson, we'll 0:15use the stroke effect to animate a few 0:16icons with engaging motion that feels 0:19thoughtful and refined.0:22>> [music]0:24>> The stroke effect is something special 0:26and it'll only show up if we're editing 0:28layers within a vector set. So, we've 0:31got to start by creating a vector set.0:34And on the second page of our project 0:36file here, we have this stroke effect 0:38page with a few example icons that I've 0:40prepared ahead of time. And each one of 0:42these is just a group that has a bunch 0:45of vector layers in it. So, these are 0:48essentially just icons drawn directly on 0:50the canvas, but we need to turn them 0:52into a vector set. And really, they all 0:54belong in the same vector set. So, I'm 0:57going to hold the shift key and select 0:59each and every one of these icons cuz 1:01they're all kind of part of a family.1:03And for good measure, I'm also going to 1:05throw in this little icon here cuz we're 1:07going to play with animating that even 1:09though it's a different size. I'm going 1:10to hold shift, click it, and add it to 1:12the same vector set. So now to create a 1:14vector set from all these, I'm going to 1:16rightclick on any one of these selected 1:18groups. And I'm going to choose create 1:20vector set. And instantly we're brought 1:22into a dedicated canvas view where we 1:24can edit this vector set, which is what 1:26we want to do. But first, I'm going to 1:28get rid of the fill here, which would be 1:30helpful if we were editing dark gray 1:32icons and we didn't want to edit them on 1:33a dark gray background. But these have 1:35sufficient contrast on a dark 1:37background, even without a fill. Now, if 1:39you're not familiar with vector sets in 1:41the first place, much like a component,1:42they are an asset that's found on the 1:44assets panel, and they can be dragged 1:46directly onto the canvas. And if we go 1:48back to our main page here, where we 1:51created the vector set from, each and 1:53every one of those icons, which was 1:55previously just a group, has been 1:57replaced with an instance of that vector 1:59set. And if we look over here on the 2:01properties panel, we can see that we 2:03have access to all of the icons within 2:05that set. And we can click to swap them 2:08out. But let's head back into the vector 2:10set and do some editing. I'm just going 2:11to double click on any one of these 2:13icons to get back into that canvas view 2:16for the vector set. And now that we're 2:17editing the contents of a vector set,2:19we've just unlocked a whole new effect 2:22which we can apply if we select any one 2:24of these vector layers. So, let's get in 2:26here and animate this signature icon as 2:29our first example. Within this group, I 2:31have a signature vector layer, and 2:33that's what I want to have selected here 2:35because that's the path that I want to 2:36animate first. And then we'll just head 2:38over to effects on the properties panel.2:40And there's our new effect that only 2:42appears because we're here within a 2:43vector set editing a vector layer. I'm 2:46going to click to add the stroke effect.2:48And here we get a popover with a few 2:50properties to play with. But before I 2:52even mess with anything, I'm going to 2:53press command P on my Mac to go into 2:55preview mode. And you can see that even 2:57just with the defaults, we get that 2:59stroke effect where the path appears to 3:01be drawn onto the screen from beginning 3:03to end. With our current settings, it 3:05only plays once, but I'm clicking the 3:07reload button in the top left corner to 3:09make it play over and over again just so 3:10you can get a good look at it before we 3:12move forward. But if we go back to the 3:14design canvas and I open the effect 3:16popover again, these first two 3:18properties, length and gap, give us a 3:20little hint about what's going on behind 3:22the scenes. This is really just a dashed 3:25line where we have a gap and a dash and 3:28a gap and a dash. The gap is currently 3:30the whole length of the path and gets 3:33pushed over to reveal the dash that's 3:36right behind it. So, let's take a look 3:38at what this looks like if I reduce the 3:40length and the gap all the way down to 3:4210% of the length of the path that we're 3:45animating. I'm going to press command P 3:46again to go into preview mode. And now 3:48you can see it is a dashed line. And 3:50when we shorten those dashes, it becomes 3:52really obvious that it's been a dashed 3:54line all along. So, I'm going to go back 3:57and I'm going to set this to the 3:59original 100% and 100%. And then down 4:03below we have one more property here 4:05called offset that really comes in handy 4:08if you shorten the length but also comes 4:10in handy if you want to kind of reverse 4:12this whole animation. So if I set this 4:14offset to 100%. I'm saying move the 4:17whole animation down by 100% of the 4:20length of this path. So before where we 4:22had the gap and then the path and then 4:24the gap. If we move that whole thing 4:26down, we have the path and then the gap 4:28and then the path and then the gap. So 4:30rather than starting with the gap and 4:32then revealing the path, we're going to 4:33start with the path and then reveal the 4:35gap. So I'll press command P again. And 4:37there we go. Starts with the path and 4:39then it appears to get drawn away by 4:41going from the path to the gap. If the 4:44whole dashed line thing seems a little 4:46confusing, it's okay. You don't really 4:48have to understand it. You can just 4:50fiddle with the settings until you get 4:51the result you're looking for visually.4:53But when you understand how it works, it 4:54becomes a little bit more predictable.4:56So, back to the canvas and back to the 4:58properties one more time. We also have 5:00the option of looping this animation.5:02And right now, it's just playing once 5:04because loop is set to no. But if we 5:06switch this to yes, we actually get 5:08three different loop modes. We get 5:10repeat, which plays the animation, then 5:12abruptly returns to the beginning and 5:13plays it again and repeats and repeats 5:15and repeats over and over again. Then we 5:18have mirror, which is kind of like a 5:19pingpong effect where it'll play 5:21forward, then play backward, then play 5:23forward, then play backward. And then we 5:25have continuous, which will play forward 5:28and then play forward again from where 5:30it left off. So, it's just going to push 5:32forward and forward and forward. So,5:34there's not going to be a hard reset to 5:35the beginning like there is with repeat.5:38But for this particular animation, I 5:40don't want it to loop. I'm going to set 5:41this to no. And we'll actually use the 5:42loop property for a different example.5:45But for this one, I'm going to set the 5:46offset back to zero. Just go with those 5:48defaults. And then here under 5:50transition, we get the usual animation 5:52settings where we can decide if we want 5:54this to ease in or ease in and out or be 5:57linear, which is really practical if 5:59you've got a continuous animation.6:01Continuous with no easing just seems to 6:04go on at a steady pace forever. But for 6:06this one, I'm cool with ease in and out.6:08I'm cool with the default time of 2 6:10seconds, and everything's looking good 6:11to me. But now, let's get a little more 6:13fancy with it. Let's do an example where 6:15we layer some things up on top of one 6:17another. So again, I'll go back to the 6:18canvas and let's head over to this 6:21fingerprint icon, which is an 6:22opportunity for a kind of Touch ID style 6:24animation. I don't really need this 6:26bounds layer, which was propping up the 6:28size of this when it was just a group on 6:30the canvas. Now that it's in a vector 6:32set, it's in a frame that has a fixed 6:34size. So I don't really need that bounds 6:35layer anymore. But I do want to 6:37duplicate the whole fingerprint cuz what 6:39I'm going for here is sort of a faded 6:41out fingerprint that gets filled in over 6:43time. So, I'm going to duplicate this 6:46fingerprint group. And now we've got one 6:48on top, one on the bottom. And the one 6:50on the top, I'm actually going to rename 6:51fingerprint animated. And then the one 6:54on the bottom, I'm going to reduce the 6:56opacity down to, let's say, 20%. I'll 6:59press the number two on the keyboard.7:01You can't see it because the fingerprint 7:03that's at 100% opacity is on top of it.7:06But if I press command semicolon on my 7:08Mac, that's one of my favorite 7:09shortcuts, I can toggle the visibility 7:11of the group that's on top. So you can 7:12see I've got a faded one underneath and 7:14then I've got the full opacity on top.7:16And it's the full opacity one that I 7:18want to animate all these paths. So with 7:21the group selected, I can just press the 7:22return key on the keyboard and it will 7:24select all the child layers. And I can 7:26come over here, add the effect, choose 7:29the stroke effect, and I think even with 7:31these defaults, we're going to be pretty 7:33close to being good to go. Instead of 7:35easing in and out, I think I'm just 7:37going to have it ease out instead. So 7:39that way these lines start to draw in at 7:42full speed and then slow down and come 7:44to rest gradually at the end. So I think 7:46we're good. Let's preview it. I'm going 7:47to press command P again to go into 7:49preview mode. And there we go. We've got 7:51that very, very faint instance of the 7:53icon. And then we've got the full 7:55opacity icon being drawn in for that 7:58Touch ID effect. So you can see how even 8:00stacking an animation on top of a static 8:02layer can make things a bit more 8:04interesting. But now, let's stack up 8:06several animations and see what we can 8:08do with that. For this next one, we're 8:10going to come over here to that lotus 8:12flower icon. But it is going to be kind 8:15of small when I go to preview it. So,8:17I'm going to increase the size of this.8:19I'm going to press K to bring up the 8:20scale tool. And I'm going to scale this 8:22by a factor of two. I want to double the 8:24height and width of this to make it nice 8:26and easy to see when we preview it. So,8:28now the idea for this icon is I do want 8:31this white path to animate in. But as it 8:33animates in, I want some colors to be 8:36animated ahead of the white. I want teal 8:39and green and then the white to finish 8:42it off. So, what we're going to do is 8:44duplicate this. But first, I'm going to 8:46establish our base animation on all of 8:49these paths. So, again, I'm hitting 8:50return to select all these paths. I'm 8:52going to add the effect. Click stroke.8:55And similar to the previous example, I'm 8:57going to switch from ease in and out to 8:59just ease out. And I'm also going to 9:02have this go a little bit faster. I'm 9:03going to go down to, let's say, 1.2 9:05seconds instead of two seconds. But 9:08otherwise, I'm going with the defaults.9:09I'm animating 100% of the length, and 9:11I'm keeping the gap at 100. So, we don't 9:13see anything until the path starts to 9:15come in. Cool. So, I'm going to preview 9:17this. And there we go. We've got our 9:19slick little animation where the lotus 9:21flower is being drawn. But all of these 9:23paths are emanating from the bottom 9:25except for one. You'll notice this one's 9:27actually going backward. I'll play it 9:29again a few times and you can see it's 9:30kind of starting at the top and drawing 9:32its way down where the others are 9:34starting at the bottom and drawing their 9:36way up. So, I do want to show you how to 9:38fix that. Very, very easy fix. We'll go 9:40back to the canvas. We'll select the 9:42offending path by itself, which is this 9:44one right here. And I'm just going to 9:46rightclick and I'm going to choose 9:48reverse path direction, which visually 9:51didn't change anything. But if we go and 9:53preview this again, there we go. Now all 9:56the paths are being drawn from the 9:58bottom up to the top. That looks much 10:00better. So now let's layer up those 10:02colors I was talking about. We'll go 10:03back and I'm going to duplicate the 10:05lotus flower group by pressing command D 10:08a couple of times. And I'll collapse 10:10these so we can see that I've got two 10:12duplicates. I've got the bottom, the 10:14middle, and the top. The top's going to 10:16be the white one. That's going to be the 10:18last thing to animate in. But the one 10:20below it, I'm actually going to rename 10:22this color two so I don't get confused.10:25And then the bottom one I'm going to 10:27rename color one. And with the group 10:29selected, I can actually come over here 10:31and edit the color of all of the strokes 10:34within it. But you'll notice this says 10:35mixed. And the reason for that is 10:37because if I expand all these, I didn't 10:39delete those bounds rectangles, which 10:42again we don't need anymore. So, with 10:44those gone, now if I select this group,10:46you'll see these all have that white 10:48stroke in common. So, again, I said I 10:51wanted to set this one to kind of a teal 10:53color. So, I'll go and choose that. And 10:56since we've got things stacked on top,10:57we can't see it. So, again, I'll use 10:59that shortcut command and semicolon to 11:02hide these so we can see the teal one 11:04that I'm working on down below here. And 11:07that color seems fine to me. So, I'll go 11:09to the second color. I will unhide that 11:12with command semicolon. And this one I 11:15want to make green. So I'm going to set 11:17this to a semi vibrant green. Something 11:20that kind of harmonizes with that teal.11:22And then last, we've got our white layer 11:24that's on top. And that one's already 11:26white. That one's fine. But now, if we 11:28were to play this back, we've got the 11:29same animation stacked up three times.11:32So you're only going to see the one 11:33that's on top. So this is where a little 11:35bit of delay is going to solve 11:36everything. So I'll select the second 11:38group. And we can't edit the effect with 11:40the group selected. So, I'll press 11:42return to select all the paths within 11:44it. And then we'll come over here. We'll 11:46come to transition because this is where 11:48we get to add the delay. And I'm just 11:50going to add a delay of 2 seconds. Just 11:52a nice small delay just to give the 11:55layers below it a little bit of a head 11:57start. And then I'm going to do kind of 11:59the same thing here. I'll select the 12:01white layers and I'll give them an even 12:03more significant delay. Go back into the 12:05transition settings. And for these I'll 12:07do a delay of 4 seconds. Right. So,12:10we've got the teal layers that are going 12:12to come in with no delay. Then, we've 12:14got the green layers that are going to 12:15come in a little bit later. And then 12:17we've got the white layers that are 12:18going to come in even a little bit later 12:20still. So, now I think we're ready to 12:22preview it. I'll press command P. And 12:24there we go. We've got the teal leading 12:26the way. We've got the green right 12:28behind it. And we've got the white to 12:30finish it off. That one's my favorite.12:32But we'll do one last example. I'm going 12:34to go back to the canvas and let's do 12:36this little pulsa icon. So that way we 12:38can play with a continuous looping 12:40effect. Similar to the Touch ID icon,12:42I'm going to duplicate this. And again,12:44we don't need these bounds layers. I 12:46want a static version of this icon 12:48faintly in the background. And then I 12:49want the bright green to be animated on 12:52top of that. So again, very similar to 12:53the Touch ID. So with this group 12:56selected, I'll press the number two on 12:57the keyboard to quickly set it to 20%12:59opacity. And let's hide the one on top 13:02so we can see what that looks like. Nice 13:04and dark. And I'll make this visible 13:06again. Select the path and let's add the 13:08effect. We'll choose stroke. And this 13:11time I want the length of the path to be 13:12a bit shorter. So I'm going to go down 13:14to 25%. And then I'll press command P to 13:17see what that looks like. Okay, I'm 13:19happy with the length. And you'll notice 13:21I have to click reload in order to get 13:23this to play again. So it's not looping 13:25just yet. Let's do that next. Head back 13:27to the popover. I'm going to set loop to 13:30yes. And I'm going to set this to 13:32continuous. So that way it keeps moving 13:34forward infinitely. But if we preview 13:37this again, it kind of speeds up and 13:39then slows down and then speeds up and 13:41then slows down. We don't want that. We 13:43want this to be truly continuous. So we 13:46don't want the easing to be ramping the 13:48speed up and then back down. So instead 13:50of easing in and out, we're going to 13:52switch this to linear so that the speed 13:54is completely constant all the time. And 13:56I'll preview this one last time. And 13:59there we go. We've got our little dash,14:01which is 25% the length of the total 14:03path. And that's moving along 14:04continuously with no easing so that the 14:07speed stays completely constant. And 14:09there you have it. Animating vector 14:11paths with stroke effects can add a ton 14:14of polish in unexpected places with just 14:17a few clicks. Go subtle with it. Be 14:20flashy with it. You do you. That's it 14:22for this one. I'll see you in the next 14:24one.

TeachesAnimating Vectors Vector Sets

Also coversComponents Drawing Vectors Frames Keyboard Shortcuts Sizing Stacks Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: Auto Rename

Framer Update: Custom Fonts 2.0 ›