JavaScript HTML DOM Animation

Guest · Post by **Guest** » Fri Oct 27, 2023 9:07 am

JavaScript HTML DOM Animation

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

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

Try it Yourself »

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 small, the
animation looks continuous.
The basic code is:

Example

id = setInterval(frame, 5);function frame() { if (/*
test for finished */) {    clearInterval(id);  } else {

/* code to change the element style */   }}

Create the Full Animation Using JavaScript

Example

function myMove() {
let id = null;
const elem = document.getElementById("animate");
let pos = 0;
clearInterval(id); id = setInterval(frame, 5);
function frame() {    if (pos ==
350) {
clearInterval(id);    } else {
pos++;       elem.style.top = pos + 'px';       elem.style.left = pos + 'px';
    }  }}
Try it Yourself »

★
+1

Reference: https://www.w3schools.com/js/js_htmldom_animate.asp