ES6 Animation

Animations in JavaScript can handle the things that CSS can't. Several elements in JavaScript help to create a complex animation such as Fade effect, Fireworks, Roll-in or Roll-out, etc. By using JavaScript, we can move the DOM elements such as </img>, </div> or any other HTML element.

There are two ways to perform animation in JavaScript, which are as follows:

Using the setInterval() method: It takes two arguments that are a function and an integer. This method terminates by using the clearInterval() method.
Using the requestAnimationFrame() method: This method runs the function when the screen is ready to accept the next repaint. It takes a single argument function. The animated effect occurs when we recursively call this method. The expected animation is created frame by frame, and every frame is called when the browser is ready for it.

Let us try to elaborate on these methods.

setInterval() method

It is the traditional method of JavaScript for producing animation effects. It relies on the repeated execution of code for making changes in the element frame by frame.

Example

snippet

anime = setInterval(show, t);
//It calls the function show after every t milliseconds
clearInterval(anime);
//It terminates above process

If the function show produces a change in element style, then setInterval(show, t) method can be used for producing gradual changes in the style of an element after every time interval. When the time interval is small, then the animation looks continuous.

requestAnimationFrame() method

This method is easy to set up and hard to cancel. It is optimized to perform smooth animation. The loops in it are needed to be created manually, and also the timing needs to be set up manually. This method is not made to be used at specific intervals.

This method is designed to loop at 60fps (frames per second) to perform smooth animation. It won't run in the background, and it is also energy efficient.

Now, let's see some of the demonstrations of JavaScript Animation.

Example #1

In this example, we are implementing a simple animation by using the properties of the DOM object and functions of JavaScript. We use the JavaScript function getElementById() for getting the DOM object and then assign that object into a global variable.

Let's understand the simple animation by using the following example.

snippet

<html> 
   <head> 
      <script type = "text/javascript"> 
    
            var img = null; 
            function init(){  
               img = document.getElementById('myimg');
               img.style.position = 'relative';     
               img.style.left = '50px';   
            }     
            function moveRight(){  
               img.style.left = parseInt(
               img.style.left) + 100 + 'px';  
            }  
            window.onload = init;  
   
      </script> 
   </head> 
   
   <body> 
      <form> 
         <img id = "myimg" src = "train1.png" /> 
         <center>
            <p>Click the below button to move the image right</p> 
         <input type = "button" value = "Click Me" onclick = "moveRight();" />
      </center> 
      </form>
   </body>
   
</html>

Output

LIVE OUTPUT

Example #2

Let's understand another example of JavaScript animation.

In this animation, we will use the setTimeout() function of JavaScript. It is obvious that if we are using a setTimeout() function, then to clear the timer, we have to set clearTimeout() function of JavaScript manually.

In the above example, we saw how the image moves towards right on every click. Let us try to automate this process with the setTimeout() function of JavaScript.

snippet

<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
            var anime ; 
            function init(){  
               img = document.getElementById('myimg');     
               img.style.position = 'relative';    
               img.style.left = '0px'; 
            }  
            function towardRight(){  
               img.style.left = parseInt(img.style.left) + 10 + 'px';    
               anime = setTimeout(towardRight,50); 
            }  
            function stop() {     
               clearTimeout(anime);    
              img.style.left = '0px';   
            }  
            window.onload = init;  
      </script> 
   </head> 

   <body> 
      <form> 
         <img id = "myimg" src = "train1.png" /> 
         <center>
         <h2 style="color:darkblue;">Click the following buttons to handle animation</h2> 
         <input type="button" value="Start" onclick = "towardRight();" /> 
         <input type = "button" value="Stop" onclick = "stop();" /> 
         <center>
      </form>    
   </body> 
</html>

Output

LIVE OUTPUT

Image Rollover with a mouse event

Let's understand another example of animation in which there is an image rollover by a mouse event. When the mouse moves over the image, the HTTP image will change to the second one from the first image. But when the mouse gets moved away from the image, then the original image will be displayed.

The onMouseOver event handler triggers when the user will move the mouse onto the link, and the onMouseOut event handler gets trigger when the user will move the mouse away from the link.

Example

snippet

<html>
   
   <head>
         
      <script type = "text/javascript">

            if(document.images) {
               var img1 = new Image();     
               img1.src = "cat.jpg";
               var img2 = new Image();     
               img2.src = "tiger.jpg";
            }

      </script>
   </head>
   
   <body>
   <center>
      
      <a href = "#" onMouseOver = "document.myImg.src = img2.src;"
         onMouseOut = "document.myImg.src = img1.src;">
         <img name = "myImg" src = "cat.jpg" />
      </a><br><br><br>
      <h1>Move your mouse over the image to see the result</h1>
   </center>
   </body>
</html>

Output

LIVE OUTPUT