Motion Design with CSS Managing State

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Rachel Nabors: So with all this state going around, isn't it hard to keep track of it? Yes, yes, it is. On rachelnabors.com, I store whether or not the sidebar is open. So that when people come back, the sidebar is either open or closed depending on where they go. Notice that they left it closed.

[00:00:20] They bounced over to the site. Now they're gonna go back to my site and it's still closed. [SOUND] How did I do that? I am using local storage to remember where they were. And then I'm using that to a set a class of sidebar opened on the main page or sidebar closed.

[00:00:40] Now for this feed taking care of Rachel thing, this pet Rachel. I was using JavaScript to keep track of what her state should be like at any time. But I was storing how she should look with CSS. And there's a difference between what something is and how it should look.

[00:00:59] And this made a lot of sense when I was developing this with CSS in mind. However, the client project used SVG. And SVG is best animated with a library at this point called GSAP. Because GSAP also does a really good job of normalizing SVG behaviors across browsers. SVG can behave a little weird in certain browsers.

[00:01:22] So for backwards compatibility and cross-browser normalization, we decided it would be a good idea to go with GSAP. If you want to learn more about SVG animation and GSAP, Sarah Drasner has a lovely course with Frontend Masters. Which is probably a great place to start. So this is what my code started looking like once I started trying to control all of the animations and the states with JavaScript.

[00:01:49] And it started getting pretty big. What I had in a couple of states started blimping out. So perhaps it would have been different if I'd come into this project thinking in terms of making my states displaying with both. [LAUGH] Perhaps it would have been better if I had been working with JavaScript from the beginning.

[00:02:12] And hadn't built this prototype using CSS and JavaScript together. Because I grew lazy. I was relying on CSS to remember what the state should look like. I was taking advantage of that. You get state handling for free with CSS. If the class is there, it should be like this.

[00:02:29] If the class is not there, go do the thing that was in the cascade before it. CSS gives you a lot of freebies like that. And I learned that what's good for the declarative CSS Goose is not always so great for the functional JavaScript Gander. So keep in mind, if you're doing state-based animations just with JavaScript, you might have a more difficult time of it.

[00:02:54]
>> Speaker 2: Before we move on.
>> Rachel Nabors: Yes?
>> Speaker 2: I have another question from Philippe.
>> Rachel Nabors: All right.
>> Speaker 2: Is SVG animation supported with CSS on IE Edge?
>> Rachel Nabors: Yes, so the interesting thing with SVG is that SVG is a bunch of DOM elements. It's a specific way of writing DOM elements.

[00:03:16] So, it's the same as a div or a p tag. You've just got an SVG with a g tag inside it. And you can animate it the same way you animate those things. There are a couple of different properties that SVGs have. Like outlines and such that you won't find in your regular old p tags, etc.

[00:03:35] The issue with animating SVG with CSS is figuring out which of those properties are animatable in which browsers. In fact, some of them, like in the olden days, the g tag for some browsers was not animatable. So don't bother trying to animate anything on the g tag. But more and more browsers are making those SVG elements animatable with CSS.

[00:03:57] So you don't have to go in there and manipulate them directly with JavaScript. It's a bit confusing because we tend to think about SVG animation as being something different from CSS animation. There is an SVG language, SMIL, made specifically for animating SVG. It's also called smile, that's how you pronounce it.

[00:04:18] Downside to SMIL is that it is currently deprecated in Chrome. And Chrome was like the big pusher for everyone should use SMIL. And it's the whole reason we have a web animations API was so that browsers could write the animation rules for CSS and transitions and animations and SMIL.

[00:04:36] And incorporate them all with this one API. And it would rule them all and everything would be awesome. But then SMIL got deprecated, but we still have this API. So maybe one day, it will come back. But in the meantime, we animate SVG with CSS. And sometimes, browsers are buggy.

[00:04:54] And yes, I can animate a g tag or I can animate that SVG property. GSAP normalizes that kind of behavior. It's a crying shame, browsers should have more pride.
>> Rachel Nabors: So good question. I hope I managed to clarify that. I'm sure in the future, before I move on here, browsers will have normalized their abilities to animate and display SVG.

[00:05:25] Such that we will have sites like you might not need GSAP the same way we have sites like you might not need jQuery. Because there was a time when selecting things without jQuery was a pain in the butt. Then jQuery came along, showed browsers how to do it.

[00:05:39] Browsers got on their game and gave us better selectors for going out and manipulating JavaScript. By tag, by element, by ID, by class, etc, more natural syntax. So this is the same thing that we're seeing with CSS animations and with the web animation API coming up. In the future, hopefully, browsers will all work as well.

[00:06:01] And we'll all be very performant. And we won't have to worry so much about handling those buggy browsers. But until then, for mission critical projects, you might want to check GSAP for your SVG.
>> Rachel Nabors: So libraries for managing those state. If you use JavaScript for complex stateful animation.

[00:06:21] You'll probably want to implement some sort of a state machine strapped separately to keep track of that, or you might struggle a lot. No CSS free rides, although this could act. This is JavaScript Finite State Machine, which handles linear state transitions easily. But many-to-many states get complicated. I've actually found many-to-many states are what CSS excels at.

[00:06:43] It handles any change just like that. I get that, I totally understand, I'll just check the cascade. And there's also jStorage. JStorage is what I'm using to stash values in localStorage on my site. It's great for helping me store state when people might leave the site and then come back.

[00:07:01] This is really good if you have people who are going off site. And you want to make that transition a little bit easier for them. And keep track of where they were. And it's library agnostic as a bonus.