How To Create A Custom Cursor In Framer
In this guide, you'll learn how to set up a custom cursor on your Framer website without writing any code (because I did it for you). It's going to be pretty straightforward. We'll create a frame for the custom cursor, then apply a code override to transform it into the cursor for our website (yes, it includes hover states too).
Posted by
Nandi
Intro To The Override
Before we start, I want to mention that this code override will cause the frame you apply it to follow the cursor. Not only that, it'll change its opacity to 0.5 and its scale to 1.7 when hovering over an element that has either an "a" (link) tag or a "button" tag.
Therefore, if you have an interactive element and want the cursor to enter the hover state when hovering over it, you should assign it a "button" tag.
Where can you check the HTML tag of the element in Framer?
Good question.
After selecting an element, head over to the right panel and scroll down to the Accessibility section. You'll find the element's HTML tag there.
If your element has a link, an "a" tag will be automatically applied. For other cases, you'll need to manually set the tag.
Step 01 - Create A Cursor
When creating a custom cursor design, remember that this element will scale up and lose some opacity when you're hovering over interactive elements.
For my demonstration, I just created a simple 20x20 circle and colored it white. Of course, you're free to create any cursor design you fancy.
What's critical is to position it within the desktop breakpoint. Avoid nesting it further, and set its positioning to absolute. Centre it with ⌥ + H and ⌥ + V and make sure to deactivate all pins.
Check out my setup below:
If you're happy with your custom cursor, we can move on to the next step.
Step 02 - Create And Customize The Override
So, I've put together a custom code override with ChatGPT that accomplishes several things:
Makes the element follow the cursor.
It makes the element follow the cursor.
It applies a slight transition to the cursor-follow animation.
It hides the default cursor.
It changes both the scale and opacity of the element when hovering over something interactive (namely, elements carrying "a" or "button" HTML tags).
You can find and copy the code override here.
How to create and apply a code override in Framer?
Click on the cursor element that you just crafted. In the right panel, you'll see a code override section where you can create a new file.
You can paste the code override into the file you've just set up. If you want to tweak the scale and opacity changes on hover, you can adjust these lines here:
The "0.5" means that the opacity will change to 50% when hovering over interactive elements and the "1.7" means the scale will enlarge to 170% under the same circumstances. Feel free to use any other numbers that suit you. If you prefer not to change these values, simply write "1" for them.
Step 03 - Publish The Website
After you've done this, all that's left is to publish your website and your custom cursor will be live on the site.
Just remember, you'll need to add this custom cursor element to each page.
Conclusion
That's it! You've just learned how to create a custom cursor for your Framer website in a few straightforward steps. From designing the cursor to setting up a code override and applying it, you now have full control over the cursors on your site.
Remember, the cool part about this is its flexibility. Tailor the cursor's design to suit your needs and aesthetic preferences, making your website stand out from the crowd.
Learning to use code overrides in Framer not only offers the potential for unique cursor designs but opens up a world of other interactive possibilities. Feel free to experiment and dive deeper.
