How to move a box 10 pixels right and 10 pixels down per second using JavaScript

Question

I want to animate a div (say height 50 px and width 50 px) from left to right in the browser.

I can share my html css part here:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box{
        width:100px;
        height:100px;
        position: absolute;
    }
    .blue{
        background:#00f;
    }
    .position{
        margin-top: 50px;
    }
 </style>

</head>
<body>

<div class="box blue position" id="move_box"> </div>

<script>

</script>

</body>
</html>

How can I animate the div from left to right according to the condition "moves 10 pixels right and 10 pixels down per second".

Note: only in JavaScript.

My script:

<script>
var box = document.getElementById('move_box'),
    boxPos = 0,
    boxLastPos = 0,
    boxVelocity = 0.01,
    limit = 300,
    lastFrameTimeMs = 0,
    maxFPS = 60,
    delta = 0,
    timestep = 1000 / 60,
    fps = 60,
    framesThisSecond = 0,
    lastFpsUpdate = 0,
    running = false,
    started = false,
    frameID = 0;

function update(delta) {
    boxLastPos = boxPos;
    boxPos += boxVelocity * delta;
    // Switch directions if we go too far
    if (boxPos >= limit || boxPos <= 0) boxVelocity = -boxVelocity;
}

function draw(interp) {

    box.style.left = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px';
    box.style.top = (boxLastPos + (boxPos - boxLastPos) * interp) + 'px';

    console.log(box.style.top);

}

function panic() {
    delta = 0;
}

function begin() {
}

function end(fps) {

    /*box.style.backgroundColor = 'blue';*/

}

function stop() {
    running = false;
    started = false;
    cancelAnimationFrame(frameID);
}

function start() {
    if (!started) {
        started = true;
        frameID = requestAnimationFrame(function(timestamp) {
            draw(1);
            running = true;
            lastFrameTimeMs = timestamp;
            lastFpsUpdate = timestamp;
            framesThisSecond = 0;
            frameID = requestAnimationFrame(mainLoop);
        });
    }
}

function mainLoop(timestamp) {
    // Throttle the frame rate.
    if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
        frameID = requestAnimationFrame(mainLoop);
        return;
    }
    delta += timestamp - lastFrameTimeMs;
    lastFrameTimeMs = timestamp;

    begin(timestamp, delta);

    if (timestamp > lastFpsUpdate + 1000) {
        fps = 0.25 * framesThisSecond + 0.75 * fps;

        lastFpsUpdate = timestamp;
        framesThisSecond = 0;
    }
    framesThisSecond++;

    var numUpdateSteps = 0;
    while (delta >= timestep) {
        update(timestep);
        delta -= timestep;
        if (++numUpdateSteps >= 240) {
            panic();
            break;
        }
    }

    draw(delta / timestep);

    end(fps);

    frameID = requestAnimationFrame(mainLoop);
}

start();
</script>

it works on firefox for me: http://jsbin.com/ravayucila/edit?html,js,console,output — yellowsir, Apr 19 '17 at 07:25
@yellowsir :: can you count :: it goes down and right as per 10 pixel ratio ?? — Selim Reza, Apr 19 '17 at 09:42
@SelimReza 10px/sec, your console log runs more then once a sec. — yellowsir, Apr 19 '17 at 09:48
@SelimReza i don't understand whats the problem, do you want it to move it only once a sec.? — yellowsir, Apr 19 '17 at 11:01
@yellowsir : moves 10 pixels right and 10 pixels down per second — Selim Reza, Apr 21 '17 at 10:17

score 2 · Accepted Answer · edited May 23 '17 at 12:09

Check out the code below. It moves your box. Just tweak the css and fps values and you should be fine.

Thank you for the help on animation: Controlling fps with requestAnimationFrame?

var box = document.getElementById('move_box'),
  fpsDiv = document.getElementById('fps'),
  frameCount = 0,
  startX = 50,
  startY = 50,
  x = startX,
  y = startY,
  movePerSec = 10,
  moveUntilY = 100,
  stop = false,
  fps, fpsInterval, startTime, now, then, elapsed;

box.style.position = "absolute";
box.style.left = x + "px";
box.style.top = y + "px";
startAnimating(30);

function startAnimating(fps) {
  fpsInterval = 1000 / fps;
  then = Date.now();
  startTime = then;
  animate();
}


function animate() {

  // stop
  if (stop) {
    return;
  }

  // request another frame

  requestAnimationFrame(animate);

  // calc elapsed time since last loop

  now = Date.now();
  elapsed = now - then;

  // if enough time has elapsed, draw the next frame

  if (elapsed > fpsInterval) {

    // Get ready for next frame by setting then=now, but...
    // Also, adjust for fpsInterval not being multiple of 16.67
    then = now - (elapsed % fpsInterval);

    // draw stuff here
    var sinceStart = now - startTime;
    var currentFps = Math.round(1000 / (sinceStart / ++frameCount) * 100) / 100;
    fpsDiv.textContent = "animating @ " + currentFps.toFixed(2) + " fps. X = " + x.toFixed(2) + ", Y = " + y.toFixed(2) + " animated for " + (sinceStart / 1000).toFixed(2) + "s";
    x = x + movePerSec / currentFps;
    y = y + movePerSec / currentFps;
    box.style.left = x + "px";
    box.style.top = y + "px";
    if (y > moveUntilY) {
      x = startX;
      y = startY;
      box.style.left = x + "px";
      box.style.top = y + "px";
      stop = true;
    }

  }
}

.box {
  width: 100px;
  height: 100px;
}

.blue {
  background: #00f;
}

<div class="box blue" id="move_box"> </div>
<pre id="fps"> </pre>

[requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) should be used for this — thedude, Apr 20 '17 at 08:45
@olahell : can we return back to zero position as it went to right-down ? I mean animation to return back left-up ... ? — Selim Reza, Apr 21 '17 at 08:18

score 0 · Answer 2 · answered Sep 18 '19 at 18:41

<script type="text/javascript">
        let leftStartingPoint = 0;
        let topStartingPoint = 50;
        var element = document.getElementById("move_box");
        let interval = setInterval(function(){
            moveBox();
            if(topStartingPoint >= 500){//your custom logic to stop moving//
                clearInterval(interval);
            }
        },1000);
        function moveBox(){
            let count = 0;
            let moveRight = setInterval(function(){
                count += .1;
                if(count >= 10){
                    count = 0;
                    clearInterval(moveRight);
                    let moveDown = setInterval(function(){
                        count += .1;
                        if(count >= 10){
                            count = 0;
                            clearInterval(moveDown);
                        }else{
                            topStartingPoint += .1;
                            element.style.top = topStartingPoint+"px";
                        }
                    },5);
                }else{
                    leftStartingPoint += .1;
                    element.style.left = leftStartingPoint+"px";
                }
            },5);
        }
    </script>

score 0 · Answer 3 · answered Oct 26 '19 at 16:44

Here is a simple solution -

let wrapperHeight = document.getElementById("wrapper").offsetHeight;
let blue_box = document.getElementById("box");
let animateDirection = 0; // animation direction, Ex- 0 for animate right bottom.

const animateBox = () => {

    let PositionLeft = blue_box.offsetLeft;
    let PositionTop = blue_box.offsetTop;

    if ((PositionLeft + 100) >= screen.width || (PositionTop + 100) >= wrapperHeight) {
        animateDirection = 1;
    } else if (blue_box.offsetLeft < 0) {
        animateDirection = 0;
    }

    if (animateDirection === 0) {
        PositionLeft = PositionLeft + 10;
        PositionTop = PositionTop + 10;
    } else {
        PositionLeft = PositionLeft - 10;
        PositionTop = PositionTop - 10;
    }

    blue_box.style.left = PositionLeft + "px";
    blue_box.style.top = PositionTop + "px";

    setTimeout(function () { animateBox() }, 1000);
}

setTimeout(function () { 
    animateBox();
    console.log('called')
}, 1000); // initialize

Live Example is here - https://js-animation-prepared-for-js-skill-exam-test.netlify.com/

How to move a box 10 pixels right and 10 pixels down per second using JavaScript

3 Answers3

Linked