Fixing the Classic Custom Cursor Webflow Issue

Custom cursors in webflow are fun and easy to do with the native mouse move in viewport animations making your site more interactive and engaging for your users. To take it to the next level by checking the browser type rather than using webflow's native breakpoint settings.

Feb 9, 2023 • 5 min read
a black cat illustration - blog post image for webflow custom cursor

The custom cursor is powerful but most implementations are flawed.

How it is usually done.

Most implementations of the custom cursor will tell you to toggle to the mobile phone breakpoint and hide the div with the custom cursor that you've built. The classic issue with this is that the custom cursor will disappear when a desktop user shrinks their viewport to the size of a mobile device.

This can be frustrating for both the user and the designer, as the custom cursor is an important part of the user experience, or ux, and without it you cannot test the mobile site on a desktop browser. To fix this issue, we need to check the user's browser type, rather than relying on Webflow's native breakpoint settings. The native breakpoint settings only check the viewport height and width- which is where the problem lies.

To check for the browser type rather than the dimensions of the screen see this code below which defines the function of "isMobileBrowser".

📋

function isMobileBrowser() {  
var mobileDevices = [    
"Android",    
"iPhone",  
"iPad",    
"iPod",  
"BlackBerry",    
"Windows Phone",    
"Mobile",    
"webOS",  
"tablet",    
"opera mini",    
"opera mobi",  
"iemobile",    
"mobileexplorer",  
"palmsource",    
"smartphone",    
"bolt",    
"iris",    
"kindle",    
"lge vx",    
"midp",    
"maemo",  
"mmp",    
"mobile",  
"netfront",    
"pda",  
"pocket",  
"psp"  ];  

var userAgent = navigator.userAgent.toLowerCase();  for (var i = 0; i < mobileDevices.length; i++) {  
if (userAgent.indexOf(mobileDevices[i].toLowerCase()) !== -1) {      return true;    }  }  
return false;
}

This code uses the DOMContentLoaded event to ensure that the custom cursor is hidden as soon as the page has finished loading. The isMobileBrowser function is then called to check if the user is on a mobile device, and if they are, the .custom-cursor element is hidden.

Once you have defined the isMobileBrowser function, you can then use it to hide the custom cursor element if the user is on a mobile device. You can do this by adding the following code to your website:

📋

document.addEventListener("DOMContentLoaded", function() {
if (isMobileBrowser()) {    
document.querySelector(".custom-cursor").style.display = "none";  }
});

Now make sure that your custom cursor div is set to anything other than display none and publish your site. At this point you should see the custom cursor on your mobile sized desktop browser but not from your mobile phone.

Copy the full code snippet below into the footer of your webflow project settings so it shows up on all pages.

📋

<script>

function isMobileBrowser() {  
   var mobileDevices = [    
      "Android",    
      "iPhone",  
      "iPad",    
      "iPod",  
      "BlackBerry",    
      "Windows Phone",    
      "Mobile",    
      "webOS",  
      "tablet",    
      "opera mini",    
      "opera mobi",  
      "iemobile",    
      "mobileexplorer",  
      "palmsource",    
      "smartphone",    
      "bolt",    
      "iris",    
      "kindle",    
      "lge vx",    
      "midp",    
      "maemo",    
      "mmp",    
      "mobile",    
      "netfront",    
      "pda",    
      "pocket",    
      "psp"  
];  

var userAgent = navigator.userAgent.toLowerCase() ;  

for (var i = 0; i < mobileDevices.length; i++) {  
   if (userAgent.indexOf(mobileDevices[i].toLowerCase()) !== -1) {      
       return true;    
     }  
 }  

  return false;

}

document.addEventListener("DOMContentLoaded", function() {
  if (isMobileBrowser()) {    
     document.querySelector(".custom-cursor").style.display = "none";  
  }
});

</script>

To wrap this up, custom cursors can greatly enhance the UX of your website but don't get caught with the wrong display function logic. With this simple code you can take your custom cursor effects to the next level and create a flawless user experience for your users.

© Mystic Ether All rights reserved (2023)