Motion Design with CSS Managing State
This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Managing State" Lesson
>> 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: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.
>> 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: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: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.
[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.