CODEWITHSUNDEEP
javascripthtmljquerycss
gjjr
gjjr

Reputation: 569

How to remove easing from custom cursor

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>

Upvotes: 1

Views: 516

Answers (2)

fdomn-m
fdomn-m

Reputation: 28611

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>

Upvotes: 3

ivorhoulker
ivorhoulker

Reputation: 77

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)`;

Upvotes: 0

Related Questions