I received help from a user on here to add easing to a custom cursor I created, but i was using jQuery and the guy who helped me provided a vanilla JS solution which works great, but now I need to remove the easing from the cursor which has been worked on since then.
let cursor = document.querySelector('#custom-cursor');
document.addEventListener('mousemove', evt => {
document.body.classList.add('custom-cursor-moved')
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
$('#custom-cursor').remove();
} else {
cursor.style.display = 'block';
}
let {
clientX: x,
clientY: y
} = evt;
let scale = 1;
if (evt.target.matches('a,span,[onclick],img,video,i')) {
cursor.classList.add('active');
scale = 0.5;
} else {
cursor.classList.remove('active');
}
cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
});* {
cursor: none;
}
.custom-cursor-moved,
.custom-cursor-moved * {
cursor: none !important;
}
#custom-cursor {
display: none;
position: fixed;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}<div id="custom-cursor"></div>
<span>HOVER OVER ME</span>To remove the easing from the x/y change, you need to remove the translate(x,y)
cursor.style.transform = `scale(${scale})`;
you can then add the x/y directly (not via the translate)
cursor.style.top = `${y}px`
cursor.style.left = `${x}px`
Updated snippet
let cursor = document.querySelector('#custom-cursor');
document.addEventListener('mousemove', evt => {
document.body.classList.add('custom-cursor-moved')
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
$('#custom-cursor').remove();
} else {
cursor.style.display = 'block';
}
let {
clientX: x,
clientY: y
} = evt;
let scale = 1;
if (evt.target.matches('a,span,[onclick],img,video,i')) {
cursor.classList.add('active');
scale = 0.5;
} else {
cursor.classList.remove('active');
}
cursor.style.transform = `scale(${scale})`;
cursor.style.top = `${y}px`
cursor.style.left = `${x}px`
});#custom-cursor {
display: none;
position: fixed;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
border: 2px solid black;
border-radius: 50%;
opacity: 1;
background-color: #fb4d98;
pointer-events: none;
z-index: 99999999;
transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}
#custom-cursor.active {
opacity: 0.5;
background-color: #000;
border: 2px solid #fb4d98;
}<div id="custom-cursor"></div>
<span>HOVER OVER ME</span>The line causing the easing effect is this:
transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
So just deleting it should do what you want. Perhaps you were looking for a solution in the javascript itself if you're used to jQuery.
It is not possible to write css to affect the transition of the scaling but not the position. If that's what you need, you would have to wrap it in another element.
<div id="cursor-position"><div id="custom-cursor"></div></div>
#cursor-position {
position: fixed;
}
let cursorPosition = document.querySelector("#cursor-position");
let cursor = document.querySelector("#custom-cursor");
// ...
cursor.style.transform = `scale(${scale})`;
cursorPosition.style.transform = `translate(${x}px, ${y}px)`;