Dram's guide to custom cursors in Webflow

Community resources Webflow Tips
21

How did you manage to get a the click text appearing? Is there any chance you could make it clonable

22

This is some amazing stuff. Throwing you guys another grenade here…

Changing the cursor to either a Left or Right Arrow when hovering on a slider and clicking to either go forward or backward on a slider. : )

5 Likes
23

Tell us how, please! :smiley:

24

5 posts were split to a new topic: How to use tablet layout for iPad Pro

25

Hello -

I have been trying pretty tirelessly to implement this into my site, but unfortunately it just isn’t working. All of the example Webflow pages and posts I see are of sites with no scroll, which I believe is my issue.

My site is NOT built into a Section or Div that is Flex with 100vh. Is there any other way around this? I would love to see a scrollable page example, if thats even possible.

Thank you!

26

Hi!

It doesn’t matter if the site content is long or short, the cursor will work. I must assume you missed some steps from the tutorial. Otherwise you will need to explain what exactly doesn’t work and provide read-only so that it is possible to have a look.

27

Hi @dram, first of all, thanks for this tutorial! Very easy to follow, it’s great.

But I’m currently searching for a way to make a similar cursor interaction like the one from the following website:

I like how the typeface color is affected based on a circular shape that follows the cursor and didn’t know if there was a name this effect. Do you know where I may be able to find more documentation on an effect like this?

Any help is very much appreciated.

Cheers!

28

Sorry, can’t say for certain. I’d look into text clipping and masking as a starting point. Cheers!

29

Perfect, thanks again!

1 Like
30

Hey @dram I’m back at this, I made a similar version of this cursor but I wanted it to appear only on one section of my website.
It works almost fine, but somehow, the original cursor (set on none for every single elements in this section) re-appears after around 10sec, regardless of mouse movement.
An idea why is that?

Scroll down to last section with logos grid to see the cursor in action:
My site

31

Will you share your read-only?

32

Yes here it is:
read-only

But I noticed this doesn’t happen on my new macBook pro, only on my old imac 2010.
Although I run the same version of chrome on both. :open_mouth:

33

Yeah, for me it works as intended - cursor is hidden only on the central part of that block, once you are on its sides it changes to default.

34

Hi Dram

Thanks for you tutorial, I got it working first time… the question I have… is it possible to change the cursor for a certain section / div? then swap back to your main “styled” cursor at all? so like two custom cursors?

Thanks

Tommy

35

I’d say why not? The way I’d do it is create your second cursor following the tutorial, hide it initially and then on hover on certain sections make an interaction that would reveal your second cursor version while hiding main cursor. On hover out this interaction will do vice versa - hide alternative cursor while revealing your main cursor

1 Like
36

Smashing, I will give that a try tomorrow

1 Like
37

I tried creating this cursor, and the x and y are working, but its very jumpy/glitchy when it moves. It keeps jumping between x and y positions (when there’s a value for x, y is 0 and vice versa). Did I skip something?

38

I have no idea :slight_smile:

If you want me to take a look please post your read-only link.

39

I ended up figuring it out. Could you help with buttons? Whenever I want to click on a button with the cursor, it won’t select, and the same with forms.

https://preview.webflow.com/preview/mjn-ink?utm_medium=preview_link&utm_source=designer&utm_content=mjn-ink&preview=7a8484034146498cebd4854cc65f4e99&pageId=5e50033553238243ff1edc76&mode=preview

40

Could it be that you have forgotten to apply pointer-events part? Cannot have a look rn