Dram's guide to custom cursors in Webflow

Hey, thanks! Nah, I believe this is impossible while using native interactions. It’s just the way they work.

Hi Dram, really love the tutorial – I have an issue that when the window size is adjusted the cursor lags behind / does not retain the true fix to my mouse position… I’ve checked your steps over and over so thinking it could be related to another element on my site? or am I missing something? I noticed when inputting X VH values the cursor dot does not fix to width of windows

Could be :slight_smile:

This is also plausible :smiley:

Unless you provide read-only link there is not much I can tell from your description.

I’m an idiot…was inputting both VH instead of VH / VW into the X/Y interactions.
Thanks you’re amazing! :smiley:

1 Like

Haha, it happens!

And thank you!

Hey Dram,

I’d love to know how Webflow’s update today affects the iPad Pro issue. Would it be best to only have the custom cursor visible in the Large Breakpoint 2 (1440px) and above? Or would that make it not visible to a lot of laptop users as well? Is using the custom code snippet you included still the best way to deal with this?

Love to hear your thoughts on this.

You should decide yourself really. You can check screen resolution stats for your userbase and figure out if they even use small desktops. To be honest if you want to target ipad pro in landscape it is quite unlikely that none of your users use smaller laptops with 1280 wide screen (all 13 inch macbooks)

1 Like

Hey there,

I’ve been working on this site for a millwork company and the site is meant to look like a CAD drawing program. I’ve successfully made a CAD style cursor that work great on Chrome on windows, but when I preview it on my mac running Chrome, the default mac cursor shows over top of my styled cursor.

Any ideas?

Here’s the link if you’re curious - https://sci-build.webflow.io/

1 Like

I have the same issue. The custom cursor works but on some desktops the original cursor appears as well. Let me know if you figured this out! Thanks!

@prontomedia @Denise_Volovitz
In my experience the default pointer appears sometimes when something interrupts the screen, like some notification even if it is not even related to chrome. Is this what you experience?

Realized I had something wrong in the cursor input. Got it, thanks!!

Hey thanks for the help @dram. That seems to be the case. Mac and iOS seem to do weird things with webflow.

1 Like

Hi @dram, I recently did this on our site and it’s amazing! Would you know a work around if the site scrolls horizontally?

Can’t seem to find a way through when having a circular follow cursor on a horizontal-scrolling site (desktop). Thanks!

Hi guys,
I followe the guide thanks to Dram but i’m not understand the last part to hover effects. I’m not sure that i made the right steps.

The best thing would be a video where i can see and follow the right steps

Please help me

I wonder why wouldn’t it work on a horizontally scrolling site? It should in theory! Can you share the site where this doesn’t work?

@kaiser sorry, creating video is a bit out of question now but if anyone would do that I would be very happy :smiley: What exactly gives you troubles?

Hi! I’ve tried adjusting on my horizontal scrolling site, but the custom cursor either is too fast or too slow when scrolling horizontally.

Here’s my read-only site: https://preview.webflow.com/preview/livertrue-films?utm_medium=preview_link&utm_source=designer&utm_content=livertrue-films&preview=cb735b74626f7fd13e957b5d9478c00e&pageId=5ecc8c7b8164c20cfec9e85b&mode=preview

(Classics tab scrolls horizontally when previewed – from PixelGeek’s tutorial)

Hi @Bianca_Are !

I’m not sure what you mean by cursor being too fast or slow but I’ve taken a look into your site. Your read-only link points to a page where your custom cursor seems not to be applied yet. So I’ve copied your cursor wrapper over to Page “Classics”.

I’ve noticed a delay when using your custom cursor, probably due to the 50% smoothing applied on the interaction. When you set smoothing to 0% for the cursor dot, it will always positioned where the regular cursor would be.

While horizontal scrolling, the custom cursor was drifting away. I’d suggest you change your cursor wrapper to position:fixed instead of absolute. Seemed to work at first glance.

Hope this helps.

there is no custom cursor applied to the page you have linked. But @ChrisT is correct - your cursor wrapper should be positioned as fixed not absolute.

I have used an custom SVG image for the cursor and i have a bugged click point, but a figure it out by put to click point of the vector in the center of the image in illustrator. This may be helpfull to everyone.

2020-06-09_18-08-51
2020-06-09_18-11-31

What animation settings did you use, I like how snappy yours feels