Streaming live at 10am (PST)

Dram's guide to custom cursors in Webflow

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

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


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: