# help with Custom Mouse Cursor with Tracking

**URL:** <https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582>\
**Category:** web dev\
**Created:** [May 6, 2023, 9:02pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582 "2023-05-06T21:02:47Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![AmiiboAmigos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/amiiboamigos/32/19755_2.png) [@AmiiboAmigos](https://forum.kirupa.com/u/AmiiboAmigos)\
**Post date:** [May 6, 2023, 9:02pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/1 "2023-05-06T21:02:47Z")

</div>

I seem to be having issues in Dreamweaver.  
Is it me, or is this code not compatible somehow in Dreamweaver?  
🤔  
probably me most likely.

```auto
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="veiwport" content="width=device-width, initial-scale=1.0">
<title>Cursor Follower</title>
	<style>
		#customCursor {
			--cursorXPos: 0;
			--cursorYPos: 0;
			position: fixed;
			top: -25px;
			left: -25px;
			transform: translated3d(var(--cursorXPos), var(--cursorYPos), 0);
			transition: tranform 2s cubic-bezier(0.75, 0.885, 0.32, 1.275);
			width: 50px
		}
	</style>
</head>
<body>
	<div id="customCursor">
		<img src="UFO.png" alt="customCursor">
	</div>
	<script>
		let mouseX = 0
		let mouseY = 0
		let customCursor = document.querySelector("#customCursor");
		document.addEventListener("mousemove", setMousePosition, false);
		function moveCursor(timestamp){
			customCursor.style.setProperty("--cursorXPos",mouseX + "px");
			customCursor.style.setProperty("--cursorYPos",mouseY + "px");
			requestAnimationFrame(moveCursor);
		}
		function setMousePosition(event){
			mouseX = event.clientX;
			mouseY = event.clientY;
		}
	</script>
	<style>
	</style>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 6, 2023, 9:21pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/2 "2023-05-06T21:21:02Z")

</div>

When you run it in the browser, what happens? Dreamweaver is your code editor, and interactive content typically will not work inside it.

---

<div class="post-metadata">

**Author:** ![AmiiboAmigos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/amiiboamigos/32/19755_2.png) [@AmiiboAmigos](https://forum.kirupa.com/u/AmiiboAmigos)\
**Post date:** [May 6, 2023, 9:31pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/3 "2023-05-06T21:31:54Z")

</div>

The png of a UFO is the only thing that shows up, not even when I downsized it to 50 px.

This is unusual, I have done something similar to this before. For some reason while following the tutorial nothing happens. 🥲

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 7, 2023, 12:11am UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/4 "2023-05-07T00:11:05Z")

</div>

That is expected unfortunately. You should use your browser as your source of truth for what your page looks like. Dreamweaver’s preview engine doesn’t understand a lot of modern techniques like CSS custom properties, for example.

Using Dreamweaver as a code editor is fine, but you shouldn’t rely on it to give you an accurate preview experience.

---

<div class="post-metadata">

**Author:** ![AmiiboAmigos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/amiiboamigos/32/19755_2.png) [@AmiiboAmigos](https://forum.kirupa.com/u/AmiiboAmigos)\
**Post date:** [May 7, 2023, 12:21am UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/5 "2023-05-07T00:21:05Z")

</div>

Well, it’s not just that. Whenever I preview the code on my browser, in my case edge, I still see the same thing. I’m convinced I’m missing something in my code, but I’m not sure.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 7, 2023, 2:46am UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/6 "2023-05-07T02:46:27Z")

</div>

Does your browser’s console show any errors?

---

<div class="post-metadata">

**Author:** ![AmiiboAmigos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/amiiboamigos/32/19755_2.png) [@AmiiboAmigos](https://forum.kirupa.com/u/AmiiboAmigos)\
**Post date:** [May 7, 2023, 2:57am UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/7 "2023-05-07T02:57:54Z")

</div>

Not on my side

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 7, 2023, 7:08pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/8 "2023-05-07T19:08:57Z")

</div>

I see what is going on here! You were very close 🙂

In your CSS, it is **translate3d** (not **translated3d** ):

```auto
transform: translated3d(var(--cursorXPos), var(--cursorYPos), 0);

```

Next, you have your timer loop defined in `moveCursor`, but you never actually call it to kick it off. Add a call to `moveCursor()`, and that will get the party started! 🥳

Here is my version that works:

```auto
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="veiwport" content="width=device-width, initial-scale=1.0">
  <title>Cursor Follower</title>
  <style>
    #customCursor {
      --cursorXPos: 0;
      --cursorYPos: 0;
      position: fixed;
      top: -25px;
      left: -25px;
      transform: translate3d(var(--cursorXPos), var(--cursorYPos), 0);
      transition: tranform 2s cubic-bezier(0.75, 0.885, 0.32, 1.275);
      width: 50px
    }
    img {
      width: 100px;
      height: 100px;
      background-color: black;
    }
  </style>
</head>

<body>
  <div id="customCursor">
    <img alt="customCursor">
  </div>
  <script>
    let mouseX = 0
    let mouseY = 0
    let customCursor = document.querySelector("#customCursor");

    document.addEventListener("mousemove", setMousePosition, false);

    function moveCursor(timestamp) {
      customCursor.style.setProperty("--cursorXPos", mouseX + "px");
      customCursor.style.setProperty("--cursorYPos", mouseY + "px");

      console.log("Code called! " + mouseX + " " + mouseY);

      requestAnimationFrame(moveCursor);
    }

    function setMousePosition(event) {
      mouseX = event.clientX;
      mouseY = event.clientY;

      //console.log("Mouse moving!");
    }

    moveCursor();
  </script>
  <style>
  </style>
</body>

</html>

```

---

<div class="post-metadata">

**Author:** ![AmiiboAmigos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/amiiboamigos/32/19755_2.png) [@AmiiboAmigos](https://forum.kirupa.com/u/AmiiboAmigos)\
**Post date:** [May 8, 2023, 1:47pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/9 "2023-05-08T13:47:14Z")

</div>

Its working!!

Although I noticed that it doesn’t have that smooth lag transition. Is that another Dreamweaver issue?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 8, 2023, 2:56pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/10 "2023-05-08T14:56:03Z")

</div>

> [@kirupa](#):
>
> ` transition: tranform 2s`

Another small misspelling 🙂 It should be **transform**.

---

<div class="post-metadata">

**Author:** ![AmiiboAmigos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/amiiboamigos/32/19755_2.png) [@AmiiboAmigos](https://forum.kirupa.com/u/AmiiboAmigos)\
**Post date:** [May 10, 2023, 6:38pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/11 "2023-05-10T18:38:05Z")

</div>

Ah I see, it’s works perfectly!  
Thank you!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 10, 2023, 8:20pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/12 "2023-05-10T20:20:53Z")

</div>

Glad it works! I wish there were ways of catching errors in CSS in the same way we can for JavaScript.

---

<div class="post-metadata">

**Author:** ![AmiiboAmigos](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/amiiboamigos/32/19755_2.png) [@AmiiboAmigos](https://forum.kirupa.com/u/AmiiboAmigos)\
**Post date:** [May 10, 2023, 8:31pm UTC](https://forum.kirupa.com/t/help-with-custom-mouse-cursor-with-tracking/658582/13 "2023-05-10T20:31:57Z")

</div>

Same, would definitely make the job easier!
