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

What is Framer? Join the Community
Return to index
Scott Savarie
Posted Dec 05 - Read on Facebook

Made this to add to your app.js file to get a nice touch-looking cursor.

document.documentElement.style.cursor = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA4CAYAAABdeLCuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJBNjkyMzg3NTUzRjExRTM4QUE5RkVDODRFMkYwMzcyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJBNjkyMzg4NTUzRjExRTM4QUE5RkVDODRFMkYwMzcyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkE2OTIzODU1NTNGMTFFMzhBQTlGRUM4NEUyRjAzNzIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkE2OTIzODY1NTNGMTFFMzhBQTlGRUM4NEUyRjAzNzIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz76x6Z4AAAH0ElEQVR42tyaXUwT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")26 26, default';

6 Comments

Scott Savarie

Note: the hot area for it seems to be in the top left rather than the middle. If anyone knows how I could fix it, let me know!

Koen Bok

You should be able to fix it like this: http://stackoverflow.com/questions/6887403/custom-cursor-interaction-point-css-jquery

Maybe better to just provide the image rather then all that base64 :-)

Aaron Carámbula

This is a great example of why I want to be able to add js files for framer to include in all my prototypes. Including the image is not great because it makes adding this nice but minor enhancement a multi-step process. The problem is the length of the code making app.js less pretty, but including things like this and Cemre's snippets would make time from photoshop to prototype so much shorter.

Scott Savarie

I saw a Framer.js template someone made in Middleman. Not exactly what you're thinking, but one could edit the config.rb to initiate a project with whatever files you wanted included.... Maybe?

Scott Savarie

Koen Bok Thanks! That worked (even with base64). Edited the original snippet I posted.

Read the entire post on Facebook