Animations

Framer Update: Custom Cursors

Benjamin

16:55

57K views

Feb 8, 2024

About this lesson

We’re excited to introduce Custom Cursors. Design interactive cursors using components, with infinite ways to customize. Tap into the power of Variants, Effects, and Transitions to design interactions with an incredible fidelity. Get started by adding a custom cursor to your Page, then switch its Variants on any layer. Choose between “Replace” to swap the default cursor with a Component, or “Follow” to add to it. It’s a simple feature at first glance, but as you delve deeper you’ll find it’s remarkably versatile. We can’t wait to see what you’ll come up with.

Remix the demo here: https://cursors.framer.wiki/

🌞 Start for free: https://framer.com

📚 Learn more at: https://www.framer.com/academy/

💎 Join the Community: https://www.framer.community

🎉 Follow on X: https://twitter.com/framer

0:00[Music]0:04[Applause]0:04[Music]0:15feel let's take off get lost 0:19yeah right got to feeling like I'm right 0:23got feeling 0:28like 0:32[Music]0:34yo my name is Benjamin and this is 0:38custom cursors in framer so without 0:41further Ado let's Dive Right In as you 0:45can see we currently just have the 0:47native desktop cursors on this page and 0:51we would like to replace it with this 0:54custom component I will double click 0:57into it to show you how it's set up 1:00as you can see we have a bunch of 1:02different variants here starting with a 1:05pressed variant that simply skills down 1:08the circle on Mouse 1:10down and then there's a few variants 1:12where we show these different titles of 1:15sides made in 1:17framer and we would like to animate 1:20between all of these seamlessly 1:23specifically as we press down I would 1:27like the circle to skill down 1:31and as we hover over the different cards 1:34I would like the cursor to reflect the 1:36proper title so how do we add our first 1:40custom 1:41cursor to start I'll select the entirety 1:44of the page our desktop breakpoint and 1:49then I'll head over to the new cursor 1:51property in the property panel here we 1:55can pick between a web cursor which is 1:58the existing C css-based 2:01cursors or the new custom cursor feature 2:05I'll select the custom option and here 2:08we can select any component to become 2:10our custom cursor so I'll type label to 2:14select the component we just looked at 2:17and then once selected I can pick any 2:20variant to start with so the default is 2:24just fine and then we can decide to 2:26either have it follow the existing 2:28cursor or or to replace it entirely and 2:32to add a transition which we'll look at 2:34a bit later so I'll close this pop out 2:38and let's give this a preview as you can 2:41see we have successfully replaced the 2:44default cursor with our own little 2:47component and as I click to press down 2:50it animates to the Pressed variant yet 2:53on Hover of these cards nothing happens 2:57just yet so how do we switch to the 3:00correct variance on Hover I'll select 3:03the first card here I'll head over to 3:06the cursor property and this time I'll 3:09pick set variant framer knows that this 3:12page already has a cursor defined and it 3:16allows me to Simply switch its variants 3:19without having to redo all of these 3:21settings so I'll go over all of these 3:23cards select set variant and simply pick 3:27the matching variant there are are no 3:30settings I have to redo everything gets 3:33inherited from the page 3:37cursor and just like that if we now give 3:40this page another preview we'll still 3:43have our custom Circle and on Hover it 3:47seamlessly transitions into our label 3:50showcasing the title of each site so 3:54that's how you can replace the native 3:57cursor in framer with a custom component 4:00that has a pressed variant as well as 4:03multiple unique variants to animate 4:06between but sometimes you don't want to 4:09replace the cursor entirely you just 4:11want something to follow it let's have a 4:14look at how to do just that next so I'll 4:18switch to the next page in our demo 4:22project where we have a different custom 4:27component this one is semi- trans 4:30arent it also skills down on press and 4:34it has a subtle background 4:38blur so very very simple I'll again 4:42select the 4:45page I'll then head over to the cursor 4:51property I'll select custom cursor and 4:55I'll find this outline component this 4:58time I'll set the cursor property to 5:01follow instead of replace and here we 5:04can customize how to position our cursor 5:08relative to the native one I'll set a 5:11line to left I'll keep position set to 5:15bottom and I'll add a negative offset of 5:19-6 for both X and Y effectively 5:23centering our component we now get this 5:27transparent Circle following our cursor 5:30around but how can we make this feel 5:33much smoother by adding a transition 5:40property I'll click add to add a new 5:43transition to this 5:45cursor and here we can customize 5:47properties like stiffness and damping to 5:50create unique transitions for our cursor 5:53let's see how this one feels now we get 5:56this subtle sort of delay a custom 5:59spring transition between the movements 6:02of the circle it doesn't just change its 6:06position it animates to different places 6:09so let's tweak the transition to be a 6:12little less bouncy a little 6:16slower and maybe let's make that even 6:19slower with a lower stiffness and a 6:23higher 6:24damping and there we go the component is 6:28following our cursor with super smooth 6:33Transitions and it still animates on 6:36press as 6:37well so that is how you can add layers 6:41to the existing cursor and how you can 6:44work with custom 6:46transitions we've designed this feature 6:49to be extremely flexible allowing for a 6:52wide variety of use cases so next I 6:56would love to run through a few 6:57different use cases and show you the 7:00unique setup of each starting with 7:03videos your cursors don't have to be 7:06static layers they could even be videos 7:09plus you can be smart about how you use 7:13variants for example you can design your 7:16own enter and exit animations just by 7:19designing a hidden variant so you're 7:22animating to and from a specific variant 7:26that you control but isn't visible just 7:29yet so if we go back to the page I can 7:32quickly show you how this one is set up 7:36it has the video applied but set to the 7:39hidden variant cursor is set to follow 7:43it's placed at the bottom left with 40 7:46pixels offset each and it has a 7:50transition then on the graphic here we 7:54have a hover effect and two cursors one 7:59setting it to a normal pointer 8:02cursor and the other switching to the 8:06video variant so let's see how this 8:09comes together in the preview initially 8:13it's as if there isn't a custom cursor 8:15at all and then on Hover the video 8:19animates into view already playing 8:22looping seamlessly with a custom 8:25transition applied on top as well so for 8:28some use cases designing a custom hidden 8:32variant is a really fun trick giving you 8:35full control over how layers animate in 8:38and out in the next use case I'd like to 8:41cover two unique details one you can 8:44also use effects in your cursor 8:47components and two you can also apply 8:50custom cursors without having to set it 8:53on the page level initially so here we 8:56have this Emoji card each one has a 9:00subtle background animation using blur 9:03and a loop effect plus each variant also 9:06has an appear effect if I then inspect 9:09the page setup you'll find that there is 9:12no cursor applied to the desktop page at 9:15all and instead we have applied unique 9:19custom cursors to each of these text 9:22layers and have simply picked the exact 9:25same component this means you could even 9:27use entirely different components for 9:30your cursors on a single page and if we 9:33give this a preview you can see that 9:36these cards have subtle animations and 9:39they switch seamlessly as we hover each 9:43individual layer the main takeaway here 9:46is that you don't have to use a custom 9:48cursor on the page level first now it 9:50does give you a few benefits like the 9:53ability to use set variant as we showed 9:56earlier but if you just want unique 9:58compos components in specific sections 10:01of your page you're also free to set it 10:03up like this this next use case has no 10:07unique setup and instead I would like to 10:09say a few words on transitions your 10:12cursors can have multiple transitions 10:15one for the following and another for 10:18any animation that happens within your 10:21component whether that's a variant 10:23animation a nested component or an 10:26effect all effects and animations in 10:29framer are built on top of framer motion 10:32our incredibly popular animation 10:34framework we shipped several updates to 10:37framer motion to unlock features I'm 10:40showing you in this video this enables 10:42you to design animations and transitions 10:45of an unparalleled Fidelity which I 10:48think is incredibly exciting let's move 10:51on to the next use case which is video 10:55controls if I hover over the video a 10:59play button appears I can click to start 11:01the video the icon turns into a pause 11:04icon even after moving away from the 11:08video so the cursor is aware of the 11:10state of the video and this is made 11:12possible with just a few lines of code 11:16the two takeaways here are you can 11:18design cursors to control elements of 11:21your page and two you can mix in a 11:23little bit of code to make them stateful 11:27in this next use case let's have a look 11:29look at how to set up cursors for custom 11:32interactions like dragging this shows 11:35another unique setup this cursor 11:37replaces the default and it's quite 11:40large because we want to include both a 11:43custom cursor and a label to make this 11:46work well I've ensured that the end 11:49point of our cursor sits at the perfect 11:53center of our component allowing us to 11:56use the replace feature without messing 11:59up hover States or selection it becomes 12:01a hand in the second variant the label 12:05animates and on press it becomes a 12:08grabbing cursor plus you can see that 12:11this pin wheel layer has a bunch of 12:13effects plus a set variant applied to 12:17the cursor so let's see all of this in 12:19action we have this large cursor on our 12:23page here on Hover it shows a hand and 12:26the label animates its color 12:30and on Mouse down it becomes a dragging 12:33cursor and we can move the pin wheel 12:36around 12:37anywhere and if I release the cursor it 12:41automatically switches back to the 12:43initial variant even without having to 12:46move your mouse first which is something 12:48we explicitly added support for the 12:51takeaways here are if you're designing 12:54huge cursors with additional labels to 12:57replace the default make sure that the 13:00cursor is centered plus you can mix 13:03cursors with any of our effects to 13:06design truly interactive cursors the 13:09next use case highlights how you can use 13:11different creative components within 13:13your cursor here I'm using the animator 13:16from framer dos Supply and the r 13:18component available in the insert panel 13:21to design this custom animation on Hover 13:24next up is blending we made sure to 13:27support different blending modes 13:29in the cursor feature which you can 13:32simply apply within your component here 13:35it set to difference which in this demo 13:38file is a pretty cool effect because all 13:41text stays legible on 13:44Hover next your entire cursor can 13:47actually also be based on code allowing 13:50you to create an infinite amount of 13:53custom implementations like this demo 13:56where the icon transforms based on the 13:58location of your cursor and this brings 14:01us to our final use case defining 14:04cursors within components allowing you 14:07to design all sorts of unique sections 14:10like this custom Carousel the cursor 14:13itself is very simple a circle with two 14:16variants showcasing an arrow each what's 14:20unique is that this section itself is a 14:23component where I've defined clickable 14:26areas to show a unique cursor as well as 14:30switch between 14:31variants the cursor isn't defined within 14:34the component but instead it has been 14:37assigned a variable there are two cursor 14:40variables here one called left and one 14:43called right in the first variant this 14:46clickable area is assigned to the right 14:49cursor variable and has an interaction 14:52that switches it to the middle variant 14:55in the middle variant we have this 14:57clickable area that now also gets a 15:00cursor variable the left one and an 15:04interaction that switches it back to the 15:07initial variant and this is repeated 15:10throughout simply put only the first and 15:13the last clickable area have the cursor 15:16variables removed and also have no 15:20interactions this is how we control when 15:23the cursors should appear within each 15:26variant the photos are grouped in a 15:30stack and the component itself is a 15:33stack that simply changes the distribute 15:36property per variant from start to 15:41Center to end combined this creates our 15:45custom Carousel that only shows Arrow 15:48controls when applicable and 15:51automatically goes back to the page 15:53default when we've reached either the 15:55end or the start of our carousel 15:59and that was the Final Extra use case I 16:02wanted to cover the custom cursor 16:05feature in framer is easy to use yet it 16:07is incredibly versatile unlocking a wide 16:11variety of new use cases and creative 16:15setups we're super excited to share this 16:18feature with you and we can't wait to 16:20see how you'll use it on your sites if 16:23you want to learn more you can find a 16:25free remix link to the demo shown in 16:28this video in the description down below 16:32that's pretty much it for this video 16:35thank you so much for watching and stay 16:38tuned for more updates coming 16:53soon

TeachesCustom Cursors Component Variants

Also coversAppear Effect Breakpoints Components Hover & Press Links Loop Effect Remix Links Stacks Transitions & Easing Variables

Watch on YouTube ↗

‹ Framer Update: Localization 2.0

Framer Update: Unified Pages ›