Dram's guide to custom cursors in Webflow

Hey @dram thanks for making this tutorial! I’ve always wanted to do this. I followed your steps and wanted to ask how you got your dot to expand from the center on hover. Everything else is working normally.

My cursor expands from the upper left corner of my wrapper div. I’m thinking the solution lies with my interaction setup because the cursor lines up perfectly in the idle state.

Any idea what’s causing this? I appreciate any insight thanks!

The only links that have the ix hover are the text link and the hamburger in the nav bar

https://preview.webflow.com/preview/cartandcraft?utm_medium=preview_link&utm_source=designer&utm_content=cartandcraft&preview=51f3c2acf7b9c36eb3a7a1923d7fdf74&mode=preview

Hi!

Setting your dot to position:absolute would fix this.

Ah yes it worked thanks! If I’m not mistaken, your blog article is missing this piece? You mentioned position for the outer circle, but not the dot?

It has probably something to do with the way you have your page interaction and cursor-wrapper set up. It is different from my structure. Cursor wrapper is not set to full position, interactions work not from center but from the upper left corner etc

1 Like

Hi @dram! I’ve used your tutorial on my site; thanks so much!

The mouse was working great for a few months, but now the cursor is lagging behind the mouse position. I’ve played around with the xy position (all at 50) in the animation settings, and changing the smoothing doesn’t seem to affect anything. I’ve also checked that in the animation configuration itself that the elements use the correct vh/vw movement.

Thoughts?! I have to launch soon for a client and need to figure it out first.

Link to shared site here

HI @Heather_Jansen !

First of all you have to set your .cursor wrapper to flex. Second, remove smoothing from your “center” cursor interaction. It should work now.

Thank you so much, @dram! That worked 100%. :slight_smile:

Hey Dram, hope all is well. Awesome stuff here! My custom cursor has rendered other elements ‘unclickable’. Can you help me out here? https://stephenflynn-portfolio.webflow.io/

Hi mate! You seems to have missed #5 in the tutorial.

Cheers!

Hi Dram! having a big issue here and cant seem to fix. Ive implemented my cursor, it works fine but as soon as I scroll or move further down the page the cursor seems to not follow and just stays at the top of the page until i scroll back up. Its really weird and have absolutely no idea why! Any ideas?

https://preview.webflow.com/preview/weareseams?utm_medium=preview_link&utm_source=designer&utm_content=weareseams&preview=8529d416cb5149c6d18dba4df23f2529&workflow=preview

Hi,

remove transforms from your body element.

1 Like

Ah man, something so simple! lol this has literally been driving me mad, i thought it could have been down to custom code in the body but completely missed the transform. Thanks Dram! Fixed

1 Like

Hey @dram

Love this cursor. Just getting used to wordpress and tweaking it.

My cursor still sits behind my nav bar and therefore sits behind my slide out menu.

Is there a quick fix?

Read only

Thanks

Aidan

Hi Dram, huge thanks for you guide. I was wondering if there is a way to make appear the custom cursor only on a specific section of the site that as not a specific height but is responsive and to have the normal cursor on the other parts. Also I’d ask something not crucial but there is a way to hide momentarily the cursor wrapper so I can continue clicking on the reste of the page in the designer?

Huge Huge Thanks,

Roberto

Hello,

if there is a way to make appear the custom cursor only on a specific section of the site

Hide the cursor by default, create “on hover” interaction for the desired section that would switch the cursor wrapper on and then off on hovering out.

there is a way to hide momentarily the cursor wrapper so I can continue clicking on the reste of the page in the designer?

One part of the tutorial mentions this. The " Making sure the cursor elements do not interfere with the interactive objects on the page" section.

Cheers

Hello all,

Thank you @dram for this very helpful guide. Everything works well, except for the iPad Pro fix – the cursor is still appearing. Does it still work for those who applied the same method? Has something changed since 2019 regarding this code?

Thanks a lot!