The Quick Guide to Custom Cursors in Webflow

The complete Guide to Custom Cursors in Webflow

Websites are everywhere. And because of that it gets harder and harder to grab the Visitors Attention and keep them on your Site & eventually convert them into a Customer. So how do we get the limited Resource that is the Attention of our Visitors? We have to do something special, something that keeps them engaged with our Website. Beautiful visuals, interesting and captivating copy and some fancy Animations are all part of the Formula that keeps the User engaged. In this Article we will focus on the last part of that Formula: Animations & Interactions!

One of my personal favorites is replacing the bland and boring cursor that comes with the Users Operating System with a unique, eye-catching & engaging custom Cursor that features some unique Interactions based on the Elements it’s hovering over. And the best part about using custom Cursors is that setting them up is not even as difficult as it sounds, and only requires 3 little Lines of custom HTML Code to get to work seamlessly.

‍

What are custom Cursors?

Now before we begin, what are custom Cursors?

Well, a custom Cursor can be anything from a PNG or SVG File to a styled Div Block that interacts with the Element on our Page. If you go for the Image Route, make sure to use an SVG File so it looks clean no matter the size of the Image. I’ve personally used an Image-Based custom Cursor in an upcoming Webflow Template called Bento and it looks and works phenomenal! 

And of course we have to disable the regular Cursor in the Body Element and on all additional Elements that have a different Cursor Type applied by default, such as Links, Tabs, Form Inputs, etc,...

To tie it all together we create a very basic Animation that simply moves the Custom Cursor Element in our Viewport depending on the Position of the Mouse, as well as a small bit of custom Code and we’ve got ourselves the beginning of an awesome custom Cursor.

‍‍

Building the Cursor

Now that we know how a custom cursor works, let’s start building it directly in Webflow.

To get started add a Div Block to your Page and give it the Class Cursor Wrapper. Set the Display to Flex and align and justify it to the Center.

Now head to the Position Options and set it to Fixed -> Full. Set a Z-Index of 9999. This ensures that the Cursor will always be above all other Elements.

Now to create the actual Cursor.

Add another Div Block inside the newly created Cursor Wrapper and give it the Class Cursor. This Div will be our Custom Cursor, you can style it however you like. I am simply going to create a clean White Dot. Give it a Width and Height of 36px. Set the Position to Relative. Go to the Backgrounds Tab in the Design Panel and set the Background Color to White.

The last step to finish this simple Cursor Design is to turn the square into a circle. We do this by giving it a Border Radius of 50%.

That is the Basic Design finished.

Now to add the small bit of custom Code that will make sure that the Cursor will work properly.

Add an HTML Embed into the Cursor Wrapper. Open the Code Editor by clicking the Wheel Icon on the Element and then paste this Piece of Code into it:

‍

<style>
.cursor-wrapper {pointer-events: none;}
</style>

‍

What this piece of code does is simply telling the Windows or Mac Cursor to not interact with the Cursor Wrapper Class and everything within it. We have to do this to make sure that we can actually click on Links and interact with the Website. If we do not use this Piece of custom Code our (invisible) Pointer would always click on the Cursor Wrapper Div instead of the Element below it, breaking the entire thing.

‍

Before we build the Animation, we also have to disable the Default Cursor in the Body Element. Select the Body All Pages Tag inside the Body Element and scroll all the way down in the Style Panel. Set the Cursor to None. Once you start adding Elements like Links, Tabs and so on you will also have to do this Step to each Element as they will have some default Cursor Styling.

‍

To save a lot of time it is recommended to select the All Links Tag and apply the Cursor: None Styling to it. Doing this will result in not having to apply the Style to all Link Elements.

‍

Building the Cursor Movement

Now that we finished building the Cursor Design & even added the HTML Embed to make it work properly, we have to make sure we can actually move the Cursor and use it to interact with the Website.

‍

Go to the Interactions Tab and add a new Mouse Move in Viewport Page Trigger. Add a new Mouse Interaction and call it Custom Cursor Movement.

Select the Cursor Class and add a new Move Transform in the Mouse X Actions. Select the 0% State and set the Transform X Value to -50vw. Now select the 100% State and set the Transform X Value to 50vw. If you enable Live Preview you will see that you can now move the Cursor from left to right.

Now let's do the same process for the Mouse Y Actions. Select the Cursor Element and add a Move Transform. Select the 0% State, but this time we’ll add a Value of -50vh to the Transform Y Value. Select the 100% State and add a 50vh Transform Y Value. If you preview the Animation you can now freely move the Cursor on the Page.

Click on Done and save the Animation. Depending on your needs we can also add some smoothing to the Animation. We don’t want any smoothing for this Example, so let’s set it to 0%.

‍

Preview your Website once more and check if everything works. The Cursor should now move freely across the Screen.

‍

Now that we have the Cursor working you can add individual Animations to your Elements like Buttons, Links, Card, etc,..., to spice up your Design and make the Website much more engaging for the User.

If you have a Website that has many many Pages it’s also recommended to turn the Custom Cursor into a Component.

‍

We have this Example available as a free Clonable for you to copy here.

And if you don’t wish to start from scratch on your next Webflow Project we have some awesome Webflow Templates available right here.

‍