CSS Animations for Performance

[00:00:00]
>> Matias Gonzalez: Let's say we have created a website, we added a lot of animations and then we got a call from a client and say, hey, the Lighthouse is not performing really well, do something about that. And what's happening is that we are animating our text using JavaScript, so when the user enters to the website, it will download the all of the JavaScript, Chrome will interpret all of that code and then it will run our animation, so sometimes, especially if we are like on a hero section, we don't want to rely on JavaScript animating our objects.

[00:00:48]
I've seen cases where changing animation, an animation from JavaScript into CSS just added a bunch of performance points into the Lighthouse score, just because we're not waiting for all of that JavaScript to execute. Of course if we're doing like something super complex, it might be worth spending those performance points on it, but if we're doing some simple fade in, just maybe CSS would be a better choice.

[00:01:22]
So let's go ahead and see how we can create this exact same animation but on CSS. So I'm going to go into the second folder is going to the starter, and we have the exact same start as before. So I would need first to manually split all of the letters. So let's quickly do that. I don't know, there are different solutions for this, but let's just create an array or like the two texts version.

[00:02:14]
And then let's split every, let's split the string. If you split a string using nothing as a parameter, it will create an array with letters on every element, so it will basically create an array that says like this. And we can do the same for the version word, so split but nothing. So this will be an array that it will contain two arrays inside, and every element is going to be a letter string.

[00:02:59]
So that's actually manually add that into here so I'm going to grab the first word and map. And let's actually create a span with the letter. And then, you know, to make React happy, let's add a key using the index. And let's do the same for the second word. So if I go ahead to the code, I should see that every letter has now its own element wrapping it.

[00:03:52]
Yes, we have a question. With this solution impact SEO? This solution, yes, in a good way, because we will not need to wait for JavaScript to run in order to see our animation. And you're using Next.js, so this is rendered server-side, right? Yeah. Everything here is being rendered on the server and it's going to serve as a static HTML.

[00:04:20]
So we're not running any JavaScript in order to produce this result actually. We don't even have like the use client directive in here. So let's create a CSS module, so style.module.css. And let's create a letter class name, so start by single opacity one. If you haven't used CSS modules before, the way they work is that you import your styles from your style sheet and then this object is going to contain the class names that you have created here so I can go ahead and add a class name and target letter, so S dot letter.

[00:05:30]
And this will connect whatever I put in here into this class name. So let's do a CSS animation. We're going to first add a display inline block. The reason for adding inline block is that I want to animate a transition and for that when you're using spans we need to add inline block as a display or block.

[00:06:02]
And let's actually add an animation, so animation is going to be called reveal. Let's put a tiny amount of time and ease out. Let's have our keyframes for our animation, so keyframes. We're going to start by adding a opacity 0 and then we're going to go ahead and at 100% we're going to animate in the opacity.

[00:06:49]
So let's test this out. We should just reveal a simple fade in. Let's also go ahead and animate the transition, the translation, sorry, to transform, it's going to be translate Y. And then let's start at 200 pixels and then we will animate into 0, so let's put 0 in here. So nothing new to see here, it's just a simple CSS transition.

[00:07:25]
Let's start trying to match this with our previous experiment a little bit closer so we have a staggered animation with each letter and we also added a custom ease so let's start by adding custom ease on CSS. As we saw on these websites we have a lot of easings and let's actually find the easing that we were using.

[00:07:53]
So ease out circ is the one that we have used on the previous example and we can see here that we have the CSS function for it. Let's so let's copy that and go back into our editor and actually edit. And then to solve the staggering effect, we need to find a way to get every letter to have its own animation delay.

[00:08:34]
So a way to solve that is using CSS variables. So CSS variables is a nice way to pass information from the DOM into CSS. So the way it works is that you will do style and then you would create an index for example variable. This can be named whatever you want and then you can pass a value. In this case let's use the index as the value.

[00:09:01]
And then React is not happy with it because it's saying hey this is not a proper style and we need to tell it that hey we know what we're doing because we are actually editing a CSS variable so we're going to tell hey this is a React CSS property and it's actually called style, not styles. So if I go again into the website and I inspect every letter, every letter is going to have its own CSS variable that we can reference later in CSS.

[00:09:51]
So let's use this, sorry, let's also add this to the other element. And now let's go back into my CSS and actually use that as a custom delay, so I'm going to say animation delay and we want to do a calculation based on our variables, so calc. And then we're going to solve, we're going to target that variable, so the index variable, and then we're going to multiply that by a small amount.

[00:10:29]
So the first element is not going to have a delay. The second element is going to have a delay of 0.03 seconds. The third element 0.06 and like that. So if you go back and refresh, we can see that we have like the stagger effect. And we can see a problem is that when I refresh, I actually first see the letters in place and then they animate in.

[00:11:14]
So in order to avoid that, we want to tell CSS, hey, before the animation starts, don't use your default value, which will be opacity 01, sorry, actually I want the element to be with these properties already applied. And the way to do that is with animation fill mode, so animation fill mode will tell CSS, hey, if I do both, for example, what it will do is before the animation starts it will already apply these properties.

[00:11:57]
Then the animation's going to run and then it will keep these properties applied. So if I go back into Chrome here, I can see that the letter starts with opacity 0 and then they animate in. This is very useful for like if you want to reveal something using like CSS. So like that we have the exact same animation, but instead of relying on JavaScript for it, we just done it with CSS and again this will be especially useful if you're like on a hero section where you want Lighthouse to measure like the largest elements first and in this case since like it's a really basic sample so if you measure this it's probably going to give you 100% but if we have like a really big website with a lot of JavaScript going around, I have seen websites where, again, moving animations from JavaScript into CSS, it will just give you a couple of extra points on your score.

[00:13:05]
In GSAP, I noticed you use circ.out. Where did you find that string? Cause I noticed the names are different on the easing site. Um, yeah, they usually have whatever it's on here, like that's how it will go. So yeah, they might not like this is not exactly abbreviated, but this is more or less like standard names that you can use.

[00:13:36]
So usually in order to find one, let's go back into the GSAP example and the starter. If you just hit like control space, you will see all of the easings that GSAP has available and you can also register your own easings on there. I think there's also like on the GSAP documentation like an easings part.

[00:13:59]
I just prefer this website because it gives you also like the CSS version and like the map function in case you want to apply that with JavaScript. It's like it has also like a really cool visualizer for every single ease. Someone asked about the CSS siblings lecture. So CSS sibling index, we can also use this if we want to create a staggered animation.

[00:14:41]
The way it works is that it will manually give us the index of our element. So I can just use sibling index. So on the first element this will be 0, on the second element it will be 1, and again and again. So it can also be useful for creating staggering animations. Again, we didn't have to use CSS variables.

[00:15:07]
The only current issue with it is the availability across different devices. So if you want to make something that's also available for like Safari, you may find some issues, but yeah. I would also think it's, there's less control, because you can't just say like this index do something different or whatever, yeah, yeah, also, let's say that you have add wrapping this text for some reason.

[00:15:47]
Let's actually do that. Then the index will reset, so every word is going to animate at the same time. So with index we actually have like perfect control of what we're doing. We could also like use CSS variables to animate like different colors, for example, like actually pass whatever information we want into CSS and use that in our animations.