Rachel Nabors: This is one of those things where I will let you try to figure it out on your own and encourage you to check the curriculum notes. However, steps is very tricky and I don't expect everyone to get it right from the get go. If you don't get it, don't worry, I'll walk us through it.
But you will become more familiar with how steps works and some of its drawbacks. What I want you to do is to make your own walk cycle. I've given you this sprite, this super cool, handmade, all-American sprite. Boom, look at that. It's got 1, 2, 3, I think it has 12 frames in total.
Very important, Tuna is 200 pixels tall. And there are 12 of these, giving it a total height of 2,400 pixels.
Rachel Nabors: And you are going to move, you're going to transition its background position, of this Tuna element to make him walk. And you're going to use the steps timing function.
I'm going to give you ten minutes to work on this. And then, you get to watch me suffer through it.
Speaker 2: Would telling us how to move a background position be cheating?
Rachel Nabors: Well, you move it the same way you would-
Speaker 2: I mean, just position it, how is it-
Rachel Nabors: Background-position is the property you're going to want to transition. I mean not transition, you're going to want to animate the background position. Yes, good question, thank you.
Rachel Nabors: That is not cheating.
Speaker 2: Okay, thanks.
Rachel Nabors: If at any time you are lost, I do encourage you also to read the comments in the CodePen as there are various hints listed throughout it.