JavaScript Animation Basics: Positioning and Moving Elements

In a community I participate in, a developer recently ran into a classic hurdle while building a simple 2D game. They asked: “I want to make an aircraft start at position (x, y) = (0, 100) and make it move in the right direction ->. How do I do this in JavaScript?”

This is a fundamental logic problem that touches on coordinate systems, the DOM, and the browser’s rendering loop. Here is how to solve it using two different industry-standard approaches.

The Immediate Fix (DOM-Based)

If you are using a standard <img> or <div> tag for your aircraft, you must use CSS absolute positioning combined with a JavaScript animation loop.

// Illustrative example — ES6+ (Modern Browsers)
const aircraft = document.getElementById('aircraft');
let posX = 0;   // Starting X
let posY = 100; // Starting Y
const speed = 2; // Pixels per frame

// 1. Initialize position
aircraft.style.position = 'absolute';
aircraft.style.top = `${posY}px`;
aircraft.style.left = `${posX}px`;

function move() {
    // 2. Update logic
    posX += speed;

    // 3. Render update
    aircraft.style.left = `${posX}px`;

    // 4. Call next frame
    requestAnimationFrame(move);
}

move();

---

Solution 1: DOM Manipulation with requestAnimationFrame

This approach is best for simple UI elements or apps where you only have a few moving parts.

Why it works:

• Coordinate System: In web development, the origin (0,0) is the top-left corner. Increasing left (X) moves an object right; increasing top (Y) moves it down.
• requestAnimationFrame: Unlike setInterval, this method syncs with your monitor’s refresh rate (usually 60fps), preventing “screen tearing” and saving battery life when the tab is inactive.
• Units: Beginners often forget to append "px" to their style values. JavaScript numbers must be converted to strings with units for the browser to render them.

---

Solution 2: The HTML5 Canvas API

For games or applications with many moving objects, manipulating the DOM directly is slow. The Canvas API is the professional choice for high-performance “aircraft” movement.

// Illustrative example — HTML5 Canvas / ES6+
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let aircraft = {
    x: 0,
    y: 100,
    width: 50,
    height: 30,
    speed: 3
};

function animate() {
    // 1. Clear the previous frame
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 2. Update position
    aircraft.x += aircraft.speed;

    // 3. Draw the aircraft (a blue rectangle representing the plane)
    ctx.fillStyle = 'blue';
    ctx.fillRect(aircraft.x, aircraft.y, aircraft.width, aircraft.height);

    // 4. Repeat
    requestAnimationFrame(animate);
}

animate();

Why it works:

• The “Clear” Step: In Canvas, you aren’t moving an object; you are redrawing the entire scene every frame. clearRect is essential to prevent the aircraft from leaving a “trail” across the screen.
• State Management: By using an object (aircraft), you can easily group your X, Y, and Speed variables, making the code easier to maintain as you add more features (like gravity or rotation).

---

Edge Cases and Common Pitfalls

1. Screen Boundaries

If you don’t add a boundary check, your aircraft will fly off the screen forever. You can “wrap” the aircraft or stop it:

// Reset to start when off-screen
if (posX > window.innerWidth) {
    posX = -aircraftWidth;
}

2. Monitor Refresh Rates (Delta Time)

A faster monitor (144Hz) will run requestAnimationFrame more often than a 60Hz monitor, making your aircraft move faster on high-end hardware. To fix this, developers use deltaTime:

let lastTime = 0;
function move(timestamp) {
    let deltaTime = timestamp - lastTime;
    lastTime = timestamp;

    // Move 100 pixels per second, regardless of frame rate
    posX += (100 * deltaTime) / 1000;
    aircraft.style.left = `${posX}px`;
    requestAnimationFrame(move);
}

Related Questions

Which version of JavaScript do I need? The solutions above use ES6 (ECMAScript 2015) features like const, let, and template literals (backticks). These are supported in all modern browsers (Chrome, Firefox, Edge, Safari). If you must support Internet Explorer 11, you would need to use var and string concatenation (+ 'px').

Should I use CSS Transitions instead? If you know exactly where the aircraft is going (e.g., move from 0 to 500 over 5 seconds), CSS Transitions or Keyframes are more performant because they run on the browser’s compositor thread. Use JavaScript only if the movement is interactive or dynamic (e.g., controlled by a keyboard).

How do I make it move “in the right direction” diagonally? To move diagonally, simply increment both x and y in your loop.

• posX += 1;
• posY += 1; This will move the aircraft towards the bottom-right of the screen.