Create Custom Cursors in Webflow

hey guys it's kaler welcome to the youtube channel in today's video i'm going to show you how to set up a custom cursor in webflow these are completely customizable and they're super easy to set up on your website so let's go ahead and get started all right so this is the project that i'm going to be adding a custom cursor to just a simple hero section i threw together for this tutorial i'm going to look good with a custom cursor so the first thing i'm going to do is create a wrapper for our cursor so i'm going to hit command k and grab a div block and we're going to give this a class name of cursor wrapper so this is where our cursor is going to sit inside of inside of the navigator i'm just going to drop this right below the body so it's on top first let's go ahead and set this to a position of fixed and i'm going to set that to full by this icon right here before i forget i'm going to go ahead and grab the z index and set that to 1000. our cursor is going to be inside of this wrapper so we're going to go ahead and change the display to flex and we'll leave it horizontal and then we're going to align that center and justified center as well so let's add our cursor class so command k and i'm going to grab a div block so we have our div block inside of cursor wrapper we'll give this a name of cursor so this is where you can get creative and customize your cursor to make it exactly the way you want it i would recommend following along i'm going to make a normal circle cursor and then you can tweak it afterward so again it's whatever you'd like to style it as for now i'm going to set mine to 20 pixels in the width and 20 pixels in the height and just so we can see it for now we'll give this a nice blue color and i'm going to set the radius to 100 to give us a nice round circle so you can see we have a dot in the center of our screen let's go ahead and add an interaction to make this function all right so i'm just going to go over here to the interactions tab and under page trigger i'm going to select the plus icon and we're going to go for mouse move in viewport so we're going to select an action and we're going to play mouse animation so under our animation let's go ahead and add a new animation and for the mouse x animation let's select our cursor and select the plus and we're gonna go with move and so now we have two states one as zero percent and one at a hundred percent so the first thing we need to do is go to the effect and we wanna select the class itself so if we add this to multiple pages we want to make sure it's affecting that class so we have cursor at zero percent i'm going to go into the x value for the mouse x actions and we want to go negative 50 viewport width so vw so that's going to push the cursor way over here to the edge of the browser so since we're on the x-axis we're dealing with the viewport width and when we switch to the y in a minute we'll be dealing with the viewport height so we have the zero percent set so let's go set the 100 and we'll set this on the x to 50 viewport width so now you can see it's pushed over here to the edge let's set up the same thing in the mouse y so make sure in our navigator we have our cursor selected select the plus and we'll go for a move transform for the zero now in the y we'll set this to negative 50 v h and for 100 150 vh and again we want to make sure that we have the class selected for both of these and if we hit the live preview toggle now when we move our cursor around you can see that we have that blue dot following along throughout the viewport one thing you want to take in mind is the cursor is kind of lagging behind my mouse that's the desired effect that i want but if you want the cursor to be right aligned with a mouse just save this and go to your smoothing and turn that down to zero so you can play around with that to make sure it snaps to your mouse a little bit better i'm gonna go for about 75 let's see how that looks that looks pretty good so i'm going to go with 75 on my smoothing one important thing that you guys want to add is a custom line of code to make sure that this cursor wrapper we have on top of everything is not going to clash with the website so you may have some issues somewhere on your page where you can't click or hover through it so we want to make sure we add this piece of code that way it works properly so hit command k and just grab an embed element and in here i'm going to open and close the style tag and we want to grab that cursor wrapper so we do that by just saying dot cursor dash wrapper so that is how you grab the class you just add the little dot since it is a class and not an id and then we want to say open and close curly brackets and inside of those we're going to grab the pointer events so pointer dash events and then we're going to say none all right so we have the pointer event set to done for the cursor wrapper and we can save and close that and i just put this inside of the cursor wrapper you can put this anywhere on the page any page that you use your cursor on you want to make sure you have that embed element there as well so this is a good way just to make sure it's all together all right so now we need to set up some hover states so that when we're hovering over links we can actually see some interaction there so simply select whatever element you want your hover effect to be applied to i'm going to hover over this large heading first and then go into the interactions tab and then we're going to select mouse hover and we're going to start an animation and i'm going to add a new one here and we'll just call this mouse hover we're going to reuse these on everything so just call it something generic there and then i'm going to select the cursor itself and we're going to apply whatever we want to this i'm going to adjust the scale maybe we go up to 2 in the x and y let's add a little bit of easing and let's also do the opacity and we want to make sure these are at the same time so we'll group those together and i'm going to lower the opacity down to 80 percent and i'm going to make sure the easing is the same so it happens at the same exact time and i'll just save that so that's what happens when our mouse hovers that animation starts and then when we hover out i'm going to duplicate that and then rename it mouse hover out we'll select that and then now we'll just change these values back to default so here we'll set this back to a scale of one and the opacity back to one hundred percent so we save that we go here we can take a look at our custom cursor when we hover over there goes to 80 opacity and scales up and if we simply want to add this to any other link uh if we want to do the same interaction we can just grab this work link quickly add a mouse hover and then it's just a few clicks to grab those animations and then we have the same effect boom lastly if you just want to see the blue dot and you don't want to have your mac or pc default cursor there all you have to do is go to your navigator select your body and then grab the body all pages and then under cursor you can just set that to none and for your links you want to grab all links and then you want to go down and set that to none and so now we have this nice custom cursor and we can't see our default mac or pc cursor whatsoever and so that is how you can set up some custom cursors in webflow i hope you guys enjoyed today's tutorial and found it helpful if you did make sure to leave this video a like subscribe for more design and webflow related content and as always have a great day and i'll see you guys in the next one you

Channel: Caler Edwards

Views: 13,834

Rating: 4.9528489 out of 5

Keywords: Create Custom Cursors in Webflow, Custom Cursor Webflow Tutorial, Webflow Tutorial, Custom mouse hover tutorial, custom cursors webflow, custom hovers webflow, Mouse cursor Webflow tutorial, Create a custom mouse hover Webflow tutorial, CalerEdwards, Caler Edwards, Web Design, UI/UX, UI, UX, UI Design, Website Design, Web Development, Webflow no code tutorial, easy Webflow tutorial, Webflow interactions

Id: TTeWISVnkh8

Length: 8min 1sec (481 seconds)

Published: Sat Jan 23 2021