Animation in ES6

Facebooktwitterredditpinterestlinkedinmailby feather

Animation in ES6

In JavaScript, the animation feature is used to manage the aspect that the CSS (Cascading Style Sheet) can’t. JavaScript provides various new elements that help us to construct complicated animation such as Fireworks, Roll-in and Roll-out, Fade effects. We can easily shift the DOM (Document Object Model) elements like <div>, <img/> and many others.

We can create the animation with the help of the following two methods in ES6.

  • With the help of requestAnimationFrame() method: This method executes the function if the screen is ready for the next iteration. It accepts the single line function. We can create animated effects when we invoke this function in a repeated way. The process of creating animation is done frame by frame. The browser invokes the frames.
  • With the help of setInterval() method: This method is used to accept two arguments in the form of an integer and a function. We can also terminate this method with the help of clearInterval() method.

Now, we will discuss each method in detail.

requestAnimationFrame() method

The requestAnimationFrame() method is easy to establish but complicated to terminate. It is used to create gentle animation. We can create the loops and timings required to set up manually. This method cannot be used with some specific intervals. This method contains the loop at 60fps (frames per second) to create a gentle and smooth animation. We cannot execute it in the background.

Here, we have an illustration of the same.

Example1

Output

After the execution of the above code, we got the following output:

Animation in ES6

In the above example, we tried to create a simple animation with the help of DOM object properties and JavaScript functions. First, we tried to get the DOM object with the help of getElementById(), then stored the object into a global variable.

Here, we also have another example of creating the animation with the help of setTimeout(), and clearTimeout() functions.

Example2

Output

Animation in ES6

After the successful execution of the above example, we got the following output:

setInterval() method

In ES6, this method is used as a classical method, which helps to create animation effects. The setInterval() method depends upon the recursive execution of the source code. It helps us to modify the frame of the element by frame.

Syntax

In the above syntax, when the display function modifies the element style, the setInterval(display, t) method can be used for step-by-step modifications in element style after a time interval. If we have a small-time interval, then the animation looks regular.

Rollover with a Mouse Event

In the rollover image, the event refers to an image on which when we shift the mouse pointer, then the HTTP (Hypertext transfer protocol) modifies the image with another image. But, when we move the mouse pointer from the image, then it shows the previous image.

Here, we have an example to understand the above concept.

Example

Output

Animation in ES6

After the execution of the code, we got the following output:

Page Printing in ES6

The user often requires a print button on the web page which is used to print the data on the web page with the help of a printer. JavaScript facilitates us to perform printing a web page. In JavaScript, we have window.print() function, which is used to print the current web page. Window.print() function can be used with the onclick event.

Syntax

Example

We have an example to elaborate the above function.

Output

After the execution of the code, we got the following output:

Animation in ES6

When we click on the print button, then we got the following output:

Animation in ES6
Facebooktwitterredditpinterestlinkedinmailby feather