Animate Buttons with Transitions

[00:00:00]
>> Kevin Powell: So one way we can use these types of things for user interactions that would be kind of fun is if we have buttons and other things like that, when we click on them that we like, you know, adding a little bit of user feedback again. So what we could say is when we hover on top of this button, we'll do it over here. So we're going to say, let's make a bunch of space. We can say our, it's a class, we can say our class, hover.

[00:00:31]
Add your focus states, all of that, we're just going to use hover for now, and I could say we have a scale of 1.1. So when I hover on top, it scales up because it's waiting to be pressed on. So that means we can transition our scale maybe over 200 milliseconds. Now it gives us a little bit, you know, it's a little bit nicer that it scales up like that and then back down. We could do something interesting here.

[00:00:56]
We haven't looked at this, but any element that can be clicked on like links, buttons, they also have an active state. So I could say button active, which is the time while the user is actively clicking on it. The scale can go down to like a 0.875, something like that. You don't want to go too extreme with these because it quickly explodes in size. So if I hover on top, it gets bigger, and then as I'm clicking on it, we're pushing the button down, because, you know, adding that visceralness to it, and then when I let go, it pops back up.

[00:01:31]
And we could step this up a little bit more. It's already a fun little, you know, gets a little bigger, push it down, and then when we let go, it lets go. This is where one last thing that I want to look at with these, let's go back to easing Wizard. And we're going to grab the spring, I think will look good here. We're going to do a bit of a gentle one. We'll try the snap. I'm going to grab the snap, see what that looks like.

[00:02:01]
You have to experiment with these things. And now we have to find the right tab. So what we can do is you could do your transition timing function here. Transition timing function and just use that probably as a custom property, and it means it's going to like snap into place. Maybe our timing for this would probably end up being a lot longer, so let's just make this 1000, so it's like 1 second. When you're using these linear ones that have a lot more in them, you do need more time for them to work.

[00:02:35]
So it sort of like pushes up, and it's like, it's a bit more snappy. Maybe it's a bit not enough. I was expecting a bit more from that, so I might change the function. Let's try that. See, it's a little bit more like fast paced. Maybe I only want that fast pace to happen when I let go of the button, not when I'm pushing on the button. So I could say when I'm hovering on it, this is a different transition timing function.

[00:03:02]
Here I'm going to ease instead. And when it's active, that means while I'm clicking on it, maybe I want this to also be a transition timing function of ease, and I want it to be slower for some reason, I don't know why, but I can come here and say the transition duration is now 2 seconds. Don't make it 2 seconds, it's really long, but now if I hover on top, it just does a regular ease, sort of like, oh, I want to be clicked on.

[00:03:29]
Push, it's going to go really slowly down, it's like building up pressure, and then when I let go it pops a little bit more. We can probably speed this one up now. 250, maybe 200, we'll try 200. So opens, slowly presses down, and then we get the pop back up like that. And I think we're going to grab, let's try maybe the bouncy one. I think the bouncy one is pretty extreme, but we can definitely try it to see what that gives us.

[00:04:05]
The fun of these giant linear timing functions. So slowly and then it sort of, I'm still not getting much of one there. Oh, it's because I'm still hovering on top of it. Ah, okay, we'll turn the hover one off. That's why. So it's going to ease down, and then when I let go, it's going to give me the spring back up. That makes more sense. I was getting ahead of myself by having it on the hover. When you let go, you're still hovering.

[00:04:30]
So you can have different states depending on the regular state, the hover state, the active state, and these different things. You can play and manipulate them in the different areas they're in, so you don't have to have the same one going every way depending on what the user interaction is. So really fast, we use this a little bit in our project as a small thing, but it also gives us an opportunity to talk about overflow, which I haven't really talked about.

[00:04:54]
So jumping into our project on these little cards we've made, it'd be kind of cool if, it's not really the best use case for them, but I needed to squeeze this in here. The reason it's not the best use case is because they're not interactive. The user can't click on them. You see this on a lot of websites though where things start interacting with and it looks like it's then an interactive element, and then the user can't do anything with it and you're sort of confused a little bit, but I want to show you how it's done because it's a popular effect.

[00:05:25]
So on my courses, I could then say that if we have our course hover, my image will change. And this is another very important thing with this user interaction. We saw this with our other ones, the user valid and other things. We can check if something's valid, do something on the or the focus within other things like that. See what the pseudo is here. Anywhere I'm hovering on my card, now I'm going to change what's happening to my image that's inside of there.

[00:05:52]
And we could say something like a scale of 1.1. Now if I do that, the image is actually getting bigger than the card itself now, which is kind of awkward, but it's in, we sort of want it to grow in that way. So, I'm also going to just do, I think I have this selector somewhere else, so I'm getting a little messy in my CSS here, but just the course image. Let's add in a transition of, that's our scale, and we'll just say 1 second, so it's nice and slow.

[00:06:23]
Really important, make sure that this isn't only on the hover effect, because then you'll transition on hover, but then when you remove, it won't be transitioning back. So the transition normally will go when you have it on the default state, and then you change what things look like on the hover state. So, we gotta save, and now it's doing that. So it looks nice, but it'd be, well, maybe you want that, maybe you like the fact that it's growing, it's possible, but I want to hide the fact, I just want to look like the background is growing outside without it going outside of the parent.

[00:07:01]
So one way we can do that is on the course itself, we can say that if let's put a border on it so we can see it, border 5 pixels solid will be black because it's the, oh it's white because the text color is white. We'll have to write black. So I see my border and when I go like that, it's going beyond the border. If I want to prevent elements from going outside of there, I'm going to use a property value.

[00:07:28]
Anyone who knows CSS will know this is overflow, but I'm going to use a value that most people don't use, which is clip. If I use clip, we can see that it's working. And we're hiding the parts, we're clipping off the parts that are expanding out. The reason I said a lot of people don't know of clip, most people will use hidden here. And hidden will look very similar in this case. Hidden has a few side effects to it that can be very, very annoying in that you can't hide only in one direction.

[00:07:56]
If you hide in one direction, it changes the overflow in the other direction and you get scroll bars popping up all of a sudden that you really didn't want to have. Clip solves that problem, and 99% of the time that you're trying to hide overflow, I would say that clip is what you're looking for. There's a few edge cases where you might need to switch to the other one, but clip is to go to these days in CSS for clipping away or hiding the pieces that are overflowing outside of the parent.

[00:08:32]
So now we can take off that border that we have right there, hit save, and we get this little effect on those cards. One other thing that's really important before we move away from transforms. You cannot transform an inline element. I don't know why you can't transform them. I'm really not sure, but it's actually in the spec. If you get into the CSS spec, you find the part for it, it says you can't do it.

[00:08:57]
So my first one is a link, my second one is a button. They both have the class a button on it, they're both doing the same thing. This one works, this one, nothing happens. This is infuriating. The amount of times this has caught me out, I've run into it enough now that I know this is what happens, but the first time this happened, I couldn't find anything. There's nothing in your dev tools telling you what's going wrong.

[00:09:21]
It's just one of those things that you have to learn. You cannot do transforms on inline elements. So keep that in mind if ever your transform isn't working. The solution, by the way, I just closed that, but if you have a class of button, that means you're going to have a display of something other than inline. It could be block, it could be inline block, it could be a flex. Inline flex, there's a few different options we have.

[00:09:40]
Let's just do an inline block. We didn't use it much, but I mentioned that it is one of the things earlier on. So now all of a sudden I fixed both of them, so just to watch out for that.