Demo of animated Image position in JavaScript

Click the original Start control. The image moves down and then right while its X/Y offsets are displayed.

Help icon used for animated movement demo

Return to tutorial on Image Position

JavaScript

const image = document.getElementById('i1');
const area = document.getElementById('animation-area');
const output = document.getElementById('msg');
const startButton = document.getElementById('start');
let running = false;

function updateOutput() {
  output.textContent = `X: ${image.offsetLeft} Y: ${image.offsetTop}`;
}

function animate() {
  if (!running) return;

  const step = 2;
  const maxTop = Math.max(0, area.clientHeight - image.offsetHeight);
  const maxLeft = Math.max(0, area.clientWidth - image.offsetWidth);
  const top = image.offsetTop;
  const left = image.offsetLeft;

  if (top < maxTop) {
    image.style.top = `${Math.min(maxTop, top + step)}px`;
  } else if (left < maxLeft) {
    image.style.left = `${Math.min(maxLeft, left + step)}px`;
  } else {
    running = false;
    startButton.disabled = false;
  }

  updateOutput();
  if (running) requestAnimationFrame(animate);
}

startButton.addEventListener('click', () => {
  if (running) return;
  running = true;
  startButton.disabled = true;
  requestAnimationFrame(animate);
});

updateOutput();

HTML

<div id="animation-area" style="position:relative; min-height:420px; border:1px solid #ccc; overflow:hidden;">
  <img src="images/help.jpg" id="i1" alt="Help icon used for animated movement demo"
       style="position:absolute; left:20px; top:20px; max-width:80px;">
</div>
<button type="button" id="start">Start</button>
<div id="msg" aria-live="polite"></div>

Complete working page

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Animate Image Position</title></head><body>
<div id="animation-area" style="position:relative; min-height:420px; border:1px solid #ccc; overflow:hidden;">
  <img src="images/help.jpg" id="i1" alt="Help icon used for animated movement demo"
       style="position:absolute; left:20px; top:20px; max-width:80px;">
</div>
<button type="button" id="start">Start</button>
<div id="msg" aria-live="polite"></div>
<script>
const image = document.getElementById('i1');
const area = document.getElementById('animation-area');
const output = document.getElementById('msg');
const startButton = document.getElementById('start');
let running = false;

function updateOutput() {
  output.textContent = `X: ${image.offsetLeft} Y: ${image.offsetTop}`;
}

function animate() {
  if (!running) return;

  const step = 2;
  const maxTop = Math.max(0, area.clientHeight - image.offsetHeight);
  const maxLeft = Math.max(0, area.clientWidth - image.offsetWidth);
  const top = image.offsetTop;
  const left = image.offsetLeft;

  if (top < maxTop) {
    image.style.top = `${Math.min(maxTop, top + step)}px`;
  } else if (left < maxLeft) {
    image.style.left = `${Math.min(maxLeft, left + step)}px`;
  } else {
    running = false;
    startButton.disabled = false;
  }

  updateOutput();
  if (running) requestAnimationFrame(animate);
}

startButton.addEventListener('click', () => {
  if (running) return;
  running = true;
  startButton.disabled = true;
  requestAnimationFrame(animate);
});

updateOutput();
</script></body></html>