Framer Tutorial: Creating Custom Web Cursors (No-Code)

in this video I'm going to show you how you can create these custom cursors for your website without writing a single line of code after watching this full video very important from the beginning to the end you are going to have the knowledge that is needed to create any type of custom cursor or cursor animation for your website so yeah my name is nandi this is from University and let's get [Music] started suggest a quick note before starting the video I finished recording a couple minutes ago and I checked out the footage and I can see that sometimes my screen recorder showed the default cursor as well on top of the custom cursor so if I for example say in the video hey we are now replacing our cursor with a little circle but you can still see my default cursor in the video that's because my screen recorder recorded that as well by mistake so yeah sorry for that and always always just believe what I say the video and also check it out yourself on cursor. lefr do site so yeah that was just a little note here and now let's get started so as you can see here we are inside the frameware and we have a project opened here you're going to find the remix Link in the description so if you want to take a look into this file you can do that by just clicking the remix link so as you can see if I click this little button here I can preview the website it has these cards that I can hover the uh they have you know a hover State and yeah but we still have the normal default cursor that we usually have on websites but in today's video we want to customize this so framer just released a super cool feature which allows you to create any type of custom cursor on your websites really without any coding so the way you're going to do this is first you're going to create a little component that you can see right here so as you can see this is named Circle cursor if I go into this component you can see that it has a couple of variants it has a default variant and it has a hover variant and as you can see the default variant has a pressed state so if I want to show you how we can do that you just click the default then this little plus button here go to pressed and now you can specify a press state of this variant I'm going to just make it a little bit smaller here so now we have a smaller Circle so if I take a look at this you're going to see that as I click on this um component it's going to get a little bit smaller and it also has a hover state which basically grows it gets bigger and also it loses its transparency so it's 50% wide so we have this custom component and basically framer allows us to add this as a custom cursor on our website so we can basically replace the default cursor with this the way we're going to do this is we're going to select the main desktop breakpoint on our website and then we're going to go to the right panel because we have this little new cursor section on the right panel here we can click the plus button and as you can see we have uh different options here so the web cursor is basically you know the default cursors you can select you know any type of cursor from here maybe we want a let's say we want this uh question mark So if we now inspect this website it shows this question mark I really hope that the screen recorder actually shows that but yeah we don't really want these uh default cursors because we want to have a custom cursor so we're going to switch to that and here we can search for the component that we're going to use this time this is the circle cursor and you remember we had two variants the default and the hover of course by default we want to have the default variant and we can switch between uh cursor follow or cursor replace if you want to replace completely our default cursor so we want it to basically you know not display we only want to display the component instead of the cursor then we're going to use the place if you want to also show the default cursor then we can choose follow and the component will be just displayed somewhere around our cursor so we're going to use replace and I'm going to just take a look at this and as you can see now we have this circle cursor on our website and it looks pretty cool however as you can see it works when I'm clicking I'm pressing it gets a little bit smaller and when I hover these cards nothing happens but but what what do we want to do we actually want to go into the hover state of this cursor where we hover over these cards so how we can make sure that when we hover these cards we show the hover state of the cursor we can select all of these cards so I'm just pressing shift and selecting them and then here we have the same cursor property on the right panel we can click that and now we have a set variant so we're going to press the set variant option and basically we can change now the variant of the uh cursor as you remember we had a hover variant which has a little bit bigger size and a transparency so now if we go into this preview you can see that as I hover over discard it goes into the hover State and also the cursor changes um it is super easy to customize for example the transition between these states so for example if I set the default primary VAR varant of this cursor to instant transition what we are going to see is that once I go over the card uh the circle the cursor is going to grow but it's not going to have any transition it's going to just instantly go into that state so I'm going to just set back the nice spring transition and what I want to show you is that for example if you want to have a different color you can do that so it is super easy to customize it you just change the color and now when you hover over this card you have a different color you can also have maybe like a little bit bigger just make sure that this lock is disabled so we can have a little bit bigger something like this and we can write here so let's see what happens if we do this I'm going to switch it to white color a little Bolder text and now if we hover over this you can see that our cursor now says right here so yeah it's pretty cool and we can actually you know design multiple variants so we can have hover one and then we can have hover two this is a new variant and here we can change the text and we can also let's change the color as well and now what we can do here is we can select the second card and here here we're not going to change to hover one but hover two so now what happens is that when we hover the first car it's going to stay right here and we're going to have a blue color and when we hover the next card it's going to say new text and the cursor will have a different color so you can completely customize this whole custom cursor so this is the first example but I want to show you a couple more as well so the next example is the this Myriad um cursor I'm not sure if I'm pronouncing it the right way but I found this website on the internet it is called Myriad dowi and it has this nice custom cursor when we hover over these elements it has this nice animation and I was wondering can we do the same framer with this new feature and the answer is yes so as you can see I have a myriad cursor component here and the structure of this component is really simple so what we have is a PNG for the actual cursor icon and we also have an SVG for the play icon or the arrow um the opacity is turned down on the default variant but as you can see if I turn it up you can actually see that it is there but I'm going to turn it down here and on the hover State as you can see all we do is we basically scale up this icon and also rotate it so I'm going to actually do it again so I'm going to add the new variant call it hover and the icon will be rotated like this and also scaled up I'm going to also change the position a bit just to make sure that it fills up the whole circle and then the arrow will be opacity one so basically that's that's how EAS it is to design two variants for a cursor and we can easily switch between these on hovering different elements so I can also show this interaction if I go connect these two maybe the interaction will happen on tap and if I preview this you can see if I click on this it will go into this state so yeah it's pretty cool I'm going to remove this interaction and I'm going to show you again how we can do this um let's select the main desktop breakpoint again apply the cursor custom cursor we're going to choose Myriad cursor default variant we're going to replace our default cursor with this and then if we preview this you can see that now we have this blue cursor but let's apply the hover variant for these cards so I'm going to select all of them go to cursor custom cursor and oh sorry not custom cursor but variant because we're going to change the variant to hover so now as you can see SI hover over these cards we have this nice animation on the cursor so yeah it is as you can see it's pretty customizable you can do anything that you want you have like great ideas you can make them a reality with framer so yeah what I want to do next is show that for example what you can do if you want to do something magical so we have this magic cursor demo here we have another component here and as you can see we have these little stars these are just icons svgs nothing special but what you can see right here on the layers panel is that each of these icons are having a little star next to them that basically means that they have an effect applied so if I go to the right panel and check out that effect you can see that it is a loop effect and what we basically do is we change the opacity to zero I'm going to change back to one so we can actually see what is happening and as you can see this rotation is applied it's a 3D rotation and also a y of set is happening so what this is going to do is it's going to animate this start down and also animate um a 3D rotation as you can see if I uh change this yv value for example it starts rotating so if we take a look at this you can see that it it goes down and you know the rest of the stars are disappearing because they have opacity one set but I just changed this little star to opacity um one so I have to change it back to opacity zero so when it falls down it actually disappears so basically we have this little animation the Stars Are Falling Down and they are rotating so this is basically looping it never ends it has a delay on each uh they have different delays and yeah it is just repeating so we have two variants here one is hide one is show so on hide these stars are not visible and on show the stars are visible so what happens if we replace our cursor or not replace but add this a magical effect to our cursor when we hover for example over these cards so what what I want to do is when I hover this card for example I want to make sure that I still see my default cursor but these little stars are falling out of it so the way we're going to do that is basically we're going to select again the full desktop breakpoint and we're going to add this custom cursor to it so I'm going to select magic cursor the default variant will be the hidden one and instead of replacing our cursor with it we're going to choose follow so what this will do basically is it will follow our cursor and yeah but here it is hidden so what we will see is basically nothing because it is following our cursor now but a hidden component is following our cursor so we don't see anything but what is actually happening here is technically that cursor is still there and the Stars Are Falling Down but we just cannot see it because opacity is turn turned down to zero on this hide variant so what we're going to do is we're going to select these cards and then select cursor set variant and change the variant to show so what will happen now is we now hover over the card and the variant of the cursor will go into show the opacity will be turned to one and now we see these little stars falling out of our cursor so yeah it looks interesting so as you can see you can have all sorts of creative ways to use Uh custom cursors on your website let's quickly look at another example the pulsing cursor so as you can see we have a component here it has this SVG which is a simple cursor and we have the circle on the first variant which is really really small and the opacity is one and then on the animation one variant we have the circle uh really big and opacity is set to zero so if I set the opacity a little bit to a bigger number you can see that that circle is actually there but the opacity is turned down to zero and what we do here is we actually have a interaction so when we tap on this default cursor it will go into the animation variant so we'll go to animation and from the animation it is going to go back after waiting. 8 seconds to the default so I'm going to show you what this basically means when we click the cursor this circle grows and it changes to zero opacity so as it grows it also disappears so what we can do is we can have this cursor as a replacement on the main desktop breakpoint we will have the default variant here as you can see we have it now we can click and it will have this pulsing effect which is pretty cool I guess and what we can also set is when we hover these cards we see again the pulsing effect so cursor set varant and animation one and as you can see if I hover over this it will nicely pulse so what I also want to show you quickly here is that you can for example show an image as well when you hover something so let's say go to the image and I'm going to delete this little cursor from here because we don't need that so up until this point we were just adding cursor to the main desktop breakpoint and then just setting a variant on these cards but what we can also do is we can add custom cursors to these cards individually so we click custom cursor and we can select a component but we don't have the component yet so I'm going to create that real quick so we can just have something really simple maybe a little frame here let's round those corners and maybe have like an image or something here let's search for I don't even know what should we have maybe this image it looks great so we can have this image we can turn this into a component by pressing option Comm K and then this will be the default and yeah now what we do is we select the card custom cursor and then select the image and we're going to select follow instead of replace we still want to see our normal cursor but we want to also see this image next to it we can customize the relative position of this image um relative to the cursor so let's say it's going to be on the bottom we're going to align it to the left side and we're going to offset it by 2424 so let's see what this does as you can see when I hover over this card this little um image is displayed um on um next to my cursor and what I can also do is I can add a default web cursor to this so maybe a pointer one so when I hover the card my default cursor changes to the pointer cursor uh I really hope again that screen studio is recording these cursor changes properly and I also see the image next to my cursor um what I also want to do here is show that you can actually animate these cursors so for example here as you can see it instantly appears but what if you want to have a nice appear effect we can just go into the component and add an effect which going to be an appear and let's just have a scaling preset and as you can see now if we hover over the card it scales in so it it looks really really cool uh what we can also do is we can create um custom appear effects I'm going to remove the appear effects from the rise panel and I'm going to create another variant this will be called show and this will be called hide so let's say on the hide we have a bit different structure so I'm going to actually create another frame within this this will be pinned to all sides and I'm going to remove the image from our previous hide frame and this will be called image wrap and we're going to wrap an image with this so I'm going to create another image here it's going to be pinned to the top and then make it a little bit bigger like this I can also remove the F color from the image WP and then for this image frame within we can select an image instead of this white color so I'm going to just quickly select something maybe the same image from unsplash and here I can select the image WP and I can just change its height uh what I want to do is mask the image so in order to Max mask it we need to change the Overflow to Hidden so image WP is Now hidden overflow so we can make it like this and then on the show we basically just increase the height of this image wrap and it will nicely mask in the image so what we do here is we connect these wind interactions because what we want to do is when we um when we basically show the hide primary variant we want to automatically go to the show variant the way we're going to do this is we're going to connect it to the show and we're going to select a interaction so this interaction will happen on a pier when the hide variant appears we're going to wait just a little bit like 01 and then we're going to go to the show um so let's see how this looks uh I'm going to just go here select the image and we're going to display the hide variant when we hover over this card so again what will happen we display the hide variant when we hover the card but it knows that when hide is displayed it needs to go to the show variant automatically after rating a little bit so as you can see as I hover over this card the image is nicely masked in from the top to the bottom so you can actually design your own appear and exit effects so really this feature is mind-blowing you can do anything that you want you can have any type of custom Cruiser on your website and the fact that you don't need to write single line of code for this is pretty amazing just I just want to show you quickly um I had a custom cursor resource on framer University if you go to resources search for custom cursor override you can see I had this basically the same Circle override that we used here in the first example so home basically the same thing that you see here um on Hover certain elements you see uh a bigger cursor I did the same thing here with this uh L Custom cursor however the way we did this is basically with an override we had to use this much code in order to do this and it wasn't even uh that customizable we could just change the color of the circle but we couldn't use anything other than a circle um so yeah and now what we can do is we can do these things without any code we can design our states here within framer again without writing a single AF code just drawing rectangles adding text layers and then we have these animations it is pretty amazing I really hope that you enjoyed this tutorial uh let me know what you did with these custom cursors and I'm going to see you in the next one

Channel: Framer University

Views: 1,797

Keywords: framer, framer tutorial, framer website, framer template, no-code, no-code website, website builder, website animation, framer university, website custom cursor, custom cursor, web custom cursor, custom cursor web, animated cursor, custom animated cursor, cursor animation, custom cursor no-code

Id: jM6D99LKJN4

Length: 23min 54sec (1434 seconds)

Published: Fri Feb 09 2024