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

In this exercise, you will use the skrollr.js library to make Tuna “fall” up the hole past Alice.
- http://cdpn.io/jafIt

Get Unlimited Access Now

Rachel Nabors: We're going to have some fun using skrollr JS. I'm going to show you how exactly it works before I let you do this project. Because there's a really neat trick to it. What I want you to do in this one is I want you to get the cat, because originally tuna was a part of this.

Tuna is part of all my projects. Originally tuna was going to play the Cheshire cat and you can see tuna sitting here but he was going to be down on the underneath the screen. He was going to be tucked out of way and as you scrolled her down, he was going to fall upwards.

And then he was going to, kind of grind at her and then keep moving up toward the top of the page and disappear same way same way she disappear underneath. So, I've left the code that gets her to change but I'm going to let you do the same thing to him.

This is all in JavaScript. So, what you'll notice is that we've got, this is how skrollr works. It uses CSS properties. This is a more dynamic kind of animation. In that, it's not CSS animation. It's CSS properties being changed with JavaScript. So what we do is we set these data attributes with how far it is from the top of the page.

I actually had to use waypoints to make this more responsive, because the whole thing is responsive. So the distance from the top of the page, the very top of the page, changes depending on how big your browser is. So for the live version, I'm actually using waypoints to change these data attributes every time you resize the page but, anyway that's a long story.

So, this one is fixed distance from height of top. We basically set top to -10%. So Alice's value is to be at -10% from the top of the page when we're at zero. And then 6124 is the bottom of the page, that's how tall this page is. It's 6,124 pixels tall.

By the time we get down there, her top value should be equal to 80%. So watch what happens when we scroll. You can see that we're starting with top at 10%. And when we start scrolling, notice how it's turning purple as it's updating? Skrollr is interpolating between these two different values until we reach the bottom.

Word's very close to 80%. I'm not exactly sure why it's not perfectly there but you get the impression that that's how it works. I'm going to give you the chance to do that with Tuna as a fun exercise. Special bonus points if you can investigate the code a little bit and do some sleuthing and see if you can make tuna turn into the treasure cat.

Waypoints is also running on this page to change her attitude. You can see that notice the body class up here is also changing. It goes from curious to bored to sleeping and she, if we inspect her element,
Rachel Nabors: Come on, there. We inspect her element.
Rachel Nabors: That's so many.

Rachel Nabors: Here it is. If we inspect her element, we can see that, notice it's got weird here, body class of weird, here's the selector weird alice-falling. Background-position, 0 0. But if we change it, it goes, the background-position changes as well.
Rachel Nabors: You could technically, you could use this to trigger these different moods to trigger something changing on tuna as he's also scoped within that body.

You could. So, those are all the hints I can give you right now. This one's kind of a big deal. So I'm going to give you extra time.

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