Transcript

Jen Simmons

This is The Web Ahead, a conversation about changing technologies and the future of the Web. I’m your host Jen Simmons, and this is episode 53! I want to first say thank you so much to today’s sponsor, Environments for Humans, with their 2013 CSS Summit which seems to be kind of awesome! We’ll talk about that later in the show.

And I just want to say hello! So many of you have tweeted at me or sent emails through the 5by5 website or my own website and said like, “Where are you? Where’s the show?” [laughs] It’s been a little while. This has happened before. I don’t really mean for it to happen. It’s just all of the sudden, I don’t know, five weeks have gone by and I haven’t done a show. The show’s not dead! I’m totally doing this show! I just, I think mostly this spring it’s been— I’ve been, I just went, I just did four conferences — presentations plus an all-day workshop. So, I don’t know, weeks go by. But, here we are, and I’m working on booking more shows in the future into I think the end of June we’re going to do one and then a bunch in July and August, and definitely the show’s around. If you’re a new-ish, newer listener and you’ve not listened to all 52 previous episodes, do that if you want more Web Ahead. They don’t really go out of date, really. There’s one thing and one show that I think is now a little out of date, but everything else is totally current. So, for those of you that have listened to all 50, now 53— 52.1 episodes, sorry. We’ll be back, I promise.

So today! Today, we’re going to talk about CSS animations, transforms, transitions. You can use CSS to make things move around on the page, something that we used to kind of do with JavaScript and then we sort of didn’t. And then we did it with Flash and now we’re not using Flash. But you can totally do a lot of that same stuff or even better in CSS. So, today I have Val Head joining us. Hi Val!

Val Head

Hi guys! Hey Jen! Saying hi to the chatroom first, sorry. [laughs]

Jen

Yes, hello everyone. Oh! And for those of you who don’t know, you can listen to the show live. If you go to 5by5.tv/schedule, you can see the schedule of all of the shows that 5by5 broadcasts live and everytime I have a new episode of The Web Ahead booked, it gets put on that calendar, and you can look and see when the next episode is. And if it’s in a time zone when you’re awake, you can totally listen by going to 5by5.tv/live and listen live. There’s also a chatroom you can get into, IRC freenode channel 5by5 or use the web interface on the live webpage. There’s, right there, just get into the chatroom. Yeah. Kind of fun. Kind of cool. It’s fun having people, like right now, there’s people listening right now. And we know it.

Val

That’s amazing! I can see them.

Jen

They can totally harass us and they can correct what we’re saying.

Val

[laughs]

Jen

It’s nice! We can’t see them, but we know they’re there. [laughs]

Val

We can see them in the chat. I guess that’s sort of seeing them. But yeah, not exactly. [laughs]

Jen

So, you’re a web designer, yeah? And you’re…

Val

Yes!

Jen

…you’re a consultant.

Val

Mmm-hmm. Yeah, I do basically, mostly freelance web design. Design things, work with various teams and small agencies to kind of, you know, work together. Make awesome web stuff. So that’s pretty fun. And then I also teach a lot of workshops. I teach workshops on CSS animations and also teaching designers how to program. So, those are both really, really fun things to do.

Jen

Nice. And we finally met in person when— It was Rustbelt Refresh.

Val

Yeah! Which seems like it was just yesterday but I think it was like two months ago. [laughs]

Jen

It seems like it was a million years ago. [laugh]

Val

No, that was a fun time. It was like…

Jen

Yeah.

Val

…first time in Cleveland in a very long time and it was a fun, fun conference.

Jen

Yeah. They did a good job putting it together.

Val

Yeah.

Jen

So let’s talk about animations. So, what’s the deal? You wrote this book for Five Simple Steps, this little pocket guide book which we can talk about more…

Val

Yeah!

Jen

…as we go. But, there’s transforms,…

Val

Mmm-hmm.

Jen

…there’s transitions, and there’s what is officially called animation…

Val

Mmm-hmm.

Jen

…because it uses the word animation in the property of CSS. I mean, also I tend to use the word animation to just mean animation. Like anything moving. But—

Val

Well, that is what it means, right? Like the technical definition or just like the dictionary definition of animation is giving something movement, right?

Jen

Giving it breath, is what it actually means. [laughs]

Val

Yeah, yeah. I think that’s the literal one. And so it’s like— I like to call it transitive formations because I think the terms are just so confusing. You know both transitions and animations can make things move, so technically they are both animating. And transforms technically don’t cause any movement but, gosh that name sounds like it should! So, your transforms— And then transforms are the things you might transition or animate. So, it gets really confusing.

Jen

Yeah, you confused me already.

Val

So— Well, transforms basically just change the way something appears and we can do that in 2D or 3D. We can skew it, rotate it, scale it, do all sorts of crazy just horrible things to whatever [laughs] the image or div is. We can kind of stack those on top of each other, right? Like if you have a transform, you can translate something on one axis, you can scale it, and you can also skew it and just do all this stuff. But that will only affect the way it looks. It won’t cause any change of state. Like, you’ll just see it instantly be skewed or instantly be rotated. So transforms just change the appearance. Transitions—

Jen

So, let’s just back up a second.

Val

Yeah.

Jen

So transform— If, let’s say you have a box,…

Val

Mmm-hmm.

Jen

…then your transform could make your box be rotated five degrees.

Val

Yeah, it could make it like literally rotated. It could make it like a funky parallelogram. You know, skew it a little to one side.

Jen

What are the other— Let’s go through— Let’s go through what the things are that transforms can do, then we’ll, like, we’ll talk about the other ones.

Val

Oh man, I wish I had the list in front of me because there’s a bunch. But you can rotate, and you can rotate along— You can just rotate, sorry, like just that’s it or you can rotate along any of the three — you know, x, y, or z axises— Axes, rather. Oh goodness, that was a great sentence. So you can translate along any of those, or rotate on any of those.

Jen

So you can— You can rotate,…

Val

Mmm-hmm.

Jen

…you can skew,…

Val

Mmm-hmm. You can scale. Or you can translate.

Jen

…or you can scale, right? So that’s one where, like you could have— I mean, this is something that I’ve found interesting because if I have a word…

Val

Mmm-hmm.

Jen

…and it’s in 20pt font, right? Pixel, sorry. There’s no points on the Web…

Both

[laugh]

Jen

A 20px font. And I say I want this to be— Is it 50% or is it 50, I forget, the scale—

Val

Scale is out of 1 technically.

Jen

Oh.

Val

So if you wanted 50%, you would make it…

Both

.5

Jen

Right, so I could say, “Okay, I’ve got 20pt and I’m going to make it scale to .5 so now it’s 10pt font. Or I could say I want it to scale to 2…”

Val

Mmm-hmm.

Jen

“…so now it’s a 40pt font. Or I could alternatively make my font be 10pt,…”

Val

Mmm-hmm.

Jen

“…-pixels, or 40px or 20px or—” You know? So it’s like this other way—

Val

Yeah.

Jen

Like, transform: scale is like a different way to make anything on the page be bigger or smaller than it would have already.

Val

Mmm-hmm.

Jen

Yeah.

Val

Yep. And then, you know, translate’s kind of the same where that moves it around and it’s, you know, it just does the same thing where it just changes its position, very similar to what changing what its left and top properties would be, but it’s translating instead. So—

Jen

transform: translate, right?

Val

Mmm-hmm. Yeah, transform: translate. Because as if transform wasn’t confusing enough,…

Jen

[laughs]

Val

…transform: translate—

Jen

Let’s toss another T-word in there.

Val

[laughs]

Jen

So—

Val

Were they just really liking the consonants or something? I don’t know.

Jen

So transform: translate means, “Hey, when you calculate where this goes on the page, I want you to put it where you thought you were going to except— No, wait a minute! I want you to…”

Val

Yeah, move it over a little bit. [laughs]

Jen

“…count, do some math from that place where it would have been, and I want you instead to move it this far on the x-axis or this far on the y-axis or translate3d would be…”

Val

Mmm-hmm.

Jen

“…in 3D space too.” Right? So you could—

Val

Yes!

Jen

And that’s a good way— I mean, it’s interesting with CSS layouts. CSS layouts are already hard enough, but now suddenly you could jigger something, place it somewhere else on the page by using transform: translate…

Val

Mmm-hmm.

Jen

…and say, “I just need you to move it over from where you thought it was going to be.”

Val

Yeah.

Jen

And now that— And like you said before, it’s not an animation property. This is just a do-what-I-tell-you-to-now property.

Val

Yeah! Exactly. I mean, we can animate it, and we can transition it, but technically on its own it doesn’t do any of that. Though it does come in handy in the sense that, kind of like what you were just saying, if you were laying out a page, you’re never going to do that with transform: translate, right?

Jen

The whole page.

Val

That just feels weird?

Jen

That would be crazy.

Val

So, if you stick to— When you’re animating and transitioning, if you use that transform: translate to move things around, you’ve kind of created a nice separation where you know your animations won’t mess with your layout, hopefully. Or there’s less chance of it. I suppose you could still make a mess, but you know it helps separate things and keep it a little more straight in your brain.

Jen

So you might want have wanted to use transform: translate, you do your regular layout to do sort of the inital state…

Val

Mmm-hmm.

Jen

…and then you use transform: translate to mark where something will end up,…

Val

Yeah, I do that a lot.

Jen

…and then you animate it, you animate it across from where it started to where it ends up.

Val

Yeah, and then you know that you’re, you know, if you’re animating or transitioning this transform: translate — as tongue-twister as it is — if you’re animating those transforms, you’re safe to know that you’re not going to mess up your layout or mess something up that maybe someone else was working on, so…

Jen

Right.

Val

It does come in handy in that sense despite the incredibly confusing names. [laughs]

Jen

It’s really— That’s why I was working on a project about the time when we were both at Rustbelt…

Val

Mmm-hmm.

Jen

…Rustbelt Refresh, that was heavily with animation. And I kind of got my brain into it, but it’s been now a month since I was done with that, and now I’m like all over again— It just, it feels like all of the things we’re going to talk about today are— It’s a new part of CSS, and a lot of the new parts of CSS are fairly— are easy, honestly, for those of us who know CSS really well and have written CSS for years. So the adding the ability to do box-shadow or adding the ability to do border-radius didn’t feel that hard. You know? It felt like, “Oh, I got to look it up, and then I got to re-look it up the first 15 times I use it.”

Val

Yeah, it’s not a big step.

Jen

But now I got it memorized. I’ve used it 15 times. I have it memorized. This stuff was like, “Oh! That’s what it felt like to not know CSS…”

Val

[laughs]

Jen

“That’s what life was like back in 2000-whatever when I was learning this for the first time.” Like, “Ohhhh, crap! [laughs] This is harder than I— Woah. Yeah, this stuff is challenging.”

Val

Well, it’s a whole different way of thinking, right? I mean, before we could do— Before we could make things move with CSS — for lack of a better way to lump them together — we were kind of styling pages almost as if we were doing print, right? Like you were making things— You were marking up a document, styling it up, making it look pretty. But it was always still more-or-less static…

Jen

Yeah.

Val

…in that sense. There was no, like, time to it. There was no depth in that, I guess, dimension. So now when we make things— When you have the ability to make things move, suddenly it’s less of a document and more of almost, like, a stage depending on how far you want to take it.

Jen

Yeah.

Val

And, you know, you kind of end up with these pieces of your site almost being more like characters and, you know, having more life to them than just like be blue, have rounded corners, and have a drop shadow. Now you’re like, “Be blue, and have a drop shadow, and over two seconds rotate like this,” or something. It’s just— It’s a very different way of thinking about things.

Jen

Yeah.

Val

So it’s not really— It’s not the CSS we’re used to, but it’s pretty cool!

Jen

It’s also a whole— I mean, we’ve already been talking out in the wider web design community it seems everyone today is talking about new techniques for accomplishing web design,…

Val

Mmm-hmm.

Jen

…and new tools, adding new tools to our toolbox. Because Photoshop alone or still photographs of one kind or another, still drawings of final products don’t convey this motion or movement.

Val

Yeah.

Jen

Like you can’t— I mean, unless you want to do storyboards the way that films do, or keyframe and draw out the different keyframes that you want the way that someone would storyboard a film or a cartoon, but…

Val

People definitely do that even for, you know, website things or animated web things.

Jen

It’s a lot more work. I mean, it’s also designing in code. This is where you can just…

Val

[laughs]

Jen

…design in the code, play and play and play until you get what you want even if it’s not production code, even if what you’re doing is coming up with ideas that you’re going to pass off to a development team.

Val

Oh yeah! Especially if you’re doing something that has to react to, like, user input. It’s really— I mean, you can draw that out as many times as you want, but you’re not going to know if it works until you try to make it and try to use it, right?

Jen

Yeah.

Val

Like, until you try to interact with it, you’ve got no idea if that motion is a good motion to have. So—

Jen

Well, it’s like when I used to design lighting for theater,…

Val

Mmm-hmm.

Jen

…you’d plan the whole thing out and perhaps even do some 3D modelling of it, which didn’t exist when I was doing [both laugh] theater design, but it does for people today. But you had no idea. I mean, you’d draw a map of where all the lights were going and all the colors you wanted to use, but you had to actually get in the theater and run the cues and say, “I think this— I want this to be a five second transition.” And then you realize that, “No, that should really be three seconds,” or, “No, that should really be eight seconds,” or “No, that should really be 10 seconds.” And you would literally get all of the actors and all of the technicians and everybody who was involved, might also be people moving pieces of set and people setting off pyrotechnics and people doing music, playing music live, or people— And you would run the cue with lighting and all of the other things. And, you know, you’d start a couple, you know, sentences before the cue and then you run it a sentance or two after the cue, and you’d be like, “Okay! Looks good to me!” And the other designers, each who had their own department, would be like, “No, I need to—” “No, that looks good to me,” or “No, let’s do that again.” And you like run the cue three, four, or five times and see whether or not it worked. Because there’s no way to know until you get there.

Val

No, there’s just certain things that you just— You can’t— You have to try it before you know if it works, and you know?

Jen

Yeah.

Val

It’s not a bad thing. I think it’s really good for us to get these things and prototype them and get them in the browser or at least try to use them as soon as possible…

Jen

Yeah.

Val

…by whatever means makes sense. Yeah, like drawing static pictures just really doesn’t cut it anymore.

Jen

Yeah. So transform.

Val

Mmm-hmm.

Jen

I’m looking, I pulled up a list. So…

Val

Oh good.

Jen

Translate, we talked about…

Val

Mmm-hmm.

Jen

…moves things on the x, y or x, y, z axises. Scale makes things bigger or smaller. Oh, and you can make them also along the x, y, or z axis.

Val

Mmm-hmm. Yeah just to add in a little extra confusion. [laughs]

Jen

Rotate is going to be its angle, and that’s probably one of the easier things to use.

Val

Yeah, it just it takes regular degrees, so it’s pretty easy to think up. You can also put in just number of turns.

Jen

Oh.

Val

You don’t have to come up with numbers.

Jen

So if somebody wanted— Because it used to be for years you couldn’t make words go vertically on the page, you know?

Val

Mmm-hmm.

Jen

If you wanted to make a book with the title along the spine of the book, you know, where you had to turn your head sideways to read it.

Val

[laughs] Yeah.

Jen

Because then you would need, you know, 2008 or 2006 or something, you would need to make a GIF or a JPEG out of the picture of the book with the text in the image that you could have it like that.

Val

Yeah.

Jen

But now you could actually make, you know, “Oh look! A box, a blue box. It’s got a line around it. Oh, it’s got a drop shadow. And oh look the text runs up the spine of the book!” by using transform: rotate to rotate the text into place.

Val

Yeah. It’s definitely—

Jen

I don’t see that as much. I feel like all of these things are— That works, and we’re not using it yet. [laughs]

Val

I wish there— Some people are using it. It doesn’t get used— I guess maybe it’s just not super used everywhere yet, but I know it’s definitely, definitely gets used here and there, but I think we’re all still figuring out what to do with this stuff. [laughs]

Jen

Yeah. Or we don’t remember that these are options.

Val

Well that’s the other thing, right? It’s like, it never was for how long? Like, pretty much forever? So— [laughs]

Jen

Yeah.

Val

Sometimes you forget you can.

Jen

Yeah. And if that doesn’t work in IE8—

Val

Yeah, and then there’s that too. I mean, if you’re dealing with old IE stuff or older browsers maybe it’s just not an option for you yet, which is…

Jen

Right.

Val

…kind of sad. But soon.

Jen

But it looks like CSS transforms work pretty much everywhere except IE8.

Val

Yeah. The support’s not bad. I mean, IE8 definitely’s going to get ya, but pretty much everything else is at least partly supported or just about there, so.

Jen

Looks like 3D transformations work everywhere except IE9 and earlier.

Val

Mmm-hmm. Yeah, you’re like, “Aww man, always IE!”

Jen

And then there’s skew and perspective, which if you’ve ever used like Illustrator or something and sort of the difference between— There’s a bunch of different tools: one that rotates, one that skews, so it’s got some of that stuff. Like does it get distorted in any way so that it appears to be more on a three dimensional space then if it were a, you know, rather than taking a square and rotating it. You take a square and you squish the top two corners and it turns into a trapezoid and like, that kind of stuff. There’s possiblities with translate.

Val

Yeah.

Jen

Sorry, transform.

Val

[laughs]

Jen

Yeah. Translate. Tranform? Yeah, transform. transform: skew. So, transform: translate, transform: scale, transform: rotate, transform: skew, transform: perspective.

Val

And the perspective one kind of works together with anything you’re doing in 3D space. You usually actually for best results set perspective on the containing element, and then you’ll be using the same perspective for all of your 3D transforms, translates, whatever else. So that’s a handy one to set in one place.

Jen

And perspective is how people are making 3D cubes and stuff, right?

Val

Mmm-hmm. Mmm-hmm.

Jen

Yeah.

Val

It’s essentially like how far away you are, but it’s kind of like a cone shape distance. So like smaller values will be much more exaggerated and larger values become closer to being flat. So it’s definitely one to play with if you’re doing anything with 3D. It totally changes the way things look and it can be pretty— It can make for some pretty fun effects.

Jen

Nice. So, we talked about transforms.

Val

Mmm-hmm.

Jen

Now let’s talk about translate.

Val

Yes.

Jen

Err, no I'm sorry not translate. What’s it called? Transition.

Val

Transitions. Okay! [laughs] We’re tongue-tying ourselves here. Yeah, transitions are essentially a way to go from one place to another and have some sort of smooth movement or smooth transition between point A and point B. We use them on hovers a ton, right? Where you’re— You have your element, whatever it is, and you’re like, hey, you assign the transition to that div you’re working with and on hover you change some property, and then that transition takes place or it takes affect for that property change when you hover over it. And then when you hover off of it it’ll go back. So transitions are like a point-A-to-point-B, back-and-forth kind of thing. But of course you can do, you know, you can do its positioning through translate, you can do its color, you can do its opacity. Like, there’s a lot of things to— I don’t want to make it sound like it’s only good for one tiny thing because there’s still a ton you can do with those.

Jen

Yeah. So, a transform you might say I want this box, when you—. You know, I’ve got a link and I’m going to make it a big box and normally I want it to be blue and square and straight. And when I hover, I want it to be red and have rounded corners and be rotated 45 degrees.

Val

Mmm-hmm.

Jen

If I just use transforms, I can have it jump.

Val

Mmm-hmm.

Jen

So in the hover state it would jump from the straight blue square box to, you know—

Val

Yeah, you know, just like a hard cut. It would not be pretty.

Jen

Yeah.

Val

[laughs]

Jen

It would meep, meep. Meep, meep. Meep, meep. But if I put a— But if I— If I use the transforms, but I also toss into the mix a transition,…

Val

Mmm-hmm.

Jen

…then the transition can have it, like, fade from red to blue…

Val

Yep.

Jen

…through the state of purple, and it could— You could see the square corners morph into rounded corners and you could see the box that’s flat with the horizon turn 45 degrees.

Val

Yeah!

Jen

Right. And you can set the timing on that as well, right? So you could have that happen very quickly…

Val

Mmm-hmm.

Jen

…like over, you know, a quarter of a second, or you could have it happen very slowly. You could take 10 seconds or a minute,…

Val

Take— Yeah, you could take as many seconds as you want, though…

Jen

…an hour, [laughs]…

Val

It might be a very sad hover effect if takes an hour. But, you know, whatever you want to do! [laughs]

Jen

And transition, can you basically apply transition to like anything?

Val

Most of us seem to be setting transition on all, which basically means, “Hey, if any property whatsoever changes on hover or some other changeable— some other way you can change properties, transition all of them using these rules.” You can also target it. Like if you know you’re only going to change the background color on hover let’s say, you can just say “Hey, transition the background.” But if you say transition: all, all of your properties — anything that changes that is transitional — will, you know, have a nice smooth transition based on the timing and the easing that you pick.

Jen

So is— Transitionable means, I mean can you transition what font you’re using?

Val

No. They have a list in the spec of the transitionable properties. There are definitely properties not on that list that you can transition, and I don’t know if that’s like a living document that’s going to be updated or not. But you can’t transition things like the font your using but you can transition the color of it and its positioning and its, you know, rotation and all that. So they do have a list but I don’t think it’s complete, at least not since I last checked.

Jen

We should um— So, I mean clearly the things you’d want to transition typically…

Val

Yeah.

Jen

…are background-color, opacity, corners — square corners, rounded corners. Anything like that.

Val

Any of the transforms we just talked about. You know, there’s really no shortage of things you can transition. [laughs]

Jen

And this is where it does feel like the biggest problem right now is a lack of imagination. Like, we’re not—

Val

Yeah, and I think it’s also that— You know, you can’t— Unless you have a decent handle on CSS you can’t really use this stuff, right? Like you have to have at least — even though it’s a little bit strange even as far as CSS goes — you know, if you knew nothing about CSS you’re not going to just dive in and start doing transitions and animations, and it’s all very code-based. So there’s no good visual way of doing these things. I think that’s the other issue is that a lot of people who maybe do animations traditionally or have a background in it, they’re used to thinking about these very visually, not typing out lines of code to say what should happen. So, I think that’s a barrier too. It’s like there’s no good way to do this without writing code yet.

Jen

I think, I think I have the right list. So background,…

Val

Mmm-hmm.

Jen

…borders, color, font-size, -weight, height, presumably width yeah width, margin,…

Val

Mmm-hmm.

Jen

… — interesting one: to transition a margin — …

Val

Yeah.

Jen

…padding, text-indent, text-shadow, visibility, opacity, letter-spacing. I’ve not hit them all but—

Val

Yeah. There’s— It’s a long list.

Jen

left and right, which means if you’re absolute positioning something you couldn’t— So we were talking before that you could move something by transitioning a transform and having it physically move. You could also transition an absolute position of the item and have it move or you could transition the margin of an item and have it move.

Val

Mmm-hmm. There’s many options, though apparently— At least there’s been a lot of posts by people that are much more knowledgeable about the inner workings of browsers than myself. A lot of people like Paul Irish and them have been doing a lot of tests to see, you know, which one of those ways of making things move is more performant, and it seems that using transforms can actually gain you a decent amount of performance just as far as that being either, whether it actually becomes hardware accelerated or not kind of depends on exactly what’s going on in the browser. But for the most part everyone seems to agree that using transforms to move stuff around when it comes to transitions and animations is going to gain you some performance. So, that’s pretty awesome.

Jen

So you’re transitioning your transform: translate.

Val

Yeah instead of doing top and left…

Jen

Right.

Val

…to go with transforms, it’ll give you better performance.

Jen

Transition, transform, [both laugh] translate.

Val

If it doesn’t start with a T don’t use it. [laughs] No, but that’s an interesting addition to all of that, is just that using transforms can often get you hardware acceleration…

Jen

Yes.

Val

…or other things that are pretty darn handy when it comes to wanting things to perform well and move smoothly.

Jen

Yes, and that was something that I was not quite aware of. I was like, “Ahh, I’ll just use all of them and I‘m not going to worry about performance,”…

Val

Mmm-hmm.

Jen

…and I was working on this project which is extremely heavy in animations.

Val

Yeah.

Jen

I mean, that was sort of the whole point was for it to be totally crazy-heavy with animations. And I did the navigation as a bunch of round circles, and everything is responsive. So they’re all over the place. And, you know, different places on the page depending on the size of the screen, the viewport. And then when you click on any of them, they all move. And when you click on one of them again, they all move back to where they were. And looking at them on like an Android phone, they looked like crap! They did not move smoothly at all!

Val

Oh no!

Jen

And I was like, “I should really go look up that whatever-that-was about performance!” [laughs] And I redid— Because I think I had positioned them absolutely because I was like, “Oh! Uh, I want these to be floating in space. I’ll just position everything absolutely using viewport units,"…

Val

Yeah.

Jen

…which was kind of awesome.

Val

I love the viewport units. [laughs]

Jen

Oh viewport units are so awesome. But then I had to rip it all out and redo all of the CSS and all of the layouts for that…

Val

Ohh!

Jen

…because they were not— It was fine! I mean, the whole point was to be an experiment and the whole point was to, like, learn. So I learned.

Val

There’s nothing like learning by making it all over again. [laughs]

Jen

Yeah.

Val

That stuff’s always a lesson.

Jen

So it was really like oh yeah. transform: translate. Transition the transform: translate was way better. And then— Especially on lower-end hardware like a phone.

Val

Yeah. So it’s impressive how sometimes even on very small things, you’re like, “Wow! I actually do notice a difference.”

Jen

Yeah.

Val

Because some of that stuff, you’re like “Ehh, you know, I’m only transitioning this one thing here, who cares?” But actually, you should totally care. Even on a couple of things, you could noticeably see a difference, which is pretty cool.

Jen

Yeah. Because what you really want is, you know, what ends up mattering comes over from, like, thinking about video.

Val

Mmm-hmm.

Jen

If you have a video that’s 24 frames per second is a typical film and traditionally 24 frames per second is what film was…

Val

Yeah.

Jen

…way back in the day and continues to be typically. 30 is more like television. But sometimes there’s a way — in which I will not get into — but there’s a way in which the TV screen gets painted twice because the old school from the ‘40s jets…

Val

Ohh yeah!

Jen

…the rays on the glass and they would paint half the screen and go back and paint the other half of the screen. So lots of times people think in terms of 60 frames per second is kind of a holdover from that, which in some ways when you’re doing, like, recording of people if you use too many frames per second it kind of starts to look cheap.

Val

Mmm-hmm.

Jen

It starts to look like a bad soap opera or something.

Val

[laughs]

Jen

And so people really love 24 because they think it’s more cinematic than using 30 or 60. And…

Val

Yeah.

Jen

…if you’re doing cartoons for television, you know, you’re thinking about 30-whatever-whatever. But I know back in the day when we’d make Flash, and Flash had to run on, you know, modem connections and slow computers, lots of times people would make 10 frames per second.

Val

Yeah they would just drop the frame rate and hope that it would catch up or–

Jen

And then it starts to look like a flip book almost, right?

Val

Mmm-hmm.

Jen

And it makes a difference I think. You know, you’re holding this Android phone and the browser is painting the screen and as that object, that circle is moving from one corner to another corner, it’s like repainting the screen over and over and over, something. Somebody more technical can explain what’s really happening. But the frame rate matters. And so if you end up with like a 10 or 15 frames per second, it’s going to look— You know, or this may have been three frames per second. So they were like looking like it was stuttering, like the computer was freezing and then it would jump over and then it would like unfreeze and freeze and unfreeze—

Val

[laughs] Sounds awful. [laughs]

Jen

Yeah! I mean just looked kind of— And it wasn’t always the same, right? So that contributed to this idea of it being kind of broken.

Val

Yeah.

Jen

Where once it was redone, you know, if you can get 25 frames per second or 60 frames per second or whatever, whatever it is the browsers are wanting to do, the more frames per second you can get that graphics card to draw the smoother it will look, the more elegant it will look.

Val

Yeah, and it’s amazing how even small differences we can actually see. You know, our eyes pick up a lot when things start moving as far as different frame rates. Like you were saying, the soap operas and 24, like you can just—

Jen

It’s a big difference.

Val

You notice a lot. And you know for things to look right and feel right, they just have to be— They have to be smooth but not just that. Kind of going at that ideal speed, whatever that is. You know it when you see it, but it’s really hard to describe.

Jen

That’s what was somewhat so profound and beautiful about the original iPhone was that Apple worked so hard on some of these issues…

Val

Mmm-hmm.

Jen

…and got really beautiful. And then, you know, as other companies started making very similar products, sometimes they were not nearly as— The animations in the apps and those products…

Val

Yeah.

Jen

…sometimes they were not nearly as beautiful. Graphics card is much cheaper. The hardware is much cheaper. The touch screen is much cheaper. I had an Android 1.6 tablet for a while [both laugh], like really bad tablet, and it just was unbearable. Like, when you go to scroll the page, it just went—

Val

Oh yeah, the scrolling on Android used to just kill me everytime I’d try to use it. I’d just be like, “This isn’t working! I can’t do it!” [laughs]

Jen

Yeah.

Val

And it was really just the responsiveness of the scroll movement. That was the only thing, and it was driving me nuts.

Jen

Yeah. So now suddenly this becomes part of a front end developer’s world because if you’re writing CSS for a website, and you’re writing production code — you know, maybe you’re writing prototypes and it’s fine —…

Val

Yeah.

Jen

…but if you’re writing production code, there’s things that you can do to affect the quality of the result.

Val

Yeah, and it’s— It does become a whole ’nother way of thinking about things and a whole ’nother way of thinking of performance.

Jen

Yeah.

Val

So it can be a big challenge.

Jen

So, what else do we want to know about transitions?

Val

Umm, I don’t know! [laughs]

Jen

[laughs] So transforms are really not necessarily about motion or movement. Transforms are just about changing what would have been if there were no transforms.

Val

Mmm-hmm. Yeah.

Jen

And you can go— That’s where those, where I said if you were drawing a book cover spine, you might do that with a whole bunch of transforms and no transitions at all because a book cover is just sitting there on the page.

Val

Yeah.

Jen

Then transitions can not only transition all the new things that a transform can do, it can also transition a bunch of old things that regular CSS used to do by itself.

Val

Yeah.

Jen

Like opacity or a color.

Val

Yeah.

Jen

Just transform a color.

Val

Yeah.

Jen

It seems like there are ways that you could, like if someone wants a place to start to just specify a transition—

Val

Oh yeah, that’s definitely the place to start. I mean, just to get that idea of— Because it doesn’t just, it’s not like when you transition something you just get one type of transition. I mean, you tell it to transition whatever property you use, and then additionally you get to pick how long it’s going to take, what type of easing or CSS calls it the timing function you’re going to use. And you can get some very very different effects even just changing the timing and the easing. I mean, the amount of time, the duration and the timing function, those have such an effect on just the way things look in the end and the way things feel. There’s a lot you can do with those and kind of playing around with transitions and seeing what you can get out of it.

Jen

So you could just put a transition on your hover instead of jumping to a different color—

Val

Mmm-hmm. Oh yeah. That’s the first place to start. Definitely.

Jen

It can be a fraction of a second, but it just fades into the second color…

Val

Yeah.

Jen

…and then fades back out to the first color.

Val

And even those things, those transitions we do that are a fraction of a second, like, you can see the difference. You know, it gives a completely different feel than something doing a hard cut to its hover state.

Jen

Yeah.

Val

These are just tiny bits of code, but we can change so much of the overall feel of the site we’re working on or the app we’re working on. They’re pretty powerful, and really fun, so you should definitely try them out. [laughs]

Jen

So the duration is kind of obvious.

Val

Mmm-hmm.

Jen

Like one second, half a second, four seconds, right?

Val

Yeah, it can also take milliseconds if for some reason you’re a millisecond person. Most people I think are better at thinking in seconds, but you know, whatever.

Jen

Property, transition property, you define what CSS properties are going to get transitioned.

Val

Mmm-hmm.

Jen

Delay, that’s interesting. So you can then toss a delay in there that the transition starts…

Val

A little late, yeah.

Jen

…after the trigger, whatever the trigger is.

Val

And I want to think, really, at least for me I only feel it comes in handy if you’re multiple transitions. If you’re transitioning multiple things separately or something, because if you hover over something and it doesn’t seem like it reacts to you for awhile, like that sucks. Don’t do that. [laughs] You know, delaying a transition is probably not a popular thing.

Jen

But if you’re going to have something slide in and then explode [laughs]…

Val

Yeah.

Jen

…like zoom into you. You could have it slide and zoom in.

Val

Yeah, I mean, just like delaying transitions sometimes is not always such a good idea. [laughs]

Jen

Yeah. So it’s more like if you have a two step animation.

Val

Yeah. I use delays a ton with more like the actual animation animation. Pretty much never with transitions. There’s definitely— I’ve seen some fun effects with it. So it’s not like never do it but it’s just, you know, keep an eye on that. [laughs]

Jen

Right. Be— [laughs] It’s a superpower that you need to use wisely.

Val

Yeah. Be careful. Yeah and I guess the other one would be the timing function, which is basically just describing how the motion should happen. You know, we have keywords like linear, which will let it be the same speed all the way across; ease-in and ease-out, which will change the speed and vary it; and then we also have a couple other keywords as well as defining your own cubic Bézier function, which means you can make that motion…

Jen

Wow.

Val

…and speed up and slow down in any way you want using math.

Jen

So, this is where calculus comes— If you remember—

Val

[laughs]

Jen

Anybody remembers— I guess you don’t need— I guess you might need to know calculus if you want to create your own Bézier functions, but if you just want to not go crazy and— But remembering from calculus — if you ever took any of calculus — that you can, that not only is there the rate of change of something, but you can change the rate of change. So—

Val

[laughs] Wow, we’re getting really deep here. [laughs]

Jen

Right? Like, that’s what this is. This is saying, I want, you know— I mean, imagine this race car driving down the street, right? Your race car has got to go one block. It’s going to start on the one corner and it’s going to end on the other corner. It’s only going one block. So your race car could go 50 miles an hour the whole time, right? Or it could go 100 miles an hour for the first part, and then slow down and be going at, like, 30 miles an hour at that last part. Or it could be going 30 miles an hour at the first part, and then speed up and be going 100 miles an hour at the last part, right? So it’s that kind of thing as far as the timing functions—

Val

You have fine-grained control. And the nice thing is you don’t have to do the math yourself.

Jen

Yeah. No, no, no.

Val

I mean, if you wanted to fine tune the numbers between zero and one, go nuts. Or you can use something like the Caesar tool that will let you preview ones and create your own curves. There’s also cubic-bezier.com I think it is? I’ll give you the actual links—

Jen

But before you get into that, aren’t there a bunch already predefined?

Val

Mmm-hmm. Yep.

Jen

I mean, there’s like ease,…

Val

…ease, ease-in, ease-out, ease-in-out, and linear. [laughs]

Jen

Right.

Val

So there’s keywords, but they only get you so far. So the— Customizing your cubic Bézier function can just give you a completely different look to things and, you know, sometimes those keywords just aren’t really enough. You’re like, “Ehh, it’s easing out but I just don’t know if I like that enough.” So go make your own curve.

Jen

And this is where people who really know animation, you know, maybe they’ve worked in the animation industry…

Val

Mmm-hmm.

Jen

…totally get into this stuff. And…

Val

Oh yeah.

Jen

…they would want to know. They would want to be like, “Yes, I’m going to write my own cubic Bézier curve. I already have 12 of them. Here they are.” [laughs]

Val

I mean, it’s not quite the same type of curve. Like in AfterEffects you can use a motion editor and just edit your curves. Even some of the later versions of Flash had that, I forget what they called it, but you could edit the curve for your tweens as well. So, it’s definitely something that’s a pretty sophisticated way of controlling motion. So it’s pretty great that we actually have that in CSS as well…

Jen

Yeah.

Val

…because I feel like without it, it would be really hard to take this stuff seriously. [laughs]

Jen

Yeah.

Val

If you only had the keywords, you’re like, “Ehh, boring!”

Jen

And there are a bunch of demos. We should find one and put it in the show notes for the show.

Val

Oh yeah.

Jen

There are some demos that show you, like, the race car going down the block — as far as ease, ease-in, ease-in-out, ease-out — to just visually see. Because, you know, if you’re doing a hover and it’s going to take half a second, the— That difference between ease-in and ease-out is subtle but you could still play with it.

Val

Subtle but noticeable.

Jen

Yeah. But you don’t necessarily have to get into the writing your own thing. You could just kind of learn which ones you like and which ones give you which kind of feeling. Get to know these first.

Val

Stick with the keywords first, but then go into the cubic Béziers because it’s a whole new world of just like— The math behind them is kind of crazy math-y, but what you can do with them is just, it’s really useful and pretty interesting. So I’ll give you some links too of some good demos on what those all do.

Jen

Cool. So did I say the link? No. So if you want to see the show notes for the show, you can go to 5by5.tv/webahead/53 since this is episode 53, and there’ll be a whole page there with all the links from the show to all the stuff we’re talking about today. Alrighty. So anything else about transitions?

Val

We should probably get to animations since they’re the more complicated ones. [laughs]

Jen

So, animations!

Val

[laughs] Yes!

Jen

So we’re 45 minutes in and we haven’t on the animations show and we haven’t—

Val

Oh no! [laughs]

Jen

Oh we’re totally fine! And we haven’t talked about officially—

Val

We haven’t talked about the official animations—

Jen

Animations animations. Yeah, because I mean there’s a way in which we’re talking about, you know, animating things, making things move.

Val

Mmm-hmm.

Jen

And then there’s the animation, the one that where you actually type in the code…

Val

The word animation. [laughs]

Jen

.class { animation: something-or-other }

Val

Yeah.

Jen

So, explain what that is.

Val

Well, I guess we can just refer to it as the animation spec? That’s what I usually call it for lack of a better name for it. Basically, it’s a way to make things move with CSS by defining keyframes. So, like we were just talking about transitions being between let’s just say just point A and point B, I mean you only can really do back and forth. Animations can be between point A and pretty much anything, because you can define keyframes in percentages as one of the options is percentages, and those you can go from 0 to 100, and you can also use decimal places. So it’s not infinite but quite neary infinite, the number of, you know, stops or, you know, bits along the way of your animations or pieces to your animation or stops along the way of your animation that you want to have. So keyframes define what will happen during the animation, and we have a variety of ways to define those. And then the other part of the animation spec is you then assign those keyframes to a particular, you know, object in your HTML and you say, “Hey, take these keyframes that I’ve named whatever and use these to animate this object.” And that’s where you would add things like the duration and the timing function and a few other properties that we can add to kind of control things and fine tune things basically. So there’s a lot more you can control with animations as opposed to transitions, and it gets a lot— It’s a lot more to write, but you can also control more things.

Jen

So what you’re— But what you’re basically, I mean, this is my understanding, so totally correct me when I’m wrong.

Val

Mmm-hmm.

Jen

If you’re using transitions or transforms…

Val

Mmm-hmm.

Jen

…then you’re basically writing CSS the way you would normally write CSS. You’re right there. You’re saying sidebar, you know, rotate 90 degrees.

Val

Yeah those all happen right in with everything else.

Jen

Yeah, you put it right in the rest of all of your CSS, including the transition itself…

Val

Mmm-hmm. Yep.

Jen

…where you’re saying, you know, “You’re a hover. I want you to do this two second transition.”

Val

Yeah, there’s nothing external for a transition. Everything is still within that same block you would have written all the other properties.

Jen

And then with animation basically what you are doing is you’re going off someplace else.

Val

Mmm-hmm.

Jen

Now maybe this someplace else is just higher up in the exact same stylesheet.

Val

[laughs] Not like in another room, but yeah.

Jen

No, I did it in another file. Like, I made a separate file, right?

Val

Oh yeah.

Jen

A little bit like if you’re using Sass and you’re going off someplace else in a separate file or…

Val

Mmm-hmm.

Jen

…just in a separate part of your— How you have everything organized. And you define a bunch of variables. You like go off in a separate world…

Val

Mmm-hmm.

Jen

…and you define— You just make them up. You’re like ladybug animation, and you just call it ladybug and then you define what that is,…

Val

Mmm-hmm.

Jen

…and then you can go into your “regular CSS” and you just call ladybug and the system goes, “I know what that is! That’s an animation that you made up,” and it activates that. Right?

Val

Essentially, yeah. Yeah, we create our list of keyframes, you know, which the keyframes are what define the motion, define the animation. You can keep those all out somewhere else. It helps to keep them together somehow, you know, depending on how many you’re doing, whether you do it in a separate file or not.

Jen

Yeah.

Val

I mean, I know for your project it probably made complete sense because you were doing so much. But maybe if you had like three, maybe not so much. But you create those keyframes, those list of keyframes, and you kind of package each up as a set of keyframes. You give it a name. And then once you have those set of keyframes, you can go and assign that to multiple objects, one object, you know or many times over. It kind of gives you that extra flexibility where you have this, this motion, this list of things to change, this animation defined elsewhere and then you go and take that and assign that where you need it.

Jen

You can reuse that one—

Val

Mmm-hmm.

Jen

You can reuse that ladybug animation…

Val

Oh yeah.

Jen

…in 27 different places on different—

Val

You can have 27 different ladybugs all using the same keyframes.

Jen

Right. The same animation that you defined.

Val

Yeah.

Jen

So, and then the keyframes is basically what you’re saying, I mean, anyone who understand animation recognized the word keyframe, right?

Val

Mmm-hmm.

Jen

If you ever used Flash, you know, you recognized the word keyframe. It’s like a moment when you’re defining kind of where you want everything to be. So if you have, let’s say you have…

Val

Yeah.

Jen

…a square, and you want your square to like bounce around the page in a certain way, but it’s got to zig-zag all over the place. Then those keyframes might be— The first keyframe would be, okay, where’s it going to start…

Val

Mmm-hmm.

Jen

…and then it’s going to zig so you don’t need to define what happens in the middle.

Val

Yeah.

Jen

That’s going to happen with a transition, but you’re going to define the point at which it’s going to like bounce off the corner and change direction. So that becomes a moment, and then it’s going to do something for a while and then it’s going to change what it’s doing. So that’s another keyframe where it changed.

Val

Yeah.

Jen

And then it’s going to do something for a while and then— Right?

Val

Yeah, so you should just in that case of your zig-zagging square you’d just define basically all the endpoints of where it starts. The first zig, the second zag. Whatever.

Jen

The elbows.

Val

Yeah, all of the elbows and you could have like 10 of them. You could have three of them. You can define as many keyframes as you need to. So the extra flexibility becomes really obvious as compared to like just a transition where you’ve only got two points. Animations, you could zig and zag as much as you wanted.

Jen

And then the things that you define at each keyframe could be plain old boring CSS. It could be…

Val

Mmm-hmm.

Jen

…I want this headline to be green. Then I want it to be purple. Now I want it to be orange. Now I want it to be red. And it would fade— Oh! And I want it to fade. I guess you would have to put that in there,…

Val

Yeah.

Jen

…otherwise it would jump.

Val

[laughs]

Jen

So you tell it to transition from one color to the next to the next to the next.

Val

Yeah, you can put any properties in there you want. A lot of the time for movement, again we’d use the transforms just for the extra, you know, performance. But everything else — like changing your background color, your opacity, your border radius, all of that stuff — is just like regular properties you define in each keyframe. And you can define as many of them as you want. You know, there’s really no limit there. They keyframes can get pretty insane. [laughs]

Jen

Yeah. But it also could be— I mean, I avoided it because I was like, “I’m not doing something insane. I don’t need this.” And I was trying to do things simply with a lot of transitions. But I very quickly was like, “Oh, I need this to start at the beginning again.”

Val

Yeah, you started running out of, you know, options with transitions.

Jen

I just needed really simple things. And I began to realize that an animation with two keyframes was actually a better way to go.

Val

Yeah.

Jen

Also because I could reuse it.

Val

Because you have more control over— You can reuse it. You can do things like change your direction and just— It’s more flexible. I guess it’s more modular in a way.

Jen

It’s more object-oriented. It’s kind of—

Val

Picking it up. Use it again. It’s still there. You can use it on something else. There’s just a lot more you can do with the animations. So even if you do have a really simple one that’s only a couple of keyframes, you’re still getting an advantage there that you wouldn’t have if you were trying to transition that.

Jen

So I could have an animation that’s like, okay at 0% I want opacity to be 0, and then at 50% I want opacity to be 1, and then at 100% I want opacity to be 0 again.

Val

Mmm-hmm.

Jen

And I want it to fade in there. I don’t want it to jump, so I need a transition in there. And it’s going to fade then, so if I say somewhere else, I say I need the fade in and out transition because I decided to call it fade-in-and-out.

Val

The animation.

Jen

Yeah, animation. I just, I don’t know what to call this. I’ll call this fade-in-and-out, because I made that up. Then I can come over here. Say, “Hey, animation fade-in-and-out, be 10 seconds.” So it would take five seconds for something to appear and then five seconds for it to disappear. And then five seconds for to appear and five seconds to disappear. And you can set it to go in a loop and it’ll just keep doing that until it— forever.

Val

[laughs]

Jen

Forever.

Val

Yeah, so there’s that extra flexibility of just being able to reuse it, change the duration for various properties, or various objects rather. Or yeah, just have it loop infinitely forever and ever.

Jen

Yeah, and the duration is defined when you actually use the animation.

Val

Mmm-hmm. Mmm-hmm.

Jen

So like I defined one that was fade in and out. And it was like, I can use this anywhere. And over here I’m going to have it fade in and out over 10 seconds, and over there I want it to fade in and out over one second or two seconds. And over here I’m going use it over 30 seconds.

Val

Yeah. Because you had your fade in and out keyframes and then you just assigned those with different properties to different objects and suddenly you had long fade in and outs, short ones, and you only wrote one set of keyframes. So that’s kind of handy.

Jen

Yeah, and that was— That took me a long time to figure out that that’s the way to go, but once I did and then I got the hang of the syntax…

Val

Yeah.

Jen

…it made things happen much quicker.

Val

I think, at first especially when you first start with them, you’re just like, “Alright, I’m going to write the keyframes for this animation, you know, animation A. I‘ll write the keyframes for animation B.” And then you realize later how similar those two animations were and you could have used one set of keyframes, but I think you just— You have to use them a little before you start making those connections.

Jen

Yeah, absolutely.

Val

You know? I don’t think you can jump right into I’m going to reuse this one! It’s going to be perfect! You just, you kind of stumble upon that and then you’re like, “Oh yeah! Hey, these aren’t— That’s a pretty way to do it! I feel, like you know, so much smarter with these animations now.” [laughs]

Jen

And I think, I mean, here— So here you tell me what I should have done. I think I started using animations because I wanted something to loop and repeat itself.

Val

Mmm-hmm.

Jen

And I couldn’t— Like I wrote this whole thing with just transitions and I realized it wasn’t going to do that.

Val

Yeah, I know.

Jen

And so I switched to animations so I could get that to happen. Is there a way to have things loop or, like, reset to first and stay on the first using just transitions or is that only possible with animations?

Val

It’s definitely, I think, especially with some help with some JavaScript you could do it, but I would just use animations and it’ll be so much easier if that’s what you’re trying to do. You know, you get that looping over and over…

Jen

Yeah.

Val

…and to have things like, you know, stay at the end of the animation and not, you know, not go back, you know, just use animation-fill-mode as opposed to like removing a class name in JavaScript…

Jen

Oh that was the other thing I wanted all the time. And I was like, “Who wrote this?”

Val

[laughs]

Jen

I wanted it to be like, I wanted state A and then I wanted something to change and go to state B and then I wanted to stay in state B.

Val

Yeah. But by default it bounces back and drives everyone nuts!

Jen

It bounces back to A! Why are you bouncing back to A? And I couldn’t— I just remember hours and hours of trying how to get things to go. And in the end it was like yeah, you an animation and then set the fill state, is it called? What’s that called?

Val

Oh animation-fill-mode.

Jen

Fill mode.

Val

Mmm-hmm. Which is defaulted to go either, so you could go forwards or backwards to help keep your states of your first keyframe or your last keyframe at the end. It is— Yeah, I think everyone goes through that. They’re like, “What?! This is so stupid! It just keeps bouncing back to the left when I try to move it to the right!”

Jen

Right! [laughs]

Val

And then you discover animation fill mode and you set it to, you know, forwards and you’re just like, “Oh!”

Jen

Done!

Val

That was it? [laughs]

Jen

Right.

Val

I kind of feel like that’s like everyone who has dealt with CSS animations has gone through that moment.

Jen

Yeah.

Val

You’re just like, “Oh.”

Jen

I think the default should be different than what they are because of course you want it to just stay and be. And then…

Val

Yeah how often do you want it to…

Jen

…if you wanted it to jump back to A then tell it to jump to A or tell it to transition to A or tell it to wait 50 seconds and then jump to A, you know? But—

Val

Yeah, it’s all that stuff that just takes a little getting used to and just like how would have even thought to look for the property animation-fill-mode if you didn't know it existed, right? Like that’s not— It’s not like when you saw your ball or your box bouncing back to the left when you wanted it to stay to the right. It’s not like you were like, “Oh, that must be animation-fill-mode,” but that’s not language anyone uses. [laughs]

Jen

Fill mode, to me, would be like, “We’re going to pour a bunch of red paint into this bucket. Would you like us to fill it all the way to the top? Or would you like us to—” [laughs]

Val

Yeah! So the naming of some of these things is just—

Jen

What is a fill mode? I don’t know what that means.

Val

It’s just not intuitive at all. I feel like it’s harder to discover in a way. Because you’re like, “Oh, what might that property be?” You know, sometimes you can guess, but who’s ever going to guess that? So, it’s kind of like once you find out about it you’re extra happy about CSS animatons.

Jen

Yeah. And then, as you were eagerly pushing people to think about, you can do very complicated things with this.

Val

Mmm-hmm.

Jen

I’m more excited about the simple things, because I think that they’re more likely to be needed or used on a normal project…

Val

Yeah, yeah.

Jen

…kind of a normal website. And I like it. I like thinking about everyone using something.

Val

Oh yeah.

Jen

You know, you’re building the next my local news web newspaper website .com and you, you know, it’s a traditional newspaper website. You’re not going to go crazy. It’s not a video game. But you— There might be little ways that you want to add animation or add…

Val

Yeah.

Jen

…transitions so that it’s more— It’s clearer to people what’s happening.

Val

It just gives it more, like, a different personality…

Jen

Yeah.

Val

…than straight cuts. And that’s where the modularity of animations— You know, you were talking about your fade in and out animation. Like, it’s super simple. You can reuse it. That’s awesome and the fact that we can make more complicated ones is also awesome…

Jen

Yeah.

Val

…but in a completely different use case. You know, it’s kind of nice to have that flexibility where we can do this really simple stuff so easily now and we can also go really crazy and make insane, humongously complicated things all with CSS.

Jen

Yeah! And you were mentioning before JavaScript, but…

Val

Mmm-hmm.

Jen

…I was working as much as I could to not use any JavaScript…

Val

Yeah, yeah.

Jen

…because CSS is faster.

Val

It is, and I think the thing is when you’re doing CSS animations and transitions you can do all the actual, like, motion of the transitions and the animations in CSS and then just do some basic, like, class switching in JavaScript to help manage those better. So JavaScript isn’t causing any motion. It’s literally just, like, toggling some classes, changing class names to retrigger animations or, you know, change properties on animations. So, using them together is probably about 500 times more fun than using one alone.

Jen

Yeah.

Val

If I had to pick a number. [laughs]

Jen

Well, that’s— That is absolutely true. So there’s a way you could— People could use JavaScript and they have in the past, and they will continue to in the future to use JavaScript to create animations, to make things move around on the page.

Val

Mmm-hmm. Yeah.

Jen

And there are plenty of times where that’s going to be the correct solution, especially if you’re doing something very complicated.

Val

Or older browsers, you might have no choice.

Jen

Or older browsers. Or you love JavaScript. [both laugh]

Val

Well even then I would ask you to consider using CSS for the motion.

Jen

But if you have a situation where you could accomplish the same motion using CSS or JavaScript,…

Val

Mmm-hmm.

Jen

…my sense is that, you know, 10 out of 10 developers who know will tell you that you should do the motion with CSS, because it’s going to render, it’s going to paint to the screen, way faster.

Val

Yeah, that’s always the case is the rendering is just going to be better.

Jen

It’s going— CSS will kick JavaScript’s ass. The JavaScript does’t have to run…

Val

[laughs]

Jen

You know, instead of having complicated JavaScript you just have simpler code.

Val

Yeah. You can still use JavaScript for the logic of, you know, when does something open and when you want it to move you assign it the class that triggers the animation. There you go.

Jen

Yes, well— That’s, that’s the thing though. That’s the thing, I mean, what can you animate using CSS beyond hover without using any JavaScript?

Val

Well you can use some things, I guess like target. I feel like it just gets very— Even with hover if you’re doing too much on hover just with CSS, I feel like it gets very fragile and difficult to control. So that’s where the JavaScript logic of just—

Jen

Yeah.

Val

You know, I know when this has been hovered over so I will do this thing and then have a little bit more logic than just, like, is the hover on or hover off to make things, you know, keep going even if you moved your mouse if they should be, or just timing things out. You know, you can do a lot with delays on CSS animations for sure, but maybe just for your own sanity you’d rather just use JavaScript to take care of what order those should happen and at what time they should.

Jen

Yeah. I mean, that to me was another big lowering point, is like okay I can totally make a transition on a hover. That’s cool. I can change the color, maybe it’s a button. That color, the background color of that button changes, or you know whatever. But I want to do something where you’re using a touchscreen and when you touch this button this thing shows up. Or the thing that was there slides over to the side. Or all these— You know, I got a whole bunch of different ideas. When I click the button or the link, I want to make a transition for the whole page to flip or I want the page to scroll and then like this thing that was down at the bottom, this dinosaur comes out and eats the thing we were looking at. Like,…

Val

[laughs] That sounds like a fun one.

Jen

None of those things are going to happen on hover alone. Like you need JavaScript. You have to write JavaScript to trigger the event that’s going to cause the animation to happen.

Val

Yeah.

Jen

And so you’re writing— You’re writing what’s happening in CSS but basically you’re targetting the CSS to a class.

Val

Yeah.

Jen

So you need a class.

Val

Mmm-hmm.

Jen

So maybe on your HTML element or maybe on your body element, you’re adding a class that says hover-on or lady-bug-activate or…

Val

Mmm-hmm. [laughs]

Jen

…dinosaur-go or whatever class— [laughs]

Val

I like your class names. Yeah, you can just— I mean, just by doing that class switching you suddenly got this…

Jen

Yeah.

Val

…great little thing where you have the logic advantages of JavaScript to be able to, you know, not just do things on hover and just on things that CSS kind of doesn’t know about.

Jen

Right.

Val

You swap those classes and then you’ve got the motion happening with CSS. You’ve got that advantage there. And you’ve got JavaScript handling, I guess kind of like conducting the whole thing.

Jen

Yeah.

Val

And that’s a pretty smart way to get things done.

Jen

You could put your classes on the buttons or on the links.

Val

Mmm-hmm.

Jen

I mean, this is where some people sort of — and they’re doing it wrong —…

Val

[laughs]

Jen

…they— Instead of using a or instead of using a button, they’re using— They just make divs, and they’re like, “Oh, click on my div and then I’ll change the class on the div. And then I’ll activate all of the JavaScript— I mean, all of the CSS, and we’ll use CSS to style this so it looks like a link or it looks like a—” And that’s bad for accessibility because now you’ve just turned a page into a whole bunch of divs.

Val

Yeah.

Jen

Like you need to go ahead and use a link where that’s appropriate or a button if it’s a form or if it’s a button, if button is the correct semantic element. But you can put your classes on those little things. Like you can put your classes on the whole page, on the body tag or on the html element or you could put your classes on individual things on the page. Yeah, but that’s what you’re doing is you’re basically swapping classes in and out.

Val

Yeah, and I have— I’ll put a link in the show notes or I’ll give you a link. I have posted a little transition— I mean tutuorial — oh goodness, too many T words — tutorial on .net a while ago that actually shows how to do that: just swapping classes to trigger transitions in a super simple example that’s kind of just a really handy way to do it, so—

Jen

Yes! Because there are lots of people who don’t know JavaScript,…

Val

Mmm-hmm.

Jen

…who aren’t about to go write a big video game in JavaScript tomorrow, but—

Val

[laughs] Changing some classes is just a tiny bit of JavaScript and it’s not— It’s nowhere near that. It’s not as hard as writing a game, definitely.

Jen

Yes. And in order to do this stuff, really, you need, you need this JavaScript to swap out the classes.

Val

Yeah. And, you know, jQuery will do that or straight up JavaScript will do it.

Jen

Right.

Val

Whichever one your prefer to use, I guess, is what it comes down to, but—

Jen

Or get somebody on your team to, like, write the JavaScript for you and Skype it to you and then you can put it in your thing and you can cut and paste it.

Val

Even better if you can like trade the JavaScript code, or like a beer for the JavaScript code you need, or like a cupcake or something, so much easier.

Jen

Yeah, do that.

Val

[laughs]

Jen

Yeah. And there’s tons of examples out there. I mean, that’s what’s kind of nice about this stuff. One of my favorite places to go to see what other people are doing and what is possible is over at CodePen, Chris Coyier’s CodePen.

Val

Yes!

Jen

And you can go to CodePen, which is codepen.io, and you can click on the tags— There’s a button that says “tags”, because people have tagged their code examples, their little projects in CodePen world. And there’s a couple of them. One is animation, which has right now it has 1,110 things.

Val

Mmm-hmm. Just a few.

Both

[laugh]

Jen

One is— CSS animation is another. Animated is another. Transitions is another. Animate—

Val

Yeah I don’t know how— I don’t think they’re super strict with the tags,…

Jen

Yeah.

Val

…but you can definitely poke around and find some good stuff.

Jen

What’s the other— I mean, there should be a transform one. Oh, transition, transitions, and— Wait, is there another one? They’re not in alphabetical order so it’s kind of hard to—

Val

[laughs]

Jen

But, you know, all of the words we’ve been saying today and tripping over ourselves, you can like go click on transitions and you can just see all the ones that people have self-tagged transitions. And some of them are very, like, totally this is a video game. Or this is a really crazy animation of ugliness.

Val

[laughs]

Jen

Or this is a super— Some of them, you know— I mean it’s a joke sometimes even. Or this one is like super subtle and a really beautiful example of something you might not have though of.

Val

Yeah, there’s some really great things on CodePen and that people come up with. It’s amazing.

Jen

I think there’s a tag that people have been using called css only. Oh, pure css. I was looking at that a lot too.

Val

Ahh I guess that would do it.

Jen

Because I was trying to get away from the animations that use JavaScript and look at more things that were just CSS animated only.

Val

Mmm-hmm.

Jen

Yeah. And then the cool thing about CodePen is you could just fork their repo and copy their stuff and edit it.

Val

Yeah and make your own version.

Jen

Make your own version and contribute it back so that everyone’s learning. Yep.

Val

I like CodePen. It’s a good site.

Jen

When you learn this stuff make a CodePen, ping me on Twitter, and I’ll put out the word, show people on The Web Ahead that you did this.

Val

Yeah, I just use CodePen for an entire workshop actually. I had everyone working in CodePen and basically just going from pens I started from them and saving their own copy and building out animations and it worked really well.

Jen

Yeah. If you don’t— If you’ve never used CodePen you should go check it out, because it’s basically you get a pane for editing and writing HTML, one for CSS, and one for JavaScript. And you can— Everytime you ever look at somebody else’s example you can sit there and edit their code and just mess around, you know, in your own copy. You’re not editing the original, and see what things do and learn and then if you like it and you want to keep going or you want to contribute yours as another example you can fork it and sort of keep the code under your own— You know, you’re not stealing you’re just you’re forking their thing. That’s why it’s there. You can do that so you can learn more stuff.

Val

Yeah, that’s what it’s for.

Jen

Yeah. Do you have other resources that you point people to that are good places to learn, espcially— I mean, there’s two things people want to learn, right?

Val

Mmm-hmm.

Jen

One is, “How do I write this code? My code’s not working. How do I fix it? What’s the deal?” And the other one is, “I need to have a vision for what’s possible. I want to see things so I can have a wider vision. I’ll figure out how to do it later. I’ll have somebody else write the code for me.”

Val

Yeah, I mean, well I guess for learning stuff I should totally plug my book. That’s a really good space for learning how to use the animations and what to do with those. I actually have been keeping a nice Gimme Bar collection of, you know, sites that have done some really fun animations with CSS or really quality ones that are very CSS-based. So I’ll send you the link to that as well as kind of like a little, mini just links that I’ve been putting together and probably put in a Tumblr or something easier to find. Just a really good example of where people have used motion on the Web. And yeah, and things like CodePen, too. I mean, it’s not usually fully built-out sites or anything there of course, but just these little tid bits are just— You can pick up so much from those and just learn some really great approaches from what other people are doing there and sharing.

Jen

So your book. I’m going to back you up.

Val

Mmm-hmm. That’s okay.

Jen

CSS Animations, put out by fivesimplesteps.com.

Val

Yay!

Jen

It’s also— It’s one of these little— It’s literally more like a booklet.

Val

Yeah, it’s like a pocket guide. That’s what they were calling them.

Jen

And it’s $4 US, or £2.

Val

Mmm-hmm. Yep.

Jen

Isn’t £2 like what you spend on coffee or something? Like, it’s—

Val

I think any time I’ve— I think I’ve always spent more on coffee when I was over there, but I really like fancy coffee, so— [laughs]

Jen

So if a coffee is £3…

Val

Yeah, it can’t be much less than, you know— Coffee can’t be much more than that, I mean.

Jen

And they don’t exist in paper. You—

Val

They don’t! That’s the only disappointing thing about them. They’re ebook only so far.

Jen

So PDF, ePub, or mobi…

Val

Mmm-hmm.

Jen

…so you can put it on your Kindle or your Nook…

Val

Mmm-hmm.

Jen

…or your iPad or just open it on your computer, and it’s short. So it’s…

Val

Yeah.

Jen

…like you don’t have to dedicate 47 hours to read it. You can just say, “That’s awesome. Yes.” Please download the ebook, and open it up, and bam. You’re reading— And in that book you really do speak— You’re specifically writing about animation animation, right?

Val

Mmm-hmm. Yep.

Jen

Not all the stuff we talked about today, but about the third one.

Val

Yeah, just the animation spec and mostly due to the length they keep the pocket guides in around 5,000 words. So, that way you literally can sit down in a couple of hours and read them.

Jen

Yeah.

Val

So I just stuck with the one thing because I figured in that short amount of space, if I tried to cover everything it wouldn’t be useful to anyone. So it’s all just about the animation spec. There’s lots of code examples, also all on CodePen oddly enough. Should start, I don’t know, see if I can work us some sort of deal where, promotional deal with Chris. [laughs]

Jen

[laughs] He’s not sponsoring the show this week, but—

Val

Yeah, well I wanted to put all of the examples from the book somewhere that if you are sitting there reading this, you could just, like, pop over and try out the code and that’s kind of tough with downloadable examples. But if you can just pop over to a live CodePen you can be like, “Oh cool. If I change the fill-mode this happens. I get it!” Like, the stuff is much easier to remember when you see it happening. So I wanted to kind of compliment the written part with some stuff you can just quickly jump into and mess around with and, you know, that’s how— That’s why this stuff is fun. You can just pick it up and mess around with it a little bit and see what else you can do. So that one’s all about animation, but definitely— Definitely worth a couple of hours of your time to totally understand what’s going on there and hopefully come up with a bunch of ideas to make really awesome animation-based stuff for yourself.

Jen

Yeah! And like I was saying to you I think before the show, or did I say it during the show?

Both

[laugh]

Jen

I mean this stuff, this stuff was just harder to learn…

Val

Mmm-hmm.

Jen

…and more like— It reminded me of what it was like to learn CSS in the first place.

Val

Yeah. It’s definitely a different mindset and like we’ve talked about before too is the syntax is just— The syntax and the naming of some of these things is just nicely different enough that it does throw you for a loop. You’re like, “What? Oh. Okay. I guess that makes sense but that is not how I usually write my CSS properties. Thanks for throwing me that little—” [laughs]

Jen

Right. There’s definitely— Yeah. Which, I forget which one. There’s something in there that, like, it’s basically a parentheses and a series of things and I expected them to be separated by commas and they were separated by spaces, or expected them to be separated by semicolons and they’re separated by commas or something. And I was like, “This is just not the way that we normally write CSS. Like, who wrote this spec because this doesn’t make sense.”

Val

[laughs]

Jen

Just enough to trip me up a little bit.

Val

Yeah, but it’s nothing terri— I mean, yeah, you get tripped over it once or twice and then you get used to…

Jen

Yeah.

Val

…the syntax and where there’s commas and where there’s not, and you’re off to the races making crazy stuff happen. Your blue zig-zaggy square or whatever else. [laughs]

Jen

Yeah. Yeah yeah.

Val

So it’s a really fun part of CSS to play with and just this whole new aspect of powerful things we can use for our designs, for creating demos, or you know whatever else we want to do. It’s just we have this whole dimension of motion and it’s kind of amazing…

Jen

Yeah.

Val

…and it’s really fun.

Jen

Yeah. No, and I definitely believe that we— I mean, this is being said a lot, has been being said a lot in the last several years, that we— I mean John Allsopp originally wrote this spec in whatever, 13 years ago. That we— It’s been too easy for us to think of the Web as the mediums that came before it…

Val

Mmm-hmm.

Jen

…pushed into a digital space. So it’s print on the Web. It’s video. It’s a television set on the Web. It’s, you know, an audio player, whatever, on the Web.

Val

[laughs]

Jen

It works just like radio, you know? It works just like the music industry. It works just like the publishing industry. It works just like the film industry. It works— Right? And so we’ve been kind of adapting and morphing all of our best practices from all of these other mediums into this new medium…

Val

Mmm-hmm.

Jen

…but we’ve been stuck— I mean, we’re making a transition. It’s a transition that will take an entire generation. And we’re only…

Val

Yeah.

Jen

…maybe, you know, part way into the first half of the first transition. And thinking of, you know, a newspaper article on a website, so far what we’ve done is here’s the newspaper article and here’s a whole bunch of ads…

Both

[laugh]

Jen

…in sidebars. Oh and the ads move! Look at the ads! Look at me! Look at me! Look at— Right? We’re sort of anti-training ourselves to avoid animation because it’s been so annoying. But we’ve been, you know and okay— And so, that’s one model. Oh, the blog is another model. Oh, the Facebook, social media is another model. But we have— We— We’re just— I feel like a big part of what’s possible and a big part of what is coming has to do with the fact that the page is not static. And the page does not have to be two dimensional. It’s not just X and Y. That there is a Z axis there, and we haven’t been using it. And, I mean, with iOS7 and Apple, I know people are giving them a really hard time right now, but I’m really impressed with what I’ve seen and I think something that we haven’t been talking about at all in this snarky complaining…

Val

[laughs]

Jen

…is all the work they’ve been doing about having a Z axis, and having there be opacity, and having there be multiple panels of depth, and having those move one overtop of the other, and using motion as a user experience…

Val

Yeah.

Jen

…interface element, and figuring out like, okay so if I have this thing, and I click that thing and this thing slides over and the thing that slid over I can see that it slid over because it slid over [laughs] and it’s a little translucent and so I can see the things underneath them and they’re still moving and they’re like moving a little bit or they’re shimmering or…

Val

Yeah.

Jen

…that there’s an entire other way in which we can and perhaps should, but more likely just the people who crush everyone else will be designing in the, you know, over the next 10 years, is using the Z axis plane and things being able to move.

Val

Yeah.

Jen

And it’s this CSS that we’ve been talking about that is letting us do that. And it’s already— We’re not even talking about a spec that’s under discussion to come in 2015. Like, this is a spec that— I mean, I’m looking, CSS animation on caniuse. With a webkit prefix — which is needed heavily —…

Val

Mmm-hmm.

Jen

…it works on everything but IE 9 and further back. So— and Opera Mini, but—

Val

Yeah.

Jen

So—

Val

No, I totally agree on that. It’s like…

Jen

We control it today.

Val

There’s a lot of just different interactions that we’re getting with things like apps and the apps in your iPhone…

Jen

Yeah.

Val

…and everything that, like, has changed the way your general person who uses technology thinks of how interactions should work,…

Jen

Yeah.

Val

…and motion and depth are two very powerful ways to communicate things and to affect your user experience to make it better, to give it a certain feel, a certain personality. And now we’ve got a native way to actually add that to the Web. We don’t have to use, you know, a third party plug-in.

Jen

Right.

Val

So I think that’s really just— We’re at a very interesting starting point for that, and there’s a lot of— There’s just so many more options we can use on the Web now to, you know, make it feel more like an app let’s say, or just look more polished in a way we never could do before, so— I’m pretty excited.

Jen

Yeah. So thank you for being on the show.

Val

Oh thanks for having me! It was fun!

Jen

People can follow you on Twitter at vlh.

Val

Yes!

Jen

Very short handle there.

Val

I know. I couldn’t get Val, so I went with my initials. [laughs]

Jen

V-L-H. And you have a website, valhead.com.

Val

Yep, that’s right!

Jen

People can follow me on Twitter — jensimmons — or the show — thewebahead on Twitter. Thank you again so much to Environments for Humans and their CSS Summit. Go check them out: csssummit.com. I think that’s it.

Val

Thanks!