This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Chris Conover
Posted Apr 20 - Read on Facebook

Hi, does anyone know how to change the cursor to a custom image?
I'm currently trying:
document.body.style.cursor = "url(images/myCursorImage.png), crosshair"
Here is my super simple project:
http://share.framerjs.com/kyucotu9coc4/

5 Comments

Benjamin Den Boer

Hey Chris Conover - you can edit the style.css file within the /framer folder of your prototype to change the cursor image link there. Alternatively, can also override the "cursor.png" that is within /framer/images.

Chris Conover

Thanks. Is there any way to do it dynamically in coffee script? I was hoping to change it to different images within the same prototype.

Chris Conover

Thanks for the help Benjamin Den Boer. I ended up creating different css classes to support different types of custom cursors. I also realized that my custom images were too large. The limit is 128x128px.
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url

Jordan Robert Dobson

#framerCode

Benjamin Den Boer

Ah, that's true Chris. Another thing you may be interested in is defining the cursor as a Framer layer. You'll have to account for the "mousemove" events to change the position accordingly, but the upside is that you could listen to Click events to design your own highlighting / clicking animations as well. (Scale on Click, for instance)

Read the entire post on Facebook