Hey everyone!
What I’m trying to do:
I’d like to make the compass icon rotate following the cursor (aim at the cursor).
I was looking for a solution inside the interactions in webflow but couldn’t find the perfect interaction combo.
With the help of chatGPT I used the custom code that does exactly what I want (hooray!).
<script>
document.addEventListener('DOMContentLoaded', function () {
const rotatingObject = document.getElementById('compass');
const rect = rotatingObject.getBoundingClientRect();
const elementX = rect.left + rect.width / 2;
const elementY = rect.top + rect.height / 2 + window.scrollY; // Consider the scroll position
document.addEventListener('mousemove', function (event) {
const mouseX = event.clientX;
const mouseY = event.clientY;
const angle = Math.atan2(mouseY - elementY, mouseX - elementX);
const rotation = angle * (180 / Math.PI);
rotatingObject.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`;
});
});
</script>
But there is a new issue…
Issue:
The compass Icon is located in the nav bar, 40px from the top. When I start moving the mouse, the icon disobeys the margin rule and sticks to the top. This can be visible in the example. I tried different combinations of margins, positioning etc.
How can I make the Icon stay in the dedicated position?
What causes it to move?
Any help would be much appreciated!