I'm currently working on improving the transition of the cursor for a smoother experience. Right now, the size abruptly changes when hovered over the target element. Any suggestions on how I can achieve a smoother increase in size, with a better animation than what is happening currently? Below is the current code snippet, along with a gif showcasing the current behavior: https://i.sstatic.net/E1v2Z.gif
<style>
.cursor {
content: " ";
position: absolute;
background: #ffffff;
width: 16px;
height: 16px;
border-radius: 100%;
user-select: none;
pointer-events: none;
transform: translate(-50%, -50%) scale(0.9);
z-index: 9999;
transition: ease-in-out 0.3s;
}
</style>
<div class="cursor"><span id="myspan"></span></div>
<script>
var cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.pageX + 'px';
cursor.style.top = e.pageY + 'px';
});
</script>
<div class="div-33">
<a href="" class="a1" style="cursor:none">
<span class="span-11 cursorHover div-34">
LET’S GET SOMETHIN’
<br />
COOKIN’.
<img src="imgs/im/Vector.png" class="arrow mt-4" />
</span>
</a>
</div>
<script>
var cursor3 = document.querySelector('.cursorHover');
span = document.getElementById("myspan");
txt = document.createTextNode("Say hi!");
cursor3.addEventListener('mouseenter', () => {
var element = document.querySelector('.cursor');
element.style.transform = 'scale(6)';
element.style.background = '#FF6E1D';
span.appendChild(txt);
});
cursor3.addEventListener('mouseleave', () => {
var element = document.querySelector('.cursor');
element.style.transform = '';
element.style.background = '';
span.removeChild(txt);
})
</script>