In this video, Emmanuel Henri introduces the use of keyframes in your CSS Modules, and adds the first animation for your grid items.
- [Instructor] Animations is the basis of great interactions, and we'll start heading them directly inside of our CSS modules. Great thing is, you can add states to your CSS classes without worrying about syntax or if they'll work with React. The states carry it over. Okay, so the first thing I want you to do is go to github.com/danedan/animate.css. This is a library that you can install in any of your projects, but instead of installing the whole library, I decided to just look at the source and grab some code here from the source and use that for the animation.
This is open source, so feel free to do that. You can use the sources, it's pretty much just animations code, so lightSpeedOut, you can see what you did for keyframes lightSpeedOut. This is how I found mine, which is the flash. OK, so if you want to see what I've used, you go to attention seekers and then the flash is here, and then you see the animation that I've used. We're actually going to copy that, like so. Feel free to use anything you want. These are all open source, so feel free to copy and paste into your project.
I've copied this, let's go back into your project, and then let's continue on the GridItem.css and paste the animation. The only thing we need to do now on that style sheet is the badge, and add a margin-bottom of 0 pixel like so. Then what I want to do is update the GridItem, because right now, we have styles, but they're not applied to anything. While we're at it, I'm going to convert this stateful component to a stateless component.
Because we're not using any of the life cycle methods, we're not going to use the state we're actually being passed props from grid, might as well create the right component. Let's go ahead and do that, GridItem, and pass it props, and you could have copied and paste directly from the sample code that I had earlier, I just like to type it when it's a really short component like this. We're using class names and we're using styles.card for that particular div, and while I'm thinking about it, let's make sure that we import our styles as well from our GridItem, otherwise we won't be able to use them.
Capital I for GridItem.css, like so, OK. Here we'll use some of this and let's just delete all this, we don't need any of this for now or forever. Make sure you match your closing element and inside of the h2, we'll use the className and apply it to styles of title that we've defined in the previous video.
Then let's start using our props. We've passed a few things from our props, so if we look back at the facts, the NASA_facts, we have a title, we have a fact, and we have it clicked, so we're not going to use this, but if we were using it for our state purposes, you could use that particular item here. We have a title, we have a fact, so let's go ahead and do that. The first prop, so props.fact, so remember, if you go into the Grid.js, we're actually mapping on the array and each item has a fact and then an idea.
Here we have a fact that has a title. Next we'll do article and we'll apply the className of styles.fact. By the way, if you're not familiar with article, this is an HTML element, and there's a lot of documentation on Mozilla that you can read on that particular element. Let's do props.fact.fact, so we are passing an item called fact and then inside of that object, there's a title property and a fact property, like so.
We have styles.fact, styles, plural, .title, styles.card, we're passing the props, we're returning it, article, className, perfect. Let me stop for a second and challenge you. What do you think is missing here? This is a stateless component. What would be the only thing missing to make this work, otherwise, we're not going to be able to use that particular component? I'm going to stop for a second and then I'm going to give you the answer.
That's a little typo, and these are the kind of mistakes that sometimes we make, I do them myself from time to time. But if you know what to look for, then you'll be able to find them, so I'm glad that I've done that mistake so you can see the kind of things that could occur. Let's save it, let's go back, and we got our NASA facts, perfect. OK, so as you can see, we can see the animation. If we scroll, whenever we hover over one of these facts, it flashes, so if you decided to use something else, it's going to do that animation.
There's one that actually shakes, there's one that actually jumps, so whatever the animation that you decided to pick from animate.css, then you can apply it here, or even experiment. Actually, when I was building that project, I experimented with a few. I thought the shaking was a bit too much, so I did the flash, I thought that was just perfect, so we can keep our eyes on the stars in the background. Okay, so we've done a base animation, so now, we're ready to add some interactivity.
- Setting up React with CSS modules
- Navigating the directory structure
- Adding components to an app
- Using CSS syntax with components
- Leveraging other styles
- Using grid components
- Developing interactions and responsiveness
- Implementing media queries
- Combining styles