Motion Design with CSS Motion Design with CSS

Exercise 9: Walk the Cat….Again!

Rachel Nabors
Rachel Nabors, LLC
Check out a free preview of the full Motion Design with CSS course:
The "Exercise 9: Walk the Cat….Again!" Lesson is part of the full, Motion Design with CSS course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise you will find a way to walk the cat without using the expensive background positioning technique. - http://cdpn.io/QbwXry

Get Unlimited Access Now

Transcript from the "Exercise 9: Walk the Cat….Again!" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Rachel Nabors: Background images aren't the most performant thing to animate. Their positions are not the most performant thing to animate. There should be. I totally lied, there is one, one more, one more coding opportunity here, but it's super, super fun. It's all CSS. So you can totally show off how much you know.

[00:00:23] We get to walk the cat again. This time, find a way to walk the cat without using expensive background positioning. I'm going to give you a big, fat, hairy clue here. You're gonna to wanna use transform and you have a sprite image. What could you do to, sa,y move that image around, instead of repositioning it as a background image?

[00:00:47] It should be mentioned, by the way, that the solution for this in the curriculum is a little bit different from the solution I'm gonna show you. So let me show you how I would do it today. And if you really wanna see some fancy work involving a pseudo class you can check out the solution tomorrow.

[00:01:04] So let's see what we've got here. We've got a background-position and it's set on the sprite here. The first thing we're gonna do, because animating this background position is pretty darn non-performant. And the background position triggers all kinds of stuff. It would be a lot nicer if we move this over to a transform.

[00:01:25] We can move a transform around in more browsers more efficiently than we can move this background position. So how do we get this image out from that background position and into a place where we can physically manipulate it with transforms? We do that by physically putting it inside the tuna class.

[00:01:46] So we're going to do img src=. There is the sprite, he's still walking. We've gotta stop that. We remove the background image. Actually, this is what it looks like if I remove the background image. You can see, it's just the cat. But I'm gonna give him a red background so we can see exactly where the tuna div is.

[00:02:09] Now the tuna div that he is sitting inside has a height and width of 200 and 400. We wanna only see the things inside that window so we do overflow: hidden. And this will automatically, automagically hide the image that overflows. But for now I'm going to leave that commented out with some illegal CSS.

[00:02:37] And now, we're gonna see what we can do to animate it. So let's get rid of this animation on the tuna div, we're gonna put it on tuna's image. Well walk cycle, if we've noticed, is still using background positions and there's no background position on that image. We want it to use transforms.

[00:02:59] So what's that gonna look like? Well you know I don't even think we need this 0%. Let's do this, just use 100%. Transform: translate, we're gonna use translate. And we're gonna use translateY cuz we're translating on the y axis. And we're gonna try one 100%. Let's see what that does.

[00:03:23] Okay, we need to use- 100%. Boom. So now all we've got to do is come up here. Turn on overflow hidden, and get rid of the background. And tuna is walking. It is the same animation only instead of using background position, it's now actually using an image. And moving that image around on the page.

[00:03:49] Doesn't disrupt the layout, doesn't trigger repaints in Chrome, pretty nice.