Combining Grid Cells & Animation

[00:00:00]
>> Because grid allows cells to overlap each other, there's more that you can do here besides just what I just showed you with figure and figure caption overlapping cells and putting in a little bit of transparency. And the 11 bonus code pen which is available from the website.

[00:00:19]
Here I have an actual animation that's going on here and we have in this case two images of cats that are fading one into the other and I have coded this with CSS Grid and CSS animation. So I'll just talk you through a little bit about how this is set up so you can see how this is done I'm not saying it's a perfect solution or a beautiful solution.

[00:00:45]
Clearly there, we could add some UI here with something like JavaScript to give user more control over what's going on. But this is just to generate some interest in overlapping grid cells and to get you thinking about other ways that you might be able to use them in your own work.

[00:01:01]
So here we have, in our HTML, we have two figures and I've given one of them a class of cat1. And they're basically set up the way that you've seen figures set up throughout this course. We have an image and we have a figure caption just as you've seen before.

[00:01:19]
So what we're doing here In our HTML is here at cat one that is going to be our wrapper for this particular animation so this is the figure itself. We're adding the animation so on the wrapper we have a layout that's going on. That's right here display grid with a gap of 1% and then I have said for my figures I overlap them I both figures.

[00:01:55]
Take the same style here, where I've said the grid row and the grid column are exactly the same. It's a one cell grid, one column one row, and these are going to overlap each other and I set a width on it because this is an image. Notice too I've added a property here called justifyself center.

[00:02:16]
And that is a grid property that allows this fixed width piece of content to center itself in the middle of that particular self. Then on cat one, I can just fill in the kind of animation that I want. So what I'm really doing here Is I'm fading in and out the cat that's on top cat one that fades in and out.

[00:02:38]
And the other cat is up there on the screen the whole time. But because the first cat is fading in and out, it looks like they are alternating even though they're not. If you're not familiar with CSS animation. This isn't a CSS animation course, but I'll just briefly sort of tell you what these properties are and what they do.

[00:02:57]
First of all for we don't want to give this an animation a name I've called it fade and the reason you give it a name is because you're going to attach it to what's down here this keyframes part of this. And this is the instructions for what it should be doing at each point along the path in the animation.

[00:03:13]
Now explain that in just a moment. So I've given it a one second delay to start. The reason I do that is because we want to give these images a chance to load in before the animation starts. We can say how long we want the animation to last.

[00:03:28]
In this case, I've said five seconds. And then we have some things about the animation Phil mode, said both Is the iteration count infinite. In other words never stop you could put in some number of iterations here if you want, and the animation direction is alternate. So we're going to run the animation this way and then we're gonna run it back.

[00:03:49]
We're gonna run it this way and we're going to run it back. If you put it all in one direction so it runs start to finish start to finish start to finish that can get a little bit choppy so here it's running back and forth. So that's sort of the broad characteristics of the CSS animation up front and then here in the keyframes we say exactly what we want to do and I've set up 0% 25% 75% and 100%.

[00:04:16]
That is of the time, that's what those percents are referring to 100% of the time would be, in this case, five seconds, the animation duration that I set here. So 25% of that of five seconds would be at 1.25 seconds in this specific case, we're going to do this thing.

[00:04:34]
So here the keyframes are set up such that and the first sort of 25% of the animation the first 1.5 second, 1.25 seconds will have it displaying at the same opacity basically no animation is occurring. Then between 25 and 75% of the time so 1.25 to 3.75 seconds we'll transition from an opacity of one to an opacity of zero that's the fade.

[00:05:02]
That's where the fade completely happens and then we'll keep that to 100%. So that's what's happening here, just two grid cells we've placed them on top of each other than we animate one to fade in and out. So that's one idea that you might take away, and thinking about overlapping grid cells and what you can do with them in your designs.