Animations

Setting Up custom cursors in Framer (Animation Lesson 16)

Joseph

12:17

13K views

Oct 7, 2025

About this lesson

If “variety is the spice of life” then why do we use this same arrow cursor all the time? Lucky for us, Custom cursors in Framer let us design unique cursor styles that match your brand and respond to interactions.

In this lesson, we’ll look at a few different approaches for adding custom cursors to our sites.

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

https://www.youtube.com/watch?v=FakL-liq890&t=23s Cursor options overview

https://www.youtube.com/watch?v=FakL-liq890&t=108s Build a simple cursor component

https://www.youtube.com/watch?v=FakL-liq890&t=179s Replace vs follow and transition basics

https://www.youtube.com/watch?v=FakL-liq890&t=399s Set variant

https://www.youtube.com/watch?v=FakL-liq890&t=620s Cleanup

https://www.youtube.com/watch?v=FakL-liq890&t=713s Wrap up

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

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

0:00If variety is the spice of life, then 0:03why do we keep using the same arrow 0:05cursor all the time? Well, lucky for us,0:07custom cursors in Framer let us design 0:10unique cursor styles that match our 0:12brand and respond to interactions. In 0:15this lesson, we'll look at a few 0:16different approaches for adding custom 0:18cursors to our sites.0:22To set a custom cursor, first we got to 0:25decide where on the page that cursor 0:27should appear in the first place. We'll 0:29start with something simple. We'll 0:31replace the cursor with something a 0:32little more interesting no matter where 0:34the cursor is on the entire page, which 0:37we accomplish by first selecting the 0:39desktop breakpoint and then coming down 0:41here to the properties panel and 0:43clicking the cursor section. We get a 0:46few different options here. We have web 0:47cursor which lets us choose from some of 0:50the default cursors that are built into 0:52the operating system. Then we have 0:54custom cursor where we can pick one of 0:55our own components. And then we have set 0:58variant, which requires a little bit 1:00more setup. We're going to come back to 1:01that one in just a little bit. But I'll 1:03show you real quick that if I choose web 1:04cursor, we get these familiar cursors 1:07that are built into our operating system 1:09that show up in various circumstances,1:11like when we hover over something that 1:13can be grabbed and dragged or when we 1:14hover over something that can be moved.1:16And these can be really useful,1:18especially if you're creating 1:19interactions within your own components 1:21and you want to give the visitor a 1:22little signifier or affordance that 1:25something can be clicked or can be 1:27dragged. That's what the OS uses them 1:29for in the first place. They're 1:30contextual and they change depending on 1:32what you're hovering the cursor over.1:34But because what we're trying to do here 1:36is sort of get creative with the cursor 1:39for the entire page, I'm not going to 1:41choose one of these. We're going to do a 1:43custom cursor instead. So I'm going to 1:44close this. I'm going to rightclick on 1:46our web cursor here and I'm going to 1:48remove it. And I did do a small amount 1:51of setup here. I have created components 1:53for each of the cursors that we're going 1:55to be setting throughout this particular 1:57lesson. So if I scoot over to the left 2:00just a little bit, you can see I've got 2:01an instance of this component that's 2:03really just a white dot. But if I double 2:05click on it, I do have a pressed state 2:07for that white dot. So if I preview 2:09this, when we click down on the white 2:11dot, it does get a little bit smaller.2:13And this press interaction actually will 2:15work with our cursor. So we'll get that 2:17extra little bit of tactile feedback 2:20when we click the mouse down. So I'll go 2:22back here and I'm going to go all the 2:24way back to the homepage that we were on 2:25before. And now with the desktop 2:27breakpoint selected, I'll come back down 2:29to cursor and this time I'll choose 2:31custom cursor. And when I choose custom 2:33cursor, I can choose from any one of the 2:35components that are in this project. I'm 2:37going to choose cursor dot. That's the 2:39one we were just looking at. And then I 2:40get to choose if I want that 2:42cursor.component to follow the cursor or 2:45replace the cursor. I'll start with 2:47replace and I'll show you what follow 2:48looks like in the next example. And then 2:51the last property here is transition.2:53And what transition is going to do is 2:55add a little bit of easing between the 2:57input of moving the cursor around and 3:00the actual cursor moving on the screen.3:02It kind of smooths out the movement.3:04When you're replacing a cursor, this can 3:06feel a bit like input lag. it kind of 3:08decouples your input from the visual 3:11feedback that you're getting on the 3:12screen. So, I'm not going to do that 3:14with replace. I'll show you what that 3:15looks like with follow in a moment. But 3:18really, all I'm doing here is saying 3:19anytime the cursor is within the desktop 3:21breakpoint, replace the little arrow 3:23with my cursor component. So, let's see 3:26what that looks like. I'm going to press 3:27command P on my Mac to go into preview 3:29here. And there we go. Now, I have my 3:32cursor component instead of my little 3:35arrow. It's been replaced. And if I 3:37click, I get that interaction that I 3:38created within the component. So I get a 3:40little visual feedback every time I 3:42click the mouse. Now, let's say we don't 3:44want to replace the default cursor. We 3:47just want to add a little visual element 3:49to spice things up a bit. So I'm going 3:51to leave the preview here and I'm going 3:53to head to the next page. And for this 3:57example, you can see I've got a similar 3:58sort of big white dot. And if I click 4:01into this, you can see that I have a 4:03press state where the dot gets a little 4:04smaller. But the key thing with this is 4:06that I've added a blending mode of 4:08difference to the white dot here. And 4:11what that's going to do is invert 4:13whatever the white dot hovers over. Kind 4:15of like a little X-ray that's floating 4:17around following my cursor. So let me go 4:19back to the canvas here and let's see it 4:21in action. I'm going to select the 4:22desktop breakpoint. Come back down here 4:24to cursor. Add a custom cursor. And in 4:27this case, I'm going to choose the 4:29cursor inverted component. That's the 4:31name that I happen to give this 4:33component. And now the big distinction 4:35here is instead of setting this to 4:37replace, we're going to set this to 4:39follow instead. And with follow, we get 4:42quite a few extra settings cuz we get to 4:44decide how the component that's 4:46following the cursor around is going to 4:48be positioned relative to the default 4:50cursor. So I want it positioned relative 4:53to the top of the default cursor. And I 4:57want to align the center of the 4:59component with the cursor. And the 5:01offset is currently set to 0 0. But 5:03let's see what that looks like as is.5:05I'm going to press command P to go into 5:06preview mode here. And then here we go.5:09We've got the component aligned with the 5:11top of the cursor and we've got it 5:13centered up with the cursor pointer,5:15which is the very tip of the cursor. But 5:17I kind of want the cursor to be in the 5:19middle of the dot rather than the cursor 5:21being at the bottom of the dot. So, I'm 5:23going to go back and because the height 5:25of that dot is about 60 pixels, I'm just 5:28going to add a Y offset of 30 to move it 5:31by half of its own height, which should 5:33get us aligned with the middle of it.5:35The middle is half of the total height.5:37So, I'll press command P again. And 5:39there we go. Now, the tip of the cursor 5:41is aligned with the middle of the dot.5:43And as I mouse over, you can see that 5:46we've got our difference blending mode 5:48giving us that sort of X-ray effect. And 5:50you'll also notice that the dot is kind 5:52of trailing behind my cursor. It's 5:54following, but it's following almost 5:56kind of loosely. That's what the 5:58transition property does. So, let's go 6:00back. I'm going to leave preview mode 6:02and let's head back over to the popover.6:03And you can see that there is in fact a 6:06spring transition here. If I get rid of 6:08that and we preview this again, see now 6:10we have a very rigid relationship 6:12between the position of the cursor and 6:14the position of the component that's 6:16following it. But you can really do what 6:18you want with this. This is a creative 6:19decision. We're not replacing the 6:21cursor. So, we're not hijacking the 6:23movement when we apply a transition that 6:26adds a little bit of delay. That doesn't 6:27translate to input lag because we still 6:30have that one:one control over the 6:32default cursor itself. The component 6:34that's following it around, that's just 6:36icing on the cake. So, now I'm going to 6:38leave preview mode and I'm going to take 6:40us to the third page to show you the 6:42next example. Earlier I promised I would 6:45show you what set cursor does. So in 6:47this example, we're going to make the 6:48cursor dynamically change and transition 6:51from one cursor to another depending on 6:54where we hover. So before we do that, I 6:57want to give you a quick tour of the 6:58component I created for this cursor 7:00ahead of time. If I double click on this 7:02guy, you can see that I've created a 7:04cursor that starts off as a dot, but 7:07then that dot can expand to reveal some 7:10text. And we have a few different labels 7:12here. where we have hover, press, loop,7:14and drag, which are kind of like little 7:16tool tips that are going to describe the 7:18things that we hover over. That's the 7:21gist of the setup. So, I'm going to head 7:22back to the canvas, and we're going to 7:24start the same way that we always do.7:26I'm going to select the desktop 7:27breakpoint, come down here, click to add 7:30a cursor. We're going to do a regular 7:32old custom cursor. And in this case,7:34we're going to make sure that we have 7:35the right component selected. This one 7:37is called cursor labels. And we're going 7:40to start with the default variant, which 7:42is going to replace the cursor, which 7:44should just give us that dot. Let's 7:45preview this. Let's make sure we're on 7:46track. I'll press command P. And then 7:48here we go. So, very much like the first 7:51example we did. We are replacing the 7:53cursor with a particular variant of a 7:55component. Now, let's get fancy with it.7:57I'm going to go back. And now we're 8:00going to go down to these little 8:01elements here, which I would like to be 8:03able to hover over and get a different 8:05label depending on which one of these 8:08we're hovering over. So we'll start with 8:09the first one. With this particular 8:11frame selected, I'm going to come back 8:13over to the properties panel. I'm going 8:15to add the cursor property again. And 8:17now we have the option of set variant 8:20because we have a component that has 8:21variance set at the highest level, the 8:24break point itself. So now we can get 8:26more specific about elements that are 8:28children of that breakpoint. So this 8:30being one of them, I'm going to click 8:32set variant. And here we get to choose 8:35which variant it is we want to switch 8:37to. Hover label is the one that I want 8:40to use for this one. For the second one,8:42we'll use press. For the third one,8:43we'll use loop. And for the fourth one,8:45we'll use drag. But for this one, again,8:46hover. And that's it. We're just saying 8:49switch to the hover variant when I hover 8:52over this particular frame. So again,8:54we'll preview and I get my default 8:56variant when I hover the cursor anywhere 8:58over the break point except when I hover 9:01the cursor over this particular frame.9:03And there we go. The cursor now switches 9:06variants because these variants exist 9:08within that component. And like the 9:10interactive components we created 9:11earlier in the course, Framer 9:13automatically animates the transitions 9:15from one variant to another. So we get 9:18this awesome smooth transition from the 9:20default cursor to the hover variant.9:22Now, let's combine what we did in the 9:24last two examples and create a little 9:26tool tip that follows the cursor around.9:29So, I'm going to leave the preview here 9:31and I'm going to go back up and I'm 9:33going to select the break point itself.9:35So, that way I can come back over here 9:37and I can change this from replace to 9:39follow. And for this one, I want the 9:42tool tip to be to the right of the 9:43cursor and aligned with the middle of it 9:45sort of. I do want the tool tip to be 9:47below and to the right of where the 9:49cursor is. So, I'm going to make sure I 9:51have this X offset of positive 20, which 9:53is going to push it to the right, and 9:54this Y offset of 20, which is going to 9:56push it down. So, let's see where we're 9:58at. I'm going to press command P to 10:00preview this. And you can see that this 10:02little dot following the cursor is to 10:03the right of the cursor, and it's pushed 10:05a little bit over and a little bit down 10:07with the offset property. And if we 10:09hover over this frame, there we go. We 10:11get our full tool tip following the 10:14cursor just a little bit down and to the 10:16right. But this little dot is annoying.10:18We don't necessarily want a little dot 10:20following the cursor all the time. So,10:21I'm going to go back and let's fix that 10:23by going into the component itself and 10:26adding a new variant. So, I'm going to 10:29select this default variant here cuz 10:31what I'm going to create is similar to 10:32that. We're just not going to see the 10:35white fill inside of the dot. And that's 10:37easy enough. I'm just going to come down 10:39here, find the fill property, click on 10:41that, and bring the opacity all the way 10:43down to zero. And then to make things a 10:46little bit more clear for myself later,10:48I'm going to rename this variant hidden.10:51So now I can go back to the desktop 10:53breakpoint and where I choose that 10:55default cursor that's going to follow 10:57around. Rather than using my default 10:59variant, which was the white dot, I'm 11:01going to use my new variant that I've 11:02named hidden. And when I press command P 11:05to preview, there we go. Now my cursor 11:07is flying solo and I get my transition 11:10to that hover variant when I hover over 11:12this frame. So we're super close. Let's 11:14just finish the job and add the tool 11:16tips for these other frames. I'm going 11:18to go back. I'm going to scroll down 11:20just a little bit. And with this frame 11:22selected, I'm going to add a cursor.11:24Choose set variant. Make sure that I 11:26have the right variant selected, which 11:28in this case is going to be press. And 11:30then I'll add one to this third frame.11:32Set variant. Loop label. And this last 11:36one is going to be my drag label 11:38variant. So now we should be good to go.11:40I'll press command P. We've got our nice 11:42clean cursor. And when we come down 11:44here, we've got our little tool tips 11:47that animate in and transition from one 11:49to the other depending on where our 11:51cursor is hovered. And there you have 11:53it. Custom cursors can be informative,11:56add personality, and make our sites feel 11:58more immersive. And now you know a few 12:00different ways to go about it in Framer.12:03That's it for this one. I'll see you in 12:05the next one.

TeachesCustom Cursors

Also coversAuto-Translate Breakpoints Component Variants Components Form Inputs Frames Hover & Press Transitions & Easing

Watch on YouTube ↗

‹ Animating text in Framer (Animation Lesson 17)

Optimizing Video files for the Web ›