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 6.

Get Unlimited Access Now

Rachel Nabors: The nice thing about skrollr is that it doesn't require you to write any JavaScript or any CSS. Once you have it on the page, you set up the values that change using data attributes. So the same that data attributes that work for Alice should also work for Tuna.

But there is one trick. Those values that you were interpolating, remember that the zero has a percent sign next to it. This is just a little quirk of skrollr. The properties need to have the same kind of values. So it's not trying to interpolate between picks and M so top should be 0%, bottom should be 0%, not 0, like you can write in CSS.

Remember to put that percentage sign next to the 0. So I noticed a lot of people got the skrollr to work. This is a fun project because you get to work with both stateful animations, her change in her attitude but you also get to work with this dynamic animation tied to the scroll position.

I say dynamic because it is interpolating actively where it should be. So the first part of this challenge and the most important part was that we need to get Tuna to flow from the bottom to the top.
Rachel Nabors: Guys, all right. So the first step is we're going to take this data attribute that we have on Alice, data 0 and data 6124, and we're going to put them on Tuna, right?

So now, Tuna has, he's going to move in the same way Alice does, but this is not what I described. I described Tuna moving from the bottom to the top in opposite direction of Alice. So let's try changing those top to bottom. Now we've got him moving in the same direction.

But he doesn't move fully off the page. And I want him to be fully off the page. So let's try negative 200%. And we're going to go bottom 100%, this will get him fully off, here we go. So now he's there. Make it 120. And now that's working, and tunas values are now automatically updating via JavaScript, writing inline styles as he moves up and down to confirm.

Let's inspect his element, and we can see, if this thing gets out of the way, Squish, so much tabbing and indenting Chrome. So you can see that the purple parts are updating both for Alice and for Tuna. But there's also something interesting you may have noticed about Tuna.

I gave you a challenge to turn him into the Cheshire cat. If you inspected his element so you looked at his HTML, you'd see that there are some images inside him. Some very damning images. If you didn't know better, it almost looks if you took one of them and got rid of it, he would be a completely different cat.

That would be this one. If I said display none on that one, and then I did opacity, say this one has an opacity of 0. If I did opacity 0 and a 1 on the red one, suddenly Tuna has an expression so there's actually three images sandwiched there.

Some of them are hidden and some of them aren't. So we're going to want to change Tuna's appearance based on those things. Now we have an option here, here's where the road splits. You could use the dynamic animation, you could take the same data attributes that we used on Tuna.

Let's see. Grab these and we could say well, we want to show Tuna. We want to have the real cat, the Tuna glow changed in a different rate from the black-tuna, so we would put these both here. And we would change the opacity from, let's see, I might be doing this wrong.

Everybody feel free to correct me if I am.
Rachel Nabors: So notice that now as we move up, he fades in. Woo, so cool, so awesome, right? Nice. Love you Tuna, you're awesome. And we could change when that happens. So that maybe it happens closer to the middle of the page.

Instead of happening at the beginning, we could change. Let's say we start at 400 from the top. And end it when it gets, so notice we've delete it here by changing those data attribute values. And it's fully finished before it reaches the top. So that's one way we could have done it, but there's another way, the stateful way.

You may have noticed that as Alice is mood is changing,
Rachel Nabors: As she's changing, the body class changes as well. She goes curious, bored, sleeping, waking, etc.. Well, the body class, it can scope any of its contained elements to that. So Tuna could technically change his appearance when the body has a class of bored by scooping Tuna with that bored class.

Let's have a look at that. So let's first figure out exactly where we'd like him to change into the Cheshire cat. I would say that would be right about, let's see, she's here, she's looking around, just getting a little bored. And then she wakes up, I would say maybe right about there.

So this is where she wakes up. That would be, here's where I go find that particular name for that thing. There we go, bored, sleeping, waking, waking Alice. So around that time, let's see, was Tuna glow so waking tuna-glow and it should be opacity 1. So right around the time that she wakes up boom.

But you noticed it happened all at once. Right? We could slow it down by overwriting its default transitions, I already added the transitions to Tuna because I was totally hoping you catch the Easter egg but I'm going to override some of that. I'm going to say transition-duration should be 6 seconds here.

So now, when we scroll, and she's waking up, he takes 6 seconds. But notice that when you do stateful animation like that, it takes 6 seconds. It's not tied to how fast the person is scrolling. It just happens or it doesn't happen and I would probably also define that.

While she's awake, he would also remain opacity 1, etc.. You have to repeat yourself sometimes.
Speaker 2: I've got a question from online.
Rachel Nabors: Yes.
Speaker 2: The question is from Kevin L.. We would like to know what would be the cons of attempting to use skrollrs, viewport-anchors to interpolate Tuna's position?

Rachel Nabors: I don't think there would be any cons. Skrollrs a pretty cool library, it has a lot of options. I don't do a lot with parallax so I can't speak definitively on that. But it has a lot of handy functions for figuring out where things are located inside it and sometimes even recalibrating where things have moved to.

So if you're interested in using skrollr, I highly recommend checking out skit hub pages. There are links in the show notes as it were and seeing what features are available to you there.

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