# Spot the bug - #137: Spaceship Transform Mover

**URL:** <https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287>\
**Category:** web dev\
**Created:** [September 6, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287 "2026-09-06T07:00:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [September 6, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287/1 "2026-09-06T07:00:08Z")

</div>

Why is my disco spaceship stuck in place?

```js
const ship = document.querySelector('#spaceship');
let posX = 0;

function fly() {
  posX += 4;
  ship.style.transform = `translateX(${posX})`;
  requestAnimationFrame(fly);
}

requestAnimationFrame(fly);

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [September 7, 2026, 7:40am UTC](https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287/2 "2026-09-07T07:40:22Z")

</div>

The `translateX` needs a unit. You’re missing `px` in the template literal.

Look. Overwriting `ship.style.transform` like that means any other transforms, like a `rotate` or `scale`, would get wiped out. You’d have to manage all of them in one string.

I usually just use a wrapper element for movement if I know I’m going to have other transforms on the inner element. Or keep the `translateX` value in a separate variable and combine it with others.

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [September 7, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287/3 "2026-09-07T08:00:17Z")

</div>

**Spot the Bug answer:** The CSS transform property needs a unit, such as ‘px’, to correctly apply the translation.

**The fix:**

```js
ship.style.transform = `translateX(${posX}px)`;

```

**Why:**  
Without a unit, the browser does not know how to interpret the numerical value for the translation. Adding ‘px’ specifies that ‘posX’ should be treated as pixels, allowing the spaceship to move across the screen.

**First-answer leaderboard**

1. @Apexcodes - 6 (firsts) 🏆
2. @kirupa - 6 (firsts) 🏆
3. @emmawalter5 - 3 (firsts)
4. @adnanahmed - 2 (firsts)

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [September 7, 2026, 12:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287/4 "2026-09-07T12:00:20Z")

</div>

The missing unit on `translateX` is a classic. I’ve seen similar issues where a `line-height` without a unit causes unexpected layout shifts.

---

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [September 7, 2026, 6:40pm UTC](https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287/5 "2026-09-07T18:40:21Z")

</div>

Clean

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [September 7, 2026, 10:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287/6 "2026-09-07T22:00:19Z")

</div>

The `transform.position` assignment inside `Update()` is the bug. Should be `transform.Translate()` or `Rigidbody.MovePosition()` for physics.

---

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [September 7, 2026, 10:40pm UTC](https://forum.kirupa.com/t/spot-the-bug-137-spaceship-transform-mover/683287/7 "2026-09-07T22:40:18Z")

</div>

Look. Direct assignment to `transform.position` bypasses the physics engine entirely. That’s how you get things clipping through walls.