7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.1 Responsive Animation

Hello and welcome back. In this bonus project for our Practical Web Animation course, I wanna talk about creating a simple responsive animation. And what I wanna do here is I wanna create an animation that's triggered at a certain break point. So as we're resizing our browser window, when we hit a certain break point, our content is going to change size. But instead of just jumping to the new size, it is going to animate. And so, this is just gonna be a nice, little subtle effect that most people won't ever see because most people open up their browser window, look at a website, and then go somewhere else. But every now and then somebody's gonna be resizing their browser and they'll just be surprised by this nice little subtle animation. So let's make that happen. We're going to jump into our HTML and I'm gonna create a div here with a class of container. And inside that div we're gonna have a couple of items. We're gonna have a h1 and I'm just gonna type responsive animation here. And then we'll close that. And then I'm gonna put a couple of paragraphs here. And I'm using Zen Coding to do this. You'll notice I'll type p and then the greater than sign and then lorem. And I've got all of that inside parentheses because I wanna do this twice. So I'm gonna do times two and then when we hit tab, you'll see it actually creates two paragraphs for us with some random text in it. And then I want to throw an image in the middle just for kicks. So I'm just gonna copy that link from another window. And paste it here. And so I have a nice little image to look at here as well. So as far as the HTML goes, that's all we're really looking at. Nothing fancy here. We just have a container with some content in it. So now let's jump into our CSS. And I'm gonna start by applying some body styles here to clean up the font and margins and things like that. And then I want to add a rule for the container class. So I am gonna set up a background color here. And I'm gonna set that to a value of f0f0f0. That'll give it a light gray background. I'm gonna add some padding of 20px. And lets stretch this out a little bit. I am also going to give it a width of 600px. And so you'll see that it's a little bit narrower now and our image here is escaping outside the boundaries, but we don't need to worry about that just yet. We'll get to that in a second. And then I'll want to center this container. So we're gonna set the margin here to 0 space auto. And that will center it horizontally. And that looks good. So now, We'll point to the images inside that container. So container space i-m-g and all I want to do here is set the width to 100%. Now we can see that the entire image inside that container, and that looks a lot better. So if we were to resize our window here, you'll see that it just stays the same size no matter how small we get and it kind of goes outside the boundaries of the viewable area. But if we create a media query, we can make this get smaller as our window gets smaller. And if we're using CodePen you can look down here and see the actual width of the viewing area. So right here it's about 750px, so you can play around with those numbers now to figure out where you want those break points. But let's say that once we get to around 740px we want to change the size or the width of our container. So the way that we're gonna do that is we are going to create a media query, so @media, and I'm gonna set this up for screen. And then I'm gonna set the max-width, To a value of 740px. So when our browser window is at a maximum width of 740px, we're gonna break down and change the width of our container. So here we're gonna say .container. And all we wanna do is change the width to a value of 400px. We're gonna make it smaller once our browser window gets smaller, and we see it jump down to that smaller size. So now, as we resize our browser, we can see that changing. Well, we can make this a little bit more interesting, as I've already hinted at, by creating some animation so that once we hit that break point, we don't just jump to this new size. Instead, we're gonna see that animate down to that smaller size. And remember, when we're creating a transition like that in CSS, we need a property that we're going to animate. And we're gonna animate this width property. So our width is starting at 600px. And once we get down to a maximum width of 740px, our width is gonna change to 400px. So all we really need to do to make this animate is to add one more line of code or one more property to our container class. And that property is the transition property. So, we will do that here. I am gonna set the width to be the property that we are gonna animate. And I want it to occur over the span of about half a second, so I am gonna say 0.5s semicolon to end that line. So now when we start resizing it we can see that it actually animates to that new size and that looks a whole lot better. And again this is not something that a lot of people are going to notice because not a lot of people open up a website and then resize it. So most of your users will never see this, but for those that do, I mean, it was really just one extra line of CSS code that made it happen. So you might as well give your users a nice little surprise there. So you could create multiple break points. You could, maybe once you get down to a certain point down here, you can make it animate back out so that it takes up a full 100% of the browser window. But you get the basic idea there. So that's something you could think about. You might think about what other things that you could animate as you're resizing your browser. But that's basically how you would create an animated transition based on a break point or a media query. So thank you for watching and I'll see you in the next lesson.

Back to the top