Layout & Design

Animating Vectors in Framer (Vectors Lesson 5)

Animating Vectors in Framer (Vectors Lesson 5)

Animating Vectors in Framer (Vectors Lesson 5)

Justin

·

4:25

·

4.1K views

·

About this lesson

So far, we’ve learned how to create paths, shapes, and Vector Sets in Framer—but if you want your designs to feel more polished, a little motion goes a long way. In this lesson, you’ll learn how to use Framer’s Stroke effect, a vector-specific animation tool that helps you draw attention, add clarity, and bring your vector work to life.

00:00 Introduction

00:30 Framer Animation Course

00:55 What the Stroke Effect does

01:10 Applying the Stroke Effect

01:45 Stroke Effect Settings

02:55 Animating Multiple Paths

03:19 Quick Tips

03:58 Wrap Up

Check out the full course here: https://www.framer.com/academy/courses/mastering-vectors-in-framer

Sign up: https://framer.link/yt

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

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

0:00So far, we've learned how to create0:02paths, shapes, [music] and vector sets.0:04And while static vectors are totally0:07fine, adding some motion can help draw0:09focus [music] and add polish to our0:11overall design. That's why in this0:13lesson, we're going to focus on an0:15effect designed [music] specifically for0:17vectors in Framer, the stroke effect.0:20We'll break down what it does, where to0:22find it, and [music] how to use it to0:23create clean, controlled path0:26animations.0:30Framer gives us a lot of different ways0:32to animate elements from transitions to0:35interactions, but for this one, we're0:38going to stay focused on the stroke0:39effect itself and how it works0:41specifically for vectors. If you're0:44looking to go deeper into animation,0:47timing, and interactions in Framer, make0:49sure to check out our full animations0:51course over at framer.com/academy.0:55Okay. So, what does the stroke effect0:58actually do? Well, by default, it draws1:01the vector path by revealing the stroke1:04over time, following the shape of the1:06path instead of popping in instantly.1:10And unlike other effects in Framer, the1:13stroke effect is only available inside1:16vector sets and can only be applied to1:19individual paths. For this example, I've1:22gone ahead and set up this wavy shape1:25inside a vector set. To apply the stroke1:28effect to this, I'll first select the1:29path, then head to the properties panel,1:32click the plus icon in effects, and then1:35select stroke. Now, if we preview this,1:38we'll see that without changing any1:40settings, the stroke effect1:42automatically reveals the path as it1:44animates. But let's head back and refine1:48the motion a bit. Inside the stroke1:50effect, we have a few key controls to1:52work with. Length, gap, offset, loop,1:56and transition. Length controls how much1:59of the path is visible at any given2:02time. Gap adjusts the space between2:05segments, which is also the way to2:07create dashed lines. Offset shifts the2:10stroke along the path, which becomes2:13especially useful once you start2:15shortening the length or reversing the2:17animation.2:19Then there's loop, which gives us three2:21different options.2:23Repeat, which plays the animation and2:26then starts it over from the beginning.2:29Mirror creates a pingpong effect playing2:32from start to finish and then back2:34again. and continuous, which keeps the2:38animation moving forward rather than2:40starting over from the beginning.2:43And finally, we have transition. Like in2:46most of our effects, this will control2:49the duration of the animation and how it2:51eases in and out over time. We can also2:55apply this effect to more complex shapes2:58made up of multiple paths. By selecting3:01several paths at once and applying the3:03effect within the same icon, we can3:06create richer drawn animations.3:09If we see a path animating in the wrong3:11direction, we can easily reverse it by3:13selecting it, right-clicking, and3:16choosing reverse path direction.3:19Okay, so now that we know how to apply3:21the stroke effect, here are a few quick3:23tips to help your animations feel even3:26better.3:28First, always keep your path simple for3:31the best results. Stack vector groups to3:34layer multiple stroke effects, like this3:36fill-in effect. Small adjustments to3:39things like length, offset, and3:41transitions, can make a big difference3:43when creating more engaging animations.3:46And finally, make sure to test your3:48animation in context. An effect may look3:51great on its own, but it should still3:54feel subtle and intentional once it's3:56placed on the site. [music] And that's3:59it. Now you know that the stroke effect4:01is a powerful way to animate your4:03[music] vector paths while adding a bit4:04of personality without over complicating4:07your designs. [music] In the next4:08lesson, we'll focus on how to connect4:10vectors to the framer CMS so our icons4:14can update dynamically with [music] our4:16content. I'll see you there.

Watch on YouTube ↗

‹ Ship websites with enterprise needs, at startup speeds

Connect Framer to Claude Code, Codex, Cursor, and more ›

More in this topic

8 Framer shortcuts you're probably sleeping on4:19
8 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)6:58
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago
Creating a fixed footer reveal in Framer6:25
Creating a fixed footer reveal in Framer
Layout & Design7K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.