DOM Animations

What Are DOM Animations?

DOM animations are visual changes applied to HTML elements over time. These animations can include moving elements, fading them in or out, resizing, rotating, and more. Animations enhance user experience by making web pages feel more interactive and dynamic.

There are two main ways to animate DOM elements:

1. CSS animations and transitions
2. JavaScript animations using the DOM

This tutorial focuses on DOM-based animations using JavaScript.

Why Use JavaScript for DOM Animations?

While CSS is great for simple animations, JavaScript offers more control, flexibility, and interactivity. With JavaScript, you can:

• Animate in response to user actions
• Pause, reverse, or chain animations
• Animate complex properties or logic-based changes

Basic Concepts

To animate with JavaScript:

1. Select the element using the DOM.
2. Change its style properties gradually over time.
3. Use functions like setInterval(), setTimeout(), or requestAnimationFrame() to control the timing.

Example 1: Moving an Element

Here’s a simple example of moving a box to the right when a button is clicked:

HTML

htmlCopyEdit<div id="box" style="width:50px; height:50px; background:red; position:absolute;"></div>
<button onclick="moveBox()">Move Box</button>

JavaScript

javascriptCopyEditfunction moveBox() {
  let box = document.getElementById("box");
  let position = 0;
  let interval = setInterval(() => {
    if (position >= 300) {
      clearInterval(interval);
    } else {
      position++;
      box.style.left = position + "px";
    }
  }, 5);
}

How It Works:

• The setInterval() function runs every 5 milliseconds.
• Each time, it increases the box’s left position by 1 pixel.
• The box appears to slide to the right over 1.5 seconds (300 x 5ms).

Example 2: Fading an Element Out

Let’s fade out a text element by reducing its opacity gradually.

HTML

htmlCopyEdit<p id="text">This will fade out</p>
<button onclick="fadeOut()">Fade Out</button>

JavaScript

javascriptCopyEditfunction fadeOut() {
  let text = document.getElementById("text");
  let opacity = 1;
  let interval = setInterval(() => {
    if (opacity <= 0) {
      clearInterval(interval);
    } else {
      opacity -= 0.01;
      text.style.opacity = opacity;
    }
  }, 10);
}

Explanation:

• Opacity starts at 1 (fully visible).
• Every 10 milliseconds, it reduces by 0.01.
• After about 1 second, it reaches 0 and disappears.

Using requestAnimationFrame()

For smoother animations, requestAnimationFrame() is better than setInterval(). It syncs your animations with the browser’s refresh rate, resulting in better performance.

Example: Smooth Box Movement

javascriptCopyEditfunction moveSmooth() {
  let box = document.getElementById("box");
  let position = 0;

  function animate() {
    if (position < 300) {
      position++;
      box.style.left = position + "px";
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

Replace the moveBox() call with moveSmooth() in the button to see a smoother animation.

Advanced Tip: Animating Multiple Properties

You can animate multiple properties like width, height, or background color:

javascriptCopyEditfunction growBox() {
  let box = document.getElementById("box");
  let size = 50;

  let interval = setInterval(() => {
    if (size >= 150) {
      clearInterval(interval);
    } else {
      size++;
      box.style.width = size + "px";
      box.style.height = size + "px";
    }
  }, 10);
}

Conclusion

DOM animations using JavaScript give you precise control over how elements behave and respond on your web page. You learned how to:

• Move and fade elements
• Use setInterval() and requestAnimationFrame()
• Animate multiple styles at once

Start experimenting with different styles—like transform, opacity, and backgroundColor—and you’ll soon be creating engaging, dynamic websites.