Transitions & Animations

[00:00:00]
>> Steve Kinney: Real quick, just a little aside on some of the built in transition animation stuff that is in intel and the most common one is, and we mentioned this at one point, we saw it in some of the examples is the transition colors. Most of the properties, these just map to the values of the transition property in css.

[00:00:28]
But you can do everything, just the colors, so on and so forth. And then it will then just apply. If we go back to our button, for instance, if we go and put in a transition colors, you can see that is adding okay, transition property, color background, color border, color outline, color text decoration.

[00:00:56]
You get a little more gran. The yellow if you want it'll put in some basic defaults in there. And now you will theoretically get. Let's go to the. Where's my. You will get a very kind of like subtle transition in there for free. You can do that to everything, so on and so forth.

[00:01:21]
And so you can hook up to those things. We can put those in there and get those transitions super easily. Again with a simple addition or removal of that transition property. Again you can tweak that to the things that you want to do. All the classics are in there, which is kind of great.

[00:01:40]
The other thing you can do is you can set. If you want to get even more granular, you can just use that arbitrary value syntax that we saw earlier. And there are things like duration where you can say like okay, some built in stops in there. I think I usually.

[00:01:57]
Yeah, like 100, 200, 300, like 150. You can see in the autocomplete. But you can always put in custom amounts as well. And you can see that's a little slower one and that's great and wonderful. And then you can change all of those things again. Tailwind's job is to take stuff that exists in CSS and move it into utility classes for you.

[00:02:16]
So if you can do it in css, you can do it here as well. The other one, I'm actually going to look at this because I think it looks nice. On their site. There are some just built in animations. Spin ping. The only one I ever really use is pulse.

[00:02:41]
You can see this one actually I use spin sometimes. Right Animate Spin on that SVG is just spinning that SVG in a circle. The one I aspire to use that one in one day. I've never actually used it. The one that I use is like for skeleton stuff.

[00:02:55]
This pulse animation, which not on that screen definitely looks a little bit more. But if you made the colors more extreme, it kind of Gives you that kind of loading state, so on and so forth. And these are just like if we put it on our button real quick, we said animate Pulse, you can kind of see that there is a keyframe set up called Pulse that just kind of does that animation as you go through.

[00:03:24]
So a few of those kind of built in again that transition. If you're also just using transforms to move stuff around. The other one that comes in helpful sometimes is for if you're using modals or the Popover API and you want to have. We'll do it. I have a popover.

[00:03:43]
Hold on. We won't do the full popover right now, but I made one just in case it came up. Is a lot of times you might want it to fade in. The problem is the ways that you used to have to do that was you would have it have a class where have opacity 0 and then you would slap on another class as soon as he came onto the page to then simulate as if it was fading into existence.

[00:04:09]
Right? There's actually a CSS feature called Starting Style which we have in the notes. You can totally and should check it out. It's just that I use it like once a year and that felt once a year is even generous. And what it will do is allow you.

[00:04:27]
You can basically write class. Hey, you should have an opacity of 100, but your starting style is going to be opacity zero. And this will. You no longer have to do that trick where you throw it on the page. It's going to opacity zero. And as soon as it's on the page then you throw another class on and it transitions those two states.

[00:04:53]
This one, it will start out with an opacity zero in. And you can see this is normal, just CSS opacity zero percent. And then it will immediately like fade in to being fully there as well. But yeah, so there's like a lot. Again, if you can do it in css, there is an analog in Tailwind and most of them are not far off from what the CSS syntax would look like.

[00:05:20]
Right? And like I said, there is a whole list of any pseudo selector has a variant that you put on the front that works. Most of these properties have something that like effectively goes right over there. Even like the weird esoteric stuff that I have never used in my life, like CSS masks and stuff like that.

[00:05:39]
There is support for almost all of those things out of the box at various levels of like Esoteria.