My goal is to have a custom object follow the mouse by changing the translate property and assigning x and y values to it. Everything works fine initially, the object appears and moves within the first frame. However, when scrolling down, the transform property changes but the object disappears. It only reappears when scrolling back to the top, acting as if it is tied to the top of the page.
I am using position fixed to keep the cursor in place while scrolling. I want the object to start moving from the cursor's position when scrolling stops or the mouse starts moving.
document.addEventListener("mousemove", e => {
document.querySelector('.mover').style.transform = `translate(${event.pageX}px, ${event.pageY}px)`
});.mover {
width: 50px;
height: 50px;
position: fixed;
left: -8px;
top: -6px;
transition-duration: .15s;
transition-timing-function: ease-out;
}
html {
cursor: none;
}
body {
background: #F5F9FF;
height: 3000px;
}<div class="mover">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12 ,2Z"></path>
</svg>
</div>