This site is mobile accessible. Press the "Tap Here" button to use a larger font-size.

Smartphone icons created by Freepik - Flaticon

14.8 DOM Animations

Learn to create HTML animations using JavaScript.

A Basic Web Page

To demonstrate how to create HTML animations with JavaScript, we will use a simple web page:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript Animation</h1>

<div id="animation">My animation will go here</div>

</body>
</html>

Create an Animation Container

All animations should be relative to a container element.

Example

<div id ="container">
  <div id ="animate">My animation will go here</div>
</div>

Style the Elements

The container element should be created with style = "position: relative".
The animation element should be created with style = "position: absolute".

Example 1: My first JS animation part 1

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background: red;
}

Animation Code

JavaScript animations are done by programming gradual changes in an element's style.
The changes are called by a timer. When the timer interval is short, the animation looks continuous.
The basic code is:

Example

var id = setInterval(frame, 5);

function frame() {
  if (/* test for finished */) {
    clearInterval(id);
  } else {
    /* code to change the element style */ 
  }
}

Create the Animation Using JavaScript

Example 2: My first JS animation part 2

function myMove() {
  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}

JavaScript Fundamentals course home
Module 14. JS HTML DOM

Navigate this module

Eventually the navigation links, above, will be replaced by these << (previous) and >> (next) buttons below.

JavaScript icons used in the buttons provided by ICONS8.COM. Smartphone icons created by Freepik - Flaticon

Example files created in this module:
HTML DOM Methods JS HTML DOM - Finding HTML Element by Id JS HTML DOM - Finding HTML Elements by Tag Name part 1 JS HTML DOM - Finding HTML Elements by Tag Name part 2 JS HTML DOM - Finding HTML Elements by Class Name JS HTML DOM - Finding HTML Elements by CSS Selectors JS HTML DOM - Finding HTML Elements by HTML document.forms JS Changing HTML Content part 1 JS Changing HTML Content part 2 JS HTML DOM - Changing the Value of an Attribute JS HTML DOM - Dynamic HTML content JS HTML DOM - document.write() JS Validation - HTML Form Example part 1 JS Validation - HTML Form Example part 2 JS HTML DOM - Changing the HTML style JS HTML DOM - Changing the HTML style Using Events My first JS animation part 1 My first JS animation part 2 JS HTML Events - The onclick Attribute part 1 JS HTML Events - The onclick Attribute part 2 JS HTML Events - The onclick Attribute part 3 JS HTML Events - The onclick Attribute part 4 JS HTML Events - The onload Attribute JS addEventListener() part 1 JS addEventListener() part 2 JS addEventListener() part 3 JS addEventListener() part 4 JS addEventListener() part 5 JS addEventListener() part 6 JS addEventListener() part 7 JS addEventListener() part 8 JS removeEventListener() JS HTML Child Nodes and Node Values part 1 JS HTML Child Nodes and Node Values part 2 JS HTML Child Nodes and Node Values part 3 JS HTMLDOM - DOM Root Nodes part 1 JS HTMLDOM - DOM Root Nodes part 2 JS HTMLDOM - The nodeName Property JS HTMLDOM - The nodeType Property JS HTML DOM - Creating New HTML Elements (Nodes) JS HTML DOM - Creating new HTML Elements - insertBefore() JS HTML DOM - Removing Existing HTML Elements JS HTML DOM - Remove Child Element JS HTML DOM - Replacing an HTML Elements JS HTML DOM Collections JS HTML DOM Collections - HTMLCollection Length par 1 JS HTML DOM Collections - HTMLCollection Length part 2 JS HTML DOM - DOM Node Lists JS HTML DOM - DOM Node List Length part 1 JS HTML DOM - DOM Node List Length part 2