How to make animation on JavaScript

Learn how to use JavaScript to create eye-catching animations with an example that demonstrates how to change the color of an element within seconds.

Creating a Basic Animation with JavaScript

Animations can be used to make a web page more interactive and engaging. JavaScript is often used to create these animations, as it is a powerful scripting language that allows developers to manipulate the DOM (Document Object Model) of a website. In this tutorial, we'll take a look at how to create a basic animation with JavaScript.

Step 1: Set up the HTML

First, let's set up the HTML for our animation. We'll create a

element with an id of animation that we can use to contain our animation.


<div id="animation"></div>

Step 2: Set up the CSS

Next, let's set up the CSS that will style our animation. We'll set the width and height of the

element, and give it a background color.


#animation {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

Step 3: Add the JavaScript

Now, let's add the JavaScript that will power our animation. We'll use the setInterval() function to create a loop that will run the animation code every 10 milliseconds. Inside the loop, we'll get the current position of the

element, and increment it by 10 pixels.


var pos = 0;

setInterval(function() {
  var elem = document.getElementById('animation');
  pos++;
  elem.style.left = pos + 'px';
}, 10);

Step 4: Test the Animation

Finally, let's save our code and test the animation. If the JavaScript code is correct, the

element should move 10 pixels to the right every 10 milliseconds. And that's it! We've created a basic animation with JavaScript. With a few more lines of code, we can add more complex animations, like bouncing balls or rotating objects.

javascript