How to Create a Custom Cursor in Webflow

hello guys in this tutorial i'm gonna show you how to create a custom cursor in webflow this is the final effect you're gonna get all right let's go to it i already set up a hero section with a text and an image just to speed up the process let's go to it first you gotta create a div let's call it cursor wrapper i'm going to call it true because i i used the casa wrapper class before to practice it okay let's apply the width actually we don't need to apply the width if we only need to apply position fixed and we apply full because with this we are covering the whole screen so the cursor effect is being applied on yeah on the whole screen basically and next we go we need to define the define it as flex flexbox so the cluster is centered on the screen on when i create it now i'm going to create it now let's call it cursor number two and let's define it the size can be whatever you really need whatever you want uh 20 by 20 background white let's put 100 radius by the way you don't see it because you need to define the z index on the casa wrapper let's apply the z index make sure you don't forget to apply the z z-index because if you don't apply the z-index the costs are going to be behind some elements in your website and you don't want that because if this happens the effect goes away you you cannot see it right now we have our custom cursor here and now we create the interaction let's go to our casa wrapper let's create a mouse moving viewport create animation cursor effect right and now we do the magic on the on the white circle we created so we apply on the move element we define zero percent with minus 50 but viewport width and 150 reported and on the y factor we define minus 50 euphor's height and 100 percent 50 viewport height [Music] and if you test it it's working properly one thing i forgot to mention make sure you select to affect the class not the selected element why because the selected element you cannot apply it on other pages so basically if you define to class you can reuse this effect on other pages that's what you want because you need to apply this effect individually on each page okay let's go to the second part which is the hover effect on links for this to work you need to create a class which you're gonna be using on all links that you want the the hover interaction the same one that we have here for this to happen you need to create a class i created one here link hover effect now let's create the the hover effect mouse hover start on animation let's create over effect and now we select our white circle let's define his state his initial status size let's apply initial state define 20 by 20 let's duplicate this now we're gonna change it to let's say 80 by 80 and we want this to happen 0.3 seconds with ease out quebec perfect the difference from this and the one i have i have a text which i did not add on this one let's add a texture here so you know how to do it so we go on our custom cursor let's add a text box let's call it view and let's define the cursor as flexbox so it's all centered and let's make sure the text is not visible on the initial state so we select this display height let's go back to our link animation and we already set up the initial state and the last state now we need to to set up the text the initial state of the text is height right it's hidden and we duplicate this and define the text state too then all right perfect okay that's it and now if you try to preview the effect it's not working you gotta ask you can you're probably asking why is it happening because we also need to add a custom code to one line of custom code so to do that you create a an embed let's create here the the line by the way i'm gonna pass this copy past this custom code on the description of the video don't worry about it so we need to affect our casa wrapper 2 cursor repair 2 pointer events none okay let's publish and see if it's working perfectly by the way guys i did not define the the hover out effect i only defined the hover in which is this one let's define the hover out and to do that we do stat animation hover out with duplicates the hovering effect and we apply it here should probably name it accordingly to make it easier now we delete the the last effect we select this show and change it instead of initial state we just remove it we select the duration which is 0.3 to match what we had what we have on on the initial effect on the hovering effect define the easing and if you save publish but see before we had this so we had no hover out state now if i update nice it's working really well another thing you need to do is you need to make sure you define the pointer to none so how do you do that you go on body all pages and you select cursor none you also need to do this on the links you cannot do this on on the link you already created because you have a class here so what you do is you create a new link and you go here selector all links and you do cursor known with that the the windows cursor you're not gonna see it you're only gonna see your custom cos you created let's check it perfect guys that's all for today guys i hope you understood all i said if you have any doubts make sure to make a comment and i will try to help you okay and as i said i'm gonna post the copy past the custom code in the description and the link in the website designer so you can preview it and yeah if you have any doubts you can just check the original fire created okay take care guys see you on the next video

Channel: Leonardo Mattar

Views: 1,986

Keywords: Webflow, Custom Cursor, Web Design

Id: Tk1zHqBDyaE

Length: 9min 33sec (573 seconds)

Published: Tue Aug 18 2020