The Call of Houdini - CSS Animations 5

Today we will learn Houdini. Houdini is the reason I am doing this CSS Animations course, but I am sorry that it had to be delayed to the fifth lesson. To learn more about Houdini, check out my blog titled 'This will change the web for ever'. Before diving in today's lesson, give the animation below a thought. If you have troubles viewing it I recommend going to the Code Pen of this lesson. 

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

There are a couple of rings (15 to be exact) that are expanding and going to the left the screen. We could just write the animation for each of those rings, but that would make our code redundant and make it look ugly. While programming, we must remember to make our code look beautiful, because when we see another person code, we are in fact looking at a painting, a piece of art. I think that's enough of the philosophy and let's solve that problem.

HTML

For the HTML bit, we need to specify a parent div called 'con' and then specify 15 spans as its children. 

<div id="con">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

CSS

Let's define a variable in the root. This will help in timing of the animations.

:root {
    --timer: 0.5s;
}

Now let's use Houdini. Houdini brought a new way to define variables and we will use that to define the size of the ring. We do this by using the @property rule in the style. Under this we define the type of the variable, whether it is a variable of length or whether it is a variable of color. We must do this since CSS has a many types of values. Then we define it's initial value. And lastly we define if it inherits something from it's parent. In our case this will be false. The code should look something like below.

@property --size {
    syntax: '<length>';
    initial-value: 10px;
    inherits: false;
}

Note: Houdini is very new and therefore doesn't support most browsers. As of 22-11-2020, only Edge, Chrome, Opera and Samsung Internet are supported. So if you are on something like Firefox, the animations won't be working. Even Visual Studio Code, will show the above code as a problem. For more information check this site, 'Is Houdini Ready Yet'.

We should always style our body and for this lesson, we will just give it a color and a padding along with a margin of zero pixels.

body {
    background-color: rgb(0, 0, 0);
    padding: 0;
    margin: 0;
}

Now we need to style the spans inside the div. For this we use the ' > ' CSS Combinator, which helps us to specify the child of a parent. As far as the styling goes, we need to create a ring, which is basically a circle only with a border. To give it a 3D effect we basically rotate it on the y-axis. And then finally the animation styles. 

div > span {
    height: var(--size);
    width: var(--size);
    border-radius: 50%;
    border: 10px solid white;
    position: absolute;   
    transform: translate(1600px, 400px) rotateY(60deg);
    padding: 0;
    margin: 0;
    animation: anime calc(var(--timer)*15) infinite forwards linear;
}

Finally we animate our spans. This time we will just specify the 'to' frame for animation. For the positioning of the spans, we will define a x-translate value in the negatives, so that the animation is smooth and continuous. To increase it's size, we will just give our size variable a new value.

@keyframes anime {
    to {
        transform: translate(-400px, 150px) rotateY(60deg);
        --size: 500px;
    }
}

"Wait, how does the code above represent the animation in the Code Pen?" if that question is not popping in your head, then you are not a true coder. To pull that off, we take advantage of CSS Pseudo Elements, to be precise the nth-child. This pseudo element, identifies the nth element of some HTML element that is repeated a couple of times in a row. In our case, it is the spans. For each of these spans, we just add an animation-delay style. Simple right! 

I am not showing the entire part of this code since it is very repetitive. But you must do this for all of the spans.

span:nth-child(1) {
    animation-delay: calc(var(--timer)*0);
}

span:nth-child(2) {
    animation-delay: calc(var(--timer)*1)
}

span:nth-child(3) {
    animation-delay: calc(var(--timer)*2);
}

span:nth-child(4) {
    animation-delay: calc(var(--timer)*3);
}
span:nth-child(5) {
    animation-delay: calc(var(--timer)*4);
}

This technique is very useful and can save probably a hundred lines of code and yes, that did happen with me and I do regret not knowing this technique at the time. 

If you recall the animation from the third lesson, where we have four squares rotating in and out of a larger square, the code for that can be shortened with this method. Let that be today's homework! 

Happy Houdini!!