Beginning Animation using setIntervalHTML + JavaScript animation example:

Varanasi Software Junction June 03, 2025


 

🎬 JavaScript Animation Made Easy with setInterval()

Animations breathe life into web pages. Whether you're creating a fun UI interaction or a dynamic visual effect, JavaScript gives you full control. In this post, we’ll create a simple horizontal animation of a box using the setInterval() function in JavaScript.

This example is great for beginners looking to understand the fundamentals of animation with vanilla JavaScript — no libraries, just plain old DOM manipulation.

🔍 What We'll Build

We’ll animate a blue box that moves from left to right when you press “Start.” You can pause it with “Stop,” or bring it back to its original position with “Reset.”

Here’s how it looks:

▶️ Controls

  • Start: Begins the animation.

  • Stop: Halts the current animation.

  • Reset: Stops and brings the box back to its initial position.

💡 Core JavaScript Logic

We use setInterval() to repeatedly move the box by a few pixels every 20 milliseconds. The animation stops automatically once it reaches the desired position.

let box = document.getElementById("box");
let pos = 0;
let animation;

function startAnimation() {
  clearInterval(animation);
  animation = setInterval(function () {
    if (pos >= 300) {
      clearInterval(animation);
    } else {
      pos += 2;
      box.style.left = pos + "px";
    }
  }, 20);
}

function stopAnimation() {
  clearInterval(animation);
}

function resetAnimation() {
  clearInterval(animation);
  pos = 0;
  box.style.left = "0px";
}

🧱 HTML Structure

Here's the layout — we have a container for the box and three buttons for control.

<div class="controls">
  <button onclick="startAnimation()">Start</button>
  <button onclick="stopAnimation()">Stop</button>
  <button onclick="resetAnimation()">Reset</button>
</div>

<div id="box"></div>

🎨 CSS Styling

We style everything to look clean and professional, using a calm serif font and a cool blue color theme:

#box {
  width: 50px;
  height: 50px;
  background-color: royalblue;
  position: relative;
  left: 0;
  top: 0;
}

button {
  padding: 8px 16px;
  background-color: #3949ab;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

📦 Full Working Demo (HTML)

Here’s the complete code so you can try it out yourself:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript Animation Example</title>
  <style>
    body {
      font-family: 'Georgia', serif;
      background-color: #fcfcfc;
      padding: 20px;
      color: #2c2c2c;
    }

    #box {
      width: 50px;
      height: 50px;
      background-color: royalblue;
      position: relative;
      left: 0;
      top: 0;
    }

    .controls {
      margin: 20px 0;
    }

    button {
      padding: 8px 16px;
      background-color: #3949ab;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 10px;
    }

    button:hover {
      background-color: #303f9f;
    }
  </style>
</head>

<body>
  <h2>JavaScript Animation Using <code>setInterval()</code></h2>
  <p>This example demonstrates how to animate a box horizontally using JavaScript.</p>

  <div class="controls">
    <button onclick="startAnimation()">Start</button>
    <button onclick="stopAnimation()">Stop</button>
    <button onclick="resetAnimation()">Reset</button>
  </div>

  <div id="box"></div>

  <script>
    let box = document.getElementById("box");
    let pos = 0;
    let animation;

    function startAnimation() {
      clearInterval(animation);
      animation = setInterval(function () {
        if (pos >= 300) {
          clearInterval(animation);
        } else {
          pos += 2;
          box.style.left = pos + "px";
        }
      }, 20);
    }

    function stopAnimation() {
      clearInterval(animation);
    }

    function resetAnimation() {
      clearInterval(animation);
      pos = 0;
      box.style.left = "0px";
    }
  </script>
</body>
</html>

✅ Why This Is Useful

  • Great for understanding basic DOM manipulation

  • Introduces animation concepts without external libraries

  • Encourages use of setInterval() and clearInterval() effectively

Page on Github Page

Contact us for software training, education or development










 

Post a Comment

0 Comments

Me