Interaction, JS Detection, & Scaling

[00:00:00]
>> Sarah Drasner: So we can also just add tiny bits of interaction. We talked a little bit about how we don't think in booleans. Maybe we can help show the difference between states, and it can be something small, like the change of an icon. Maybe we just change the search button and save some space in our UI.

[00:00:17]
And you know how this is done, this is just a circle and a line, and I'm moving those attributes in order to create that. So I'm using this to set the SVG DOM nodes, and it's also lining up with that input in that place. So I put the focus into the input, and I change the opacity.

[00:00:38]
We can also use JS for CSS animation detection. So if you do wanna use CSS, you can figure out when an animation starts, when an iteration fires, and it will keep logging this little guy. I don't know what this guy is. I thought it was an owl but the GreenSock people thought it was a fish but, I don't know.

[00:01:00]
I make these things late at night, [LAUGH]. And in animation has completed. So this is I'm just hooking into native events here, animationstart, animationiteration, and animationend. And here's the EventListeners, it's not super complicated to work with. Another thing you can do is if you're working with a giant system across a bunch of different things, and you want to have composable animations, so different composable bits.

[00:01:28]
You can create an animation and have similar timings and easing structure across the whole system. So that people aren't re-communicating animation all the time. One thing is storing eases so that everybody's using the same eases and people aren't inventing new eases. Remember we showed that one thing had sign, sign, sign and a pop.

[00:01:48]
If I built out a new animation for that site I would use sign, sign, sign, and a pop. I would use the same kind of easing structures. The other thing I'm doing here is I have a few timing values like H1, H2, H3. So when you go to create text on a site, you're not rethinking about PE tags and what that size is.

[00:02:11]
You're not rethinking about H1s. They're always gonna be the same across the whole site. You can think about animations the same way and have T1, T2, T3, T4. And of course the T5 is like the body copy, everyone uses T5 out of the gate and just adjusts up and down from there.

[00:02:27]
So you keep all the animations consistent. And then people who need an animation in your system who aren't good at animations are just plugging into some beautiful defaults that you have set up. You're not creating new things every time.