What is JavaScript Animation?
JavaScript animations are done by incremental programming changes in the style of an element. JavaScript animations can perform tasks that CSS cannot. JavaScript could be used to transfer several DOM elements across the page in accordance with a logical equation or function. JavaScript includes the three functions mentioned below, which are commonly used in animation programs.
- setTimeout (function, duration): This function can be used to call the function after a millisecond delay.
- setInterval (function, duration): This function can be used to call the function after each duration milliseconds.
- clearTimeout (setTimeout_variable): This function can be used to clear the timer that has been set by the setTimeout
// Set the distance from the left side of the screen.
object.style.left = distance in pixels or points;
and
// Set the distance from the top side of the screen.
object.style.top = distance in pixels or points;
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Animation</title>
</head>
<body>
<h1>My First JavaScript Animation</h1>
<div id ="myContainer">
<div id ="myAnimation">My first animation is here</div>
</div>
</body>
<html>
When this code is executed, the output will appear as shown in the screenshot below.
Styling the elements
Example:
<!Doctype html>
<html>
<head>
<title>JavaScript Animation</title>
</head>
<style>
#myContainer {
width: 350px;
height: 350px;
position: relative;
background: green;
}
#myAnimation {
width: 45px;
height: 45px;
position: absolute;
background: blue;
}
</style>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation"></div>
</div>
</body>
</html>
Output: After executing this code, we will get the output as shown below in the screenshot.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Animation</title>
</head>
<style>
#myContainer {
width: 350px;
height: 350px;
position: relative;
background: green;
}
#myAnimation {
width: 45px;
height: 45px;
position: absolute;
background-color: rgb(226, 43, 43);
}
</style>
<body>
<p>
<button onclick="myMove()">Click Here</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>
<script>
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 300) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>
Output: Upon execution of this code, the resulting output will appear as depicted in the screenshot below.
Manual Animation
Now, by leveraging the properties of DOM objects together with JavaScript functions, we will explore a straightforward animation example.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Animation</title>
<h1>JavaScript Animation</h1>
<script type = "text/javascript">
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" />
<p>Click the button below to move the image left to right</p>
<input type = "button" value = "Click Here" onclick = "moveRight();" />
</form>
</body>
</html>
Output: After running this code, the output will appear as depicted in the screenshot below.
From the screenshot, we can observe a 'Click Here' button. Each time you click the button, the image shifts from left to right, as illustrated in the screenshot.
Explanation
- To get a DOM object, we use the JavaScript function getElementById and then allocate it to the global variable imgObj .
- To initialize imgObj , we defined an initialization function init , where we set its location and left attributes.
- When the window loads, we call the initialization function.
- Finally, we use the moveRight function to add 10 pixels to the left To switch it to the left, we might set it to a negative value.
Automated Animation
Example:
Let's consider an example to illustrate how we can implement an automated animation in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImg');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,12);
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<h1>JavaScript Automated Animation</h1>
<form>
<p>Click the buttons below to manage the automated animation</p>
<img id = "myImg" src = "https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" />
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>
Output: After executing the code shown above, the resulting output will be presented as depicted in the screenshot below.
From the earlier screenshot, you can see two controls: a Start button and a Stop button. When you press the Start button, the image animates toward the right. If you press the Stop button, the image moves back to its original position.
Explanation: