JS-tizing Animations - CSS Animations 4

In the previous lesson we discussed about animations which basically just keep on running. But what if want to run a animations by clicking a button? What do we then? Well we run towards our savior, our messiah, JavaScript! Today we shall learn how to run a CSS animations, using JS. At the end, our result should look something like this. This lesson can also be a prelude to the 3 dimensional world on this screen.

See the Pen Lesson 4 by Original-Coding-Cult (@original-coding-cult) on CodePen.

HTML

The HTML code is fairly simple, we just basically need to nest 3 divs inside the container div.

<div class="con">
    <div id="layer1"></div>
    <div id="layer2"></div>
    <div id="layer3"></div>
</div>     

CSS

Let's first declare some variables, to make our lives easier. 

:root {
    --width: 150px;
    --height: 250px;
    --border: 10px;
    --screenWidth: calc(800px - var(--width));
    --screenHeight: calc(400px - var(--width));
    --depth: 150px;

}    

First let's style our body and our container. Not much complex code but, just some colors for the body.

body {
    background-color: #FFF8DC;
}

Some transforms for the container. Wait, but that's not it. What is the third style you might may ask. What is preserve 3d? It simply, gives the children of this div "a 3d space". If this is not declared then the children will exist, but not in 3d space. So this is very important.

.con {
    position: absolute;
    transform: translate(var(--screenWidth), var(--screenHeight)) rotate3d(1, 1, 0, 40deg);
    transform-style: preserve-3d;
}  

Now we can begin styling our divs. The top most layer will be a box with just a border, since want it to be transparent. I would also like to give it some shadow, since only this gives us a sense of perception. 

The first value in box-shadow defines the horizontal displacement of the shadow. The second value defines the vertical displacement of the shadow. The third value tells us how "blurry" the shadow will be. The fourth value is of the size of the shadow, whether it is larger or thin and the last value is of the color.

#layer1 {
    width: calc(var(--width) - 2*(var(--border)));
    height: calc(var(--height) - 2*(var(--border)));
    border: var(--border) solid red;
    z-index: -1;
    box-shadow: -6px 6px 8px 2px rgba(0, 0, 0, 0.5);
    position: absolute;
    transform: translateZ(0px);
}  

There is nothing special for the second div, although from now on we start giving the divs a sense of the z-axis and how far it will be from the screen.

#layer2 {
    width: var(--width);
    height: var(--height);
    background-color: rgb(255, 255, 0);
    z-index: -2;
    box-shadow: -6px 6px 8px 2px rgba(0, 0, 0, 0.5);
    position: absolute;
    transform: translateZ(-75px);
} 

Nothing special for this div also.

 #layer3 {
    width: var(--width);
    height: var(--height);
    box-shadow: -6px 6px 8px 2px rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 0, 0);
    z-index: -3;
    position: absolute;
    transform: translateZ(-150px);
} 

Well now you might ask, where are the animations styles. Well that is the trick. We put the animations in a separate class and not in the styles of the divs. You might understand this better, from studying the code below.

.an1 {
    animation: card1 1s infinite linear alternate;
}
.an2{
    animation: card2 1s infinite linear alternate;
}
.an3 {
    animation: card3 1s infinite linear alternate;
}

Remember, this class is only created in the CSS and not in the HTML.

Now we do the keyframing. We will be rotating the divs in 3d space so we will be using the rotate3d property. The fourth parameter of rotate3d is how many degrees you want it to rotate. The first parameter is a number which dictates how much it will rotate on the x-axis. 1 indicates that it will rotate 1 times the fourth parameter. 0 means that it will rotate 0 times the number in the fourth parameter. The same is true for the second parameter, but it will tell us how much it will rotate on the y-axis and the third parameter is for the z-axis. Also there is z-indexing, that we need to remember.

 @keyframes card1 {
    to {
        transform: rotate3d(1, 1, 0, -40deg);
        z-index: -1;
    }
}
@keyframes card2 {
    to {
        transform: rotate3d(1, 1, 0, -40deg);
        z-index: -2;
    }
}
@keyframes card3 {
    to {
        transform: rotate3d(1, 1, 0, -40deg);
        z-index: -3;
    }
}

JavaScript

Now we will be JS-tizing our animations! We will first create a function. Inside the function, we will refer our divs and add the corresponding animation class to those divs. Then we will set a timeout of a certain time period. This time period should be equal to the length of the animation. After the time is over it will remove the class from the divs. Pretty simple, right! 

function hello() {
    document.getElementById('layer1').classList.add('an1'); 
    document.getElementById('layer2').classList.add('an2'); 
    document.getElementById('layer3').classList.add('an3');
    setTimeout(function(){
        document.getElementById('layer1').classList.remove('an1'); 
        document.getElementById('layer2').classList.remove('an2'); 
        document.getElementById('layer3').classList.remove('an3');
    }, 2000); 
} 

Now we will just add the onclick attribute to our container div and tell it to call the function hello, whenever the div is clicked.

<div class="con" onclick="hello()">

Well that's it for today's lesson. Enjoy, using this technique for your animations. Whenever you are stuck or think you are lost, feel free to go over the lesson again and you can also visit the GitHub page of this lesson. Till, then bye :D

Happy JS-tizing!!