Pure JavaScript Animations

In my CSS animation series, I had one blog describing how we can combine CSS with JavaScript, to call an animation on the click of a button for example. Although in that, the animation was coded in CSS and JavaScript was just used to add button functionality. In this blog I would like to show how animations can be written in pure JavaScript.  

In fact this will enable bloggers such as me, to display animations in our blogs without the use of embedded third-party software as Code Pen etc.

Prerequisites

To understand how animations work in JS, you must learn the basic of the keyframe rule in CSS. I have written an entire blog on that topic, so please check that out for a refresher. 

How does it work?

As usual, we will first create our HTML document. We can create divs in the HTML code, but just to make it "pure" JS lets create our divs in our JS code. So lets create it!

var element = document.createElement('div');
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'pink';

Now we shall use the .animate attribute to create animations. This takes two parameters; the first one is a list and the second one is a JS object (this is known as a dictionary in other languages). 

The first parameter is a list of objects. Each object defines the styles of the element. This is similar to the keyframe rule, although here in JS we don't need to mention at which time this animation is taking place using terms like 0%, 100%, from, to etc. 

The second parameter is an object that defines the animation. This includes duration, delay etc. This is similar to the animation style in CSS, its just that now we don't define an animation-name.

Also remember that JS takes time in milliseconds, so 1 seconds will be written as 1000 and always put values such as color as a string.

Example Codes

To move an element from left to right, the code might look like this

...
element.animate([
    {transform: 'translate(0, 0)'},  // This is the first stage
    {transform: 'translate(300px, 0)'} // This is the final stage
],{
    duration:2000,
    direction: "alternate",
    iterations: 'Infinity ',           
});

document.body.appendChild(element);

We can also animate multiple element styles.

...
element.animate([
    // This is the first stage
    transform: 'translate(0, 0)',
    width: '100px',
    height: '100px',
    backgroundColor: 'pink'},
    
    // This is the final stage
    {transform: 'translate(400px, 0)',
    width: '200px',
    height: '200px',
    backgroundColor: 'red'}
],{
    duration:2000,
    direction: "alternate",
    iterations: 'Infinity ',
    easing: 'ease-in-out'            
});

document.body.appendChild(element);

The animations above are made possible not using CSS but JS (check the source code if you do not trust me)! I have simply created a script element and used the respective code for the animation. 

These techniques can be very helpful for pure JS websites or any project for that matter. Till the next blog,

Happy Animating!