2025-12-306 min read

DOM Animations (JavaScript)

Learn DOM Animations (JavaScript) step by step with clear examples and exercises.

Title: JavaScript DOM Animations - A full guide for Web Developers

Why This Matters

In web development, creating dynamic and engaging user interfaces is crucial to keeping users engaged. One way to achieve this is through animations, which can make your website more interactive and visually appealing. JavaScript DOM (Document Object Model) animations allow you to manipulate the properties of HTML elements on the fly, making it easier to create smooth and responsive animations.

You'll learn about JavaScript DOM animations, their use cases, and how to implement them using various techniques. By the end of this lesson, you'll be able to add animations to your web projects with confidence.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of:

HTML and CSS for creating web pages
JavaScript for writing client-side scripts
The DOM structure and how to manipulate it using JavaScript
Familiarity with CSS properties such as transition, transform, and keyframes

Additional Resources

If you need a refresher on any of the above topics, here are some resources that can help:

Core Concept

JavaScript DOM animations work by changing the properties of HTML elements over time. This can be achieved using various techniques such as:

Changing styles directly with JavaScript: You can modify the CSS properties of an element using JavaScript, which will cause the element to animate. For example, you can change the left property of a div to move it across the screen.

const box = document.getElementById('myBox');
let leftPosition = 0;

function animateBox() {
const width = window.innerWidth;
leftPosition += 5;
if (leftPosition < width - box.offsetWidth) {
box.style.left = `${leftPosition}px`;
requestAnimationFrame(animateBox);
} else {
clearInterval(intervalId);
}
}

const intervalId = setInterval(animateBox, 10);

Using CSS transitions and animations: You can define transitions and animations in your CSS styles, and trigger them with JavaScript by changing the class or id of an element. This approach provides more control over the animation's timing and easing functions.

.box {
width: 100px;
height: 100px;
background-color: red;
transition: left 2s ease-out;
}

const box = document.getElementById('myBox');
box.classList.add('moving'); // or box.className += ' moving'

RequestAnimationFrame: This is a built-in JavaScript function that allows you to update the DOM and repaint it at a consistent frame rate, which is essential for smooth animations. Instead of using setInterval or setTimeout, which may cause the animation to run too fast or too slow on different devices, RequestAnimationFrame ensures a consistent frame rate by updating the DOM only when the browser is ready to repaint.

function animate() {
// Update the DOM and perform animations here
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Additional Resources

For more information on these techniques:

Worked Example

Let's create a simple animation that moves a div from left to right across the screen using JavaScript and CSS transitions.

First, create an HTML file with a basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM Animations</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: left 2s ease-out;
}
.moving {
left: 500px;
}
</style>
</head>
<body>
<div class="box" id="myBox"></div>
<script src="app.js"></script>
</body>
</html>

Next, create a JavaScript file (app.js) and add the following code:

const box = document.getElementById('myBox');
let leftPosition = 0;

function animateBox() {
const width = window.innerWidth;
leftPosition += 5;
if (leftPosition < width - box.offsetWidth) {
box.style.left = `${leftPosition}px`;
requestAnimationFrame(animateBox);
} else {
clearInterval(intervalId);
box.classList.remove('moving'); // or box.className = box.className.replace(' moving', '');
}
}

const intervalId = setInterval(animateBox, 10);

This code gets the div with id myBox, initializes a variable leftPosition to store its current position, defines a function to animate it (animateBox()), and calls this function initially using setInterval. The animation moves the box from its current position to the right edge of the screen by incrementing leftPosition by 5 pixels in each frame. When the box reaches the right edge of the screen, the CSS class moving is removed, which triggers a transition back to the original left position.

Practice Questions

Create an animation that moves a div from top to bottom using JavaScript and CSS transitions.
Modify the previous example to create a bounce effect when the div reaches the edge of the screen.
Implement a simple parallax scrolling effect for two elements with different speeds.

Additional Resources (Practice Questions)

For more practice questions:

Common Mistakes

Forgetting to set the transition property in CSS: To create smooth animations, you need to define transitions or animations in your CSS styles for the relevant properties.

.box {
width: 100px;
height: 100px;
background-color: red;
transition: left 2s ease-out;
}

Using setTimeout or setInterval instead of RequestAnimationFrame: Using setTimeout or setInterval may cause inconsistent frame rates and jerky animations. Instead, use RequestAnimationFrame for smooth animations.

function animate() {
// Update the DOM and perform animations here
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Not clearing intervals or timeouts: If you're using multiple intervals or timeouts, make sure to clear them when they're no longer needed to prevent memory leaks.

Ignoring browser compatibility: Some CSS properties and JavaScript techniques may not work consistently across all browsers. Make sure to test your animations on various browsers and devices to ensure they work correctly for your users.

const supportsRequestAnimationFrame = window.requestAnimationFrame !== undefined;
if (!supportsRequestAnimationFrame) {
// Fallback for browsers that don't support RequestAnimationFrame
}

Additional Resources (Common Mistakes)

For more information on common mistakes:

FAQ

Why should I use JavaScript DOM animations instead of CSS animations?

JavaScript DOM animations offer more flexibility and control over the animation's behavior, such as changing properties dynamically based on user interactions or data.
JavaScript allows you to create complex animations that are not possible with CSS alone.

What is the difference between CSS transitions and CSS animations?

Transitions are applied to a single style change, while animations involve multiple keyframes and can be looped or reversed.
Transitions are more efficient as they only require one style change, while animations may require more computational resources.

Why should I use RequestAnimationFrame instead of setInterval or setTimeout for animations?

RequestAnimationFrame ensures a consistent frame rate by updating the DOM only when the browser is ready to repaint, resulting in smoother animations.
Using setInterval or setTimeout may cause inconsistent frame rates and jerky animations on different devices.

How can I create a bounce animation for an element using JavaScript?

To create a bounce animation, you can modify the element's position based on its current position and velocity. This can be achieved by adjusting the direction of movement when the element reaches the edge of the screen or container.

How can I create a parallax scrolling effect using JavaScript?

To create a parallax scrolling effect, you can modify the position of multiple elements at different speeds as the user scrolls down the page. This can be achieved by listening for the scroll event and adjusting the position of each element based on its speed and the scroll position.

What is the difference between absolute and fixed positioning in CSS?

Absolute positioning positions an element relative to its nearest positioned ancestor or, if none exists, the initial containing block (usually the viewport). Fixed positioning positions an element relative to the viewport, regardless of scrolling.