How To Animate Objects In Javascript

Hey, there we bring another awesome tutorial on animation. In this tutorial we will discuss two major parts which are Manual and Automated animation.As we discussed animation in CSS we can also have animation in Javascript where it is used to create complex animation, which may include the following;
  • Roll-in or Roll-out
  • Fade effect
  • Page-in or Page-out
  • Objects Movements
  • Fireworks

Javascript can be used to move any type of HTML elements around the page according functions specifications, which may include; div, span, img, among other html elements. Some of the functions that are mostly used may include;
setInterval(function, duration)– It calls the function after every duration milliseconds.
setTimeout(function, duration)– It calls function after duration milliseconds from now.
clearTimeout(setTimeout_variable)– It clears any timer set by function setTimeout()
Javascript allows one to set the position of the object on the screen, we may have syntax to illustrate this;
    
        object.style.left=the distance in pixels or points;
        or
        object.style.top=distance in pixels or points
    

1. Manual Animation


This marks our first part of our tutorial, we will discuss how you manually animate any object in Javascript. In the following example you will find that we use functions. getElementById() which is used to get the object and assigns it to a global variable imgObj. init() is used to imgObj where we have to set it’s position and left attributes, while function moveRight() is used to increase the distance to the right. Let’s see this example below for better understanding.
<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) + 12 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>

You may try it yourself in your text editor.

2. Automated Animation


This marks the second part of our tutorial, we will discuss how we can automatically animate objects in Javascript, as have seen the above example with every click the image moves to the right, we can just animate by using setTimeout() function as follows;
moveRight() calls the setTimeout() function to set the position of the imgObj while stop() it resets the timer and sets the object to it’s initial position. We may have this example for better understanding;
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 12 + 'px';
animate = setTimeout(moveRight,25); // call moveRight in 25msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>


You may try it yourself and see the result

Rollover with a Mouse Event


With an example her we will discuss the following; Image() it creates and preloads a new image object called image1. onMouseOver happens when the mouse moves on the link, while onMouseOut happens when mouse moves away from the link. Look at this example for better understanding.
<script type="text/javascript">
<!--
if(document.images){
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<a href="#" onMouseOver="document.myImage.src=image2.src;"
onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>

You may move the mouse over and out of the image link and see the result. You will find that when the mouse is moved over the link the image changes from image1 to image2. But when moved away it displays the original image.
This marks the end of our training on Javascript, but regularly we will be uploading projects we have developed using Javascript remember to keep on following our tutorials. Thanks a lot for being our partner in our Program. You may support the vision by subscribing to our YouTube channel here; YOUTUBE CHANNEL SUBSCRIBE, in our YouTube channel we have posted several tutorials on Javascript programming, soon we are holding live training therefore keep updated on our social media platforms. Hoping to meet in our next training on any other programming language, I hope you enjoyed the trainings, you may leave your opinions and suggestions in the comment section below. Enjoy your programming.