The full video and many others like it are all available as part of our Frontend Masters subscription.

Rachel Nabors

Rachel Nabors is a CSS animations fanatic and award-winning cartoonist. A regular conference speaker, she ignites new technology with her experience in visual storytelling.

Rachel Nabors

Web Animation

Rachel walks through the solution to exercise 5. She also shares a real-world example where she used CSS classes to manage state.

Get Unlimited Access Now

Rachel Nabors: So going into the editor view, what's happening here is we've got a stage. We have this lovely piece of HTML with the ID of stage that we get to latch on to. And it contains a loader. And it contains a scene with tuna sitting in the window.

What we want to do involves the JavaScript and the CSS.
Rachel Nabors: Specifically we want to change the scene. We want to remove the class that's on it when it loads which is loading. And we want to swap in a class of loaded on that stage element. The other thing we want to do, actually let me show you how to do this first.

So I hope I won't regret removing my own notes. We're going to go after stage, and we're going to remove
Rachel Nabors: loading, and we are going to addClass.
Rachel Nabors: That's an unfortunate line break. We're going to add the class of loaded. And we're going to do that with a 6. We've got it on a set time out here.

So it will wait for six seconds in because we want people to see how fancy our loader is. Now you notice that it just jumped cut right. I'm going to shorten the load time here. I just love seeing loaders that are set with set time outs. It's always an indication of terrible, terrible performance.

So no, the user must see our pretty loader. We spent a lot of time on this loader. They are going to see it. Use loaders to hide loading. Don't use them to show off your pretty design skills. I know they're pretty. Everyone thinks they're pretty. But it's gotta have more reason.

So you'll notice that there's a jump cut here. Remember how I said that the nice thing about transitions is now if they're not supported, we just get some jump cuts. Well, we're about to change that. See, loader and scene, they both have their opacity scoped by these classes.

So when things are loaded, the loader has an opacity of 0. When things are loading, the scene has an opacity of 0, the window scene that is. What we're going to do is we are going to set a transition on that opacity.
Rachel Nabors: So that instead of a jump cut, we're going to get a nice fade, a crossfade.

There we go, looks very nice. So what I just showed you, it seems very simple, or it might not seem simple, depending on your proficiency with JavaScript. For those of you who think it looks very simple, it's deceptively simple. This is an example of how we manage state using CSS and JavaScript together.

I use this for projects like Black Brick Road. I'm going to actually demo this one in person. This is pretty darn awesome.
Rachel Nabors: So this is the loader. As you can see, the loader just stands here and looks at us until it's done loading. The only animation is little dots.

Go step, step, step, step, step. This was a project I worked on with a lovely Russian cartoonist. And notice that when we click the arrow to go down, the class on the body actually changes. Or maybe it's using data attribute. So you can use data attributes with CSS too.

If you want to store state in data attributes on an element that also makes sense, whatever you're more comfortable with, whatever your company's team approves of as a best practice. But notice that these states are like upstairs and downstairs. And they're just changing this whole block. This whole room is a big element.

And its transform is changing where it's positioned. So the transition is set to transform. Same here, menu open, menu closed, with transitions dictating when that class is on the page, where this should be. Well, the transition dictates how it should change. So for instance when the body has a class of menu open, the menu is front in center.

When the body has a class of menu closed, the menu is offscreen. And the transition on menu says we want it to move by two seconds.
Rachel Nabors: So that's that state in classes. So I tried doing this on a project, a pet project with a client. The project didn't go too far.

But the idea was to recreate a Tamagotchi using, in the browser. So basically you can feed me. This is all CSS animation and sprites we played with. So you can get me to sleep. And you'll notice on the top, there are these little bars indicating how alert, how hungry, and how engaged I am.

That's not what I want. Darn it, go back, there we go. So, as we go through this, we can see that the bars are changing in reaction, the bars are changing in reaction to these buttons that you're clicking. But they're also changing the classes on the page, to change her expression.

I'm using JavaScript objects on the backend to manage how happy, how full, how bored she is at any given time. And as they change, as their levels go up and down, I'm editing the levels on the page in those meters, but I'm also changing the classes on the page to indicate which animation should be running.

So all of these animations you're seeing on this page, they are scoped to the classes. But I'm figuring out which one I should use with some JavaScript happening on the backend. It seemed really simple to me when I first did this. And I promised the client that we were going to do the work using, we ended up using SVG.

And well, I learned some fun things about managing state with SVG. I'll get in with JavaScript. I'll get into that in a moment. A disclaimer, I'm going to show you another example of some state being managed with JavaScript showing up in CSS. But before I show you this, I just want to say that this uses parallax.

You should not use parallax without the supervision of a trained UX expert so that you're not hurting the poor users because parallax is kind of a trite thing. And it can be discombobulating for people with vestibular disorders. But for this Blue Sky Project I did with Adobe, it made sense.

So let's have a look. This is Alice in Videoland. And it's a modern take on the Alice in Wonderland story. We have a loader. Notice that the state changed to loading, and the loader flew away. And every time we go to a new page, a new animation is triggered because I am triggering a new, I'm using JavaScript to add a new class and remove the old class to say which one of these is in view at any time.

I'm actually using a library called waypoints.js to decipher which one of the screens is in view at any time and just from the animations and transitions on those screens when they're in view. So now when we scroll down, as we scroll down, I'm also letting the browser know what state of mind she should be in.

She goes from being scared, to being curious, to being tired. Each one of these is triggered as we go down. JavaScript is going, I see were on screen number eight. So her expression should be happy, out a class a happy to that body. It's more complicated way that you can manage state with a little help from JavaScript.

So let's talk about those libraries that I used. For the parallax, I use Skrollr. It's kind of the big heavy weight in the industry as far as parallax goes. If you ever want to use parallax, Skrollr is not a bad idea. It basically interpolates property values based on scroll position.

We will play with it, I promise. And Waypoints, Waypoints is my best friend. Waypoints can work with or without jQuery. It has a standalone library. The developer is in Portland where I live. And he is a really cool fellow. He's very eager to talk about Waypoints. So he's always responding to any questions you might have on the GitHub.

But an idea of how Waypoints works is, notice as I scroll down the site, different things are being triggered by how far you are from the top of the screen. It's a really handy library for figuring out where a person is on the screen at any given time.

And when we had that lovely parallax effect, when her attitude was changing, Waypoints was letting my JavaScript system know where she was. And my JavaScript would return by saying we should give the whole body, this class that would change her CSS and display a different sprite.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now