Creating Animation Using Javascript

Gif by Giphy

When you think of animation, your thoughts might wander to the latest Pixar movie or video games, but animation has slowly become a more common element of webpages and is an important tool to be familiar with if you want to enhance your webpage.

In it’s most basic sense, animation is a system where figures are manipulated to appear as moving images. Animation in cinema first appeared in the late 1890s, with the first major American animated film being Steamboat Willie in 1928. Movies today like the Avengers, rely heavily on CGI to make action scenes more realistic. This breakdown won’t get into how Marvel renders their CGI, but by the end, I hope you gain a little bit more perspective on animation as a concept and how it might fit into your webpage.

The secret with webpage animation lies with programming small changes to an element’s style through the use of a timer. Small intervals in the timer can make the style changes look continuous. For example, if you changed an element’s style.left from 0px to 100px, that would move the element. To make an element’s movement look continuous a common Javascript method is setInterval() which can call a function at specified intervals. It’s important to note that the setInterval() method will continue calling the function until clearInterval() is also called. In film animation, 24 frames per second, makes motion look continuous. Setting the interval to 2px for 5000ms will generate a similar effect.

The Animation Loop

The animation loop is a function that contains your code that gets called at repeated intervals until a condition is met.

For example, if you had an element that you wanted to move with the click of a button, you could do the following:

In this example code, we’re first selecting the element we want to perform the animation on, in this case, the element with an id of “animate”. We then set a position that starts at 0, but we’ll then increment. Next, we’ll use the setInterval function which takes in arguments of a function and an interval. In our case, we’ll use the function getMovin() and have an interval of 5 seconds. We could alternatively use milliseconds. Helpful tip, 1000ms = 1s.

When we jump down into our function, we know that we have to end our animation at some-point so an easy way of thinking about this is, if we reach the position on the page that we want, clear, stop the interval, but until we reach that point, let’s move our element.

We can first do that by incrementing our starting position, in this example, we increment by one. Next, we’ll add our position variable with a pixel, and set that equal to the element’s left style, which will move our element to the left at an interval of 5 seconds. If we wanted to make our element move faster across the screen, we would just have to change the interval speed to less than 5 seconds, and greater than 5 if we wanted to slow down our element’s travel. We could also target the element’s directional travel by doing:

This will change the element’s direction from moving right, to moving down.

Animation can help transform your static webpages and give them some extra flair. I hope that through this blog, you’ve learned a little bit more about how animation started in the first place, and where it can go.

Software Engineering Student

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store