Use the Combination of Scoped CSS Variables and Pug to Generate Random CSS Animations

Instructor: [0:00] We need some confetti. Let's start by creating a mixin named confetti. Inside this mixin we're going to use a while loop, let c = , while c < 10, create a div with the class name confetti.

[0:15] We're going to give each piece of confetti randomly generated characteristics. Let's start with a skew. We're going to say Math.floor(Math.random(). Let's do * (25), and then we'll negate 25 on the end. We can go ahead and create some other characteristics.

[0:31] Now, we've got different characteristics defined for each piece of confetti. For example, how far it might travel or how much it's rotated.

[0:38] To apply these, we're going to use the style attribute, and we're going to apply each characteristic through an inline CSS variable. For example, hue, we will pass in as hue. We can do this for all of the other characteristics we've defined. The last thing we need to do is increment c for our while loop.

[0:58] Next, let's invoke our mixin, so we can see something in the DOM. If we inspect the DOM, we can see our confetti elements with the randomly generated inline CSS variables.

[1:09] We won't see our confetti yet though, because they don't have any styles. Let's create some. Here we have some basic styling. We can see the confetti elements. We want all of our confetti to spring out from the middle of the grid. Let's start by giving all of the confetti a common start point.

[1:27] Let's go with position absolute, top 50 percent, and left 50 percent. Then we can transform and you translate, minus 50 percent and minus 50 percent. Next, let's make use of our scoped inline CSS variables. We're going to start with a rotate.

[1:43] We're going to use (calc(var(--rotate, with a fallback value of zero, and then times that by one degree. We can see that our elements are rotating. We no longer have a square. We have the overlap of all of them rotating.

[1:57] Next, let's make use of the travel variable. Let's use translateY and then a value of (calc(var(---travel, with a fallback of zero and then times 1vmin. Now, we can see our confetti pieces are all in random positions shooting out from the center point.

[2:16] Then, we can go ahead and make use of the other inline variables. Now, we can define an animation for the confetti. Let's go with the name celebrate and we'll set a duration of .5 seconds. For now we'll use an infinite iteration count.

[2:30] For our @keyframes celebrate, we are going to animate from the starting position, so we can use a zero percent keyframe. We're going to say at zero percent, each piece of confetti should be transformed. We've translated minus 50 percent, minus 50 percent, and scale zero, but this isn't what we want.

[2:47] Our confetti pieces are just flicking on and off, and that's because this transformer structure doesn't match the transform structure in the keyframe. If we were to insert scale one here, now we get the desired effect that we were after. That's because our transform structures, follow the same path.

[3:03] To tidy this up a bit, we can fade out our confetti pieces in the keyframes and use an animation film it forwards. That way, they disappear. All that's left to do is move our confetti into the right place in our demo. If we give the demo a go, we can see the confetti flies out, but those confetti pieces come in a little quick.

[3:22] Maybe, we want to apply a delay to each piece, and we could apply a delay based on the index of our confetti loop. Let's add an inline CSS variable, and pass it the value C. Let's apply an animation delay, based on inline variable, and we're going to var delay plus 1, and then times .1 second.

[3:42] We're going to change the animation fill mode to both if we run our demo. We can see all the little pieces fly off. The neat thing here is we can just change the amount in our confetti loop. If we try that again. we'll now have 50 different pieces. We can see them all flying off.

[4:02] In review, we can combine the power of scoped CSS variables with the ability to generate inline CSS variables with pug in a while loop, in a mixin in order to generate random animations. Here, we're generating random animations for each piece of confetti that flies out of the center of our Tic-Tac-Toe board.