CSS Animations

[Music]

Lea Alcantara: You are listening to CTRL+CLICK CAST. We inspect the web for you! Today we’re talking with Val Head about CSS Animations. I’m your host, Lea Alcantara, and I’m joined by my fab co-host:

Emily Lewis: Emily Lewis!

Lea Alcantara: This episode is sponsored by Visual Chefs, a versatile web development agency with expertise in content management system and custom web application development. Through partnerships with designers, agencies and organizations, Visual Chefs propels the web forward.

Emily Lewis: CTRL+CLICK would also like to thank Pixel & Tonic for being our major sponsor.

[Music ends] Today our guest is one of my favoritest people, Val Head, and our topic is my second favorite subject after HTML, CSS. Val is joining us today to talk about CSS animations. She’s a very talented designer and front-end dev as well as an educator and speaker. She also co-hosts the Ladies in Tech podcast which features interviews with people about their speaking experiences. Welcome to the show, Val.

Val Head: Hi guys, thanks for having me and for such an awesome intro. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: It’s really nice.

Lea Alcantara: Speaking of intros, Val, can you tell our listeners a bit more about yourself?

Val Head: Yeah, sure. I just moved back to Pittsburgh from Philadelphia. I was there for a little while, so I have a new life mission of making sure everyone is as confused as possible about Pennsylvania geography.

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: I’m doing my best to make it impossible for anyone to keep track, but it’s really nice. There’s a really great community here in Pittsburgh, and now that we’re back in town, we’re back to running the Refresh Pittsburgh group. Actually, pretty much just today we’re starting plans for the web conference we run here, Web Design Day, so it’s crazy. That’s next June, but it’s already time to start planning it. [Laughs]

Lea Alcantara: Oh wow! Busy, busy.

Val Head: Yeah, you’ve got to. I’m never bored, I guess. [Laughs]

Emily Lewis: [Laughs]

Val Head: Having some people. I was just in North Carolina doing a conference and they’re like, “We’re so impressed with your energy.” I’m like, “Oh, that’s really good. That’s really sweet.” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: I’m like, “I think they’re also saying that like maybe I have too much of it, I don’t know.” [Laughs]

Emily Lewis:

Lea Alcantara: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: No, never, never.

Emily Lewis: I don’t think any conference organizer would ever want or would want a speaker with lower energy. [Laughs]

Lea Alcantara: Yeah. [Laughs]

Val Head: Yeah, I feel like that’s what I got. It was a Friday-Saturday conference, and I feel like that’s why I got the 4 p.m. Saturday slot. They were like, “No one can fall asleep through this.” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: So I’m actually looking at your slide deck from this weekend’s conference, Blend Conference.

Val Head: Oh yeah.

Emily Lewis: So you did something on kind of like the role of a web designer/motion designer?

Val Head: Yeah, yeah. Basically, it was all about applying motion design principles when we are animating things in CSS for the web. I did it in the context of CSS because it’s only 45 minutes, you can’t talk about every language. Basically, the idea is that we’ve got this. We’re starting to add more animations to our interfaces, on our web design interfaces, our websites and everything, and none of us were really trained as motion designers, so sometimes making those decisions is tough because you have no background in it. So that talk was kind of like the 45-minute crash course into like how to approach these decisions thinking like a motion designer, and it was really fun.

Lea Alcantara: That’s so funny because I just feel like the more things change, the more they stay the same with the web, because 10 or 20 years ago, that was the same topic when we were trying to transition from print design to web design and being like, “Okay, we’re kind of teaching ourselves how to do this.” It only feels like it took a long time for us to understand, “Okay, gestalt, white space, typography and hierarchy.” [Laughs]

Val Head: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: And I mean, those things have been established in graphic design for a long time, but it feels like it took a long time until CSS and HTML and browsers got the tools available to make that a lot easier to implement.

Val Head: Yeah, yeah, and it’s kind of like as web designers, we have to be a little bit of everything.

Lea Alcantara: Right.

Val Head: And that everything just keeps expanding. [Laughs]

Emily Lewis: [Laughs]

Val Head: Expanding, the more new stuff we get to do on the web, which is both exciting and sometimes really annoying.

Lea Alcantara: Yes. [Laughs]

Val Head: Because you’re like, “Oh, I just painted this stuff out.” And it’s like, “Nope, there’s more.” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: How did you pick up motion design skills? Is this something that you were formally educated in or self-taught? Did you have a project where it was just to sink or swim?

Val Head: A little bit of both. I actually kind of got into web design through animation. I had taken an animation course when it was all taught in Flash, which kind of then spiraled into the whole thing. It’s actually the whole reason I ever learned programming as well. They were like, “Oh, hey, you know, you can write this code to make the animations happen.” I was like, “That has changed my whole life. This is so amazing!”

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: So that kind of led me into web stuff. I has always been kind of involved in a lot of Flash work, doing a lot of like key off type stuff, some web stuff, little things that were always expected to be animated UIs, whereas the web, maybe not so much. So it has just kind of been really doing that, working with that, and also one of my jobs for a long time was working at a place that also did video and a lot of video work, so working with those video editors and the motion graphics people, I picked up a lot from that. So it’s really cool to be able to actually do that on the web using actual like proper web technologies and stuff.

Lea Alcantara: Nice.

Val Head: So I mean, I find that really exciting. I’m like, “We can use CSS to make this stuff happen, that’s amazing!” At least that what’s my reaction to it. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: So before we talk about coding, let’s talk about podcasting.

Val Head: Yeah.

Emily Lewis: How is the Ladies in Tech podcast going?

Val Head: It’s going good. We’re sort of have been taking a couple of months off mostly because I picked up and moved rather unexpectedly. Strangely, it’s tough to do podcasting while moving. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: No matter how well you pack, there’s always something you can’t find for weeks. [Laughs]

Lea Alcantara: Sure.

Val Head: So I’m hoping to take it back up in a few weeks, but as you know summer was a pretty crazy time for us and I’m sure for you guys too with just having people being available over the summer. Most people are like, “No, I’m taking time off.” And you’re like, “Crazy time to do that in August.” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: Right.

Val Head: So yeah, but we’ve been getting lots of great feedback on it, and the advice we’ve gotten from a lot of our guests, with like how to approach getting on stage, how to approach prepping to be on stage, have just been some really great advice and some amazing stories. So it’s been really great to share that with people.

Lea Alcantara: So what do you think you’ve learned about the entire process in Ladies in Tech beyond just the speaking, like how about podcasting?

Val Head: It’s definitely a lot more involved that I would have thought. It’s not like you just go and record and you’re done. It’s like you have to edit and you have to like find the time everyone’s available.

Lea Alcantara: [Agrees]

Val Head: And it’s a lot of coordination. [Laughs] I mean, the editing stuff especially, I think the first few episodes I edited, I think it took me like about 500 times longer than I ever would be because of what to put in there.

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Val Head: It’s been like, “Wow, it’s been a long time since I’ve had to edit audio. What do you know? It’s a little complicated sometimes.” But we actually spent some money on good mikes and actually both have the same mikes. It’s like little things like that suddenly everything gets much easier like, “Wow, this is why people use good equipment. Right.” [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: Well, and the focus of the podcast is about speaking, and you speak often. In fact, I met you at Rustbelt Refresh when you presented.

Val Head: [Agrees]

Emily Lewis: Have you learned like one really great takeaway from about speaking from some of your podcast guests?

Val Head: Well, I think probably the biggest one that I thought was most interesting was just the fact that I think everyone we spoken to except for one person always said like they still get nervous and there’s that nervous energy no matter how many times you’ve done. It’s just kind of learning how to handle it and your reaction to that nervousness, but everyone still gets nervous. I think that’s really, really useful because I know I always kind of expected like, “Oh, eventually, this will be like really easy and you won’t even think twice about getting up on stage.” But that’s not how it works. [Laughs]

Emily Lewis: [Laughs]

Val Head: Unless you’re the one person who said they don’t get nervous, but I kind of think he was lying. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: Like yeah, I don’t believe you. Anyways… [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: He’s a good friend of mine so I can say that, but I’m like, “Yeah, I don’t think you’re being honest with us here.”

Emily Lewis: All right, so let’s get to today’s topic. I wanted to sort of start with the basics. From a definition standpoint like what is a CSS animation?

Val Head: Well, it does get really confusing because there is a specification for CSS animation which applies specifically to the idea of spelling out keyframes and then applying that with some keyframes to an element, but most normal humans and pretty much anything except CSS defines animation as like anything that causes change over time, right?

Lea Alcantara: Yeah.

Val Head: Things that change over time is generally considered animation. So CSS animation, in the general sense, usually applies to any way you’ve created movement in CSS, whether that’s a transition, properly transition or properly a keyframe animation, so that just makes it all nice and confusing. [Laughs]

Emily Lewis: Well, you mentioned keyframe animation. You mentioned transitions. So what is the difference between animation, a transition, and what about transforms, do those enter the picture with CSS animations?

Val Head: Yeah, yeah, definitely, all three of those things. Transforms, basically, I like to call them the yoga of CSS, because basically you can use transforms to manipulate the way an element appears, like suddenly it’s not just this flat square. You can skew it, you can rotate it, you can scale it, and you can even do like 3D matrix transforms which is serious mathy business. Like there are so much you can do to manipulate the way an element looks with transforms, but they never actually cause any motion on their own. They just are very performant way of changing the way something looks, which is why we use it so often with transitions and animations. Transitions, which, of course, sound very similar to transforms so we can all trip over our words a whole lot.

Timestamp: 00:10:03

Emily Lewis: [Laughs]

Val Head: Transitions essentially make a nice smooth change in a property between two states, between like A and B, like when you apply a transition and then you might change the background color of something on hover, the transition would make sure that’s a nice smooth move from one color to the next and not just like a hard jump. So transitions are generally between point A and point B, and the best thing about transitions is that it will always go back all on its own, and if you’ve ever had to program like JavaScript rollovers, you know how awesome it is that in one line it takes care of both the on and off. It’s amazing. It’s like that’s so great, I kind of want to hug them.

Animations kind of build on transitions in that they’re not just from point A to point B, you can have as many points as you want. You create this list of everything you want to have happen over the course of animation. That’s your list of keyframes and basically you’re really only limited by your patience to write these out in a sense. [Laughs]

Lea Alcantara: [Laughs]

Val Head: But you can do almost infinite number of steps. I don’t know if I’d recommend it because it might drive you insane, but you could, and then you’d take that list of things you want to have changed and you can apply it to your elements, like any element on your page essentially, and then say, “I’d like you to use a set of keyframes, have them take two seconds to complete. Repeat them four times or however else. So there’s a lot of flexibility in that sense once you defined what changes you’d like to see over time, it may take you a long time. It could be short. Have it go play backwards or forwards or repeat once or repeat infinitely. So there are a lot of flexibility and a lot covered between those three seemingly simply sounding things.

Emily Lewis: So Val, you have a series of screencast you’re doing right now on CSS animations, and I watched the first one which talked about CSS animation events, and that relies on JavaScript and CSS, and I’m just curious, is that standard? Is JavaScript always needed, or are there purely CSS animation solutions?

Val Head: Well, there are definitely just straight up like CSS solutions. It kind of comes down to the fact that CSS is still a markup language. It’s still kind of unaware of what’s being manipulated around it, like of similarly how we can do hovers in CSS. That’s kind of a limit of interactions, like you can tell when an object is being hovered over, but you don’t know exactly what a mouse pointer is, let’s say, at a given point in time, and that’s traditionally something handled by JavaScript. So that kind of like higher level of knowing what’s going on is still only available in JavaScript, but it kind of make sense because JavaScript is a scripting language, and CSS is really more still a markup language, which is where that kind of I guess the geeky area of the definition or the split goes.

But you can definitely do all sorts of animations with CSS with no JavaScript at all. It comes to a point where if you want to know things, when exactly has this animation ended because I would like to trigger some other behavior, that just makes a lot more sense to do in JavaScript because it knows that kind of thing and if you were probably also tracking other events, and that’s kind of all in the realm of JavaScript. But you don’t have to use them. You don’t have to use JavaScript to get CSS animation. It just tends to be when you want to do more advanced or more complex things, it helps out a lot.

Lea Alcantara: So I was just thinking in regards to that, part of my confusion or I guess my concern in regards to CSS animations and even using JavaScript, should animations even be part of CSS? Because you mentioned CSS is part of markup. CSS is about separating the style from the content, and then now we’re adding like a next level of interaction, and old school thinking is about, well, interaction, any further than, as you mentioned, like hover states or something would be under JavaScript, and now it feels like animation is part of CSS. Like what do you think about that transition, like how can you bridge that gap, and why is it in CSS now?

Val Head: I don’t know exactly why it’s in CSS, but I kind of don’t mind. Separating the kind of like behavior from the presentation is still pretty easy to do even if it crosses languages. I mean, you can have all your animations in a specific style sheet or specific place and kind of like…

Emily Lewis: Right.

Val Head: Especially with like preprocessors, like you could have a behavioral CSS file that you kind of package all together with your Sass puzzle-making, well, however the real term for that is, where it packages up all your partials and splits that in your CSS

Lea Alcantara: Sure.

Val Head: So it’s really easy to separate it even if it crosses languages, and I think that the really interesting thing about CSS being able to do this is that now these really small bits of interaction, even with just things like smooth hover state as opposed to these giant cuts, things like those little bits that just add a tiny bit to the interaction, small movements, small additions. Previously, you’d have to be like, “Oh, great. Now, I have to like have a jQuery. I’m going to have to write my hover script.” I’m like, “Oh.” Like that whole, because that’s the sound we made when we did that. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: I’m not sure what you guys sound like when you do programming, but it’s always that barfy noise for me. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Val Head: But I don’t think it’s a huge buy in, right?

Emily Lewis: Right.

Val Head: Or you’d be, you know. What happens with a lot with these, we’d make these hybrid Flash/HTML sites because we wanted it for animated navigation, and there are so really well done Flash animated navigation as far as like interaction standpoint, but you still have this huge problem of, “Now, a part of our website is this big, black box. It’s our navigation, we have to do all this extra work to make it speak to the rest of our website so we don’t make something that’s crappy.” And that’s a lot of work, and the fact that CSS can now handle these bits of interaction means we can just add them in with what we’re already using, and that huge buy in, that huge extra bit of technology you need just to add like a nice hover, is totally gone and we can do this easily with what we’re already using.

That’s the stuff that I think CSS animation is really best at is these small bits of interaction that when done well can really push what you’re doing over the top as far as design goes and just like the pleasure of interacting with it, and we can do it without having this huge technical overhead. I think that’s really great and it really changes the way we can approach this on the web.

Emily Lewis: But actually, it’s a good sort of introduction to a question we got from our listener, Kevin Lozandier, and he asked, “What are some examples that you felt CSS animations weren’t used to their potential, something on different sites that you feel that CSS animations would be really effective at making it a stronger experience?”

Val Head: Oh gee, that’s a tough one to pull out a specific example. But I think in general, anything that these days is like one of those simpler interactions like hovers or that kind of thing that goes through all the trouble of like writing jQuery-animated stuff, I feel like they could have saved themselves huge headaches if they did it in CSS. Although there is still, I’ll say, the whole IE8 situation where honestly if you need to support IE8, you should probably just write this stuff in JavaScript so you’re not writing it twice. [Laughs]

Lea Alcantara: [Agrees]

Val Head: There are so many exemptions and stuff, but I think the other good thing about the fact that CSS can do this is it gets us thinking about these ideas as being something we can include in our design, something we should be considering as part of our design process, like these things are so readily available and so easily implemented like it’s kind of hard to ignore them and to not consider it, which is great because the web has been this kind of very static, hard cut place, at least as far as building a web standards has gone for a really long time, and I’m pretty happy with the fact that it doesn’t have to be that way anymore.

Emily Lewis: [Agrees]

Val Head: That we’ve kind of opened the doors to all sorts of fun new stuff.

Emily Lewis: Yeah, I’m actually having a difficult time kind of envisioning where CSS animations would be on a site, but what you’re describing to me in my head, I feel like you’re just sort of saying making the interactions that are already there a little smoother or more elegant.

Val Head: [Agrees]

Emily Lewis: Or is that like a fundamental or a really simple way of introducing animations, and then there are just a lot more you can do, like do we want people to like spin stuff? [Laughs]

Lea Alcantara: [Laughs]

Val Head: Right.

Emily Lewis: I guess that’s what I’m asking, like can you take this too far?

Val Head: Oh, definitely. I mean, I recently wrote A List Apart article about that question specifically really of like where can you add animation in a way that’s helpful, because as much as this stuff is new to have it in CSS, it’s also not new because we’ve seen it done terribly many times over with like Flash intros, right? [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Right.

Val Head: No one wants to do that again, but there are definitely places where you can support the UX. What you’re doing actually make a task perhaps easier to follow by just adding bits of movement and motion that will actually like help people follow what’s happening. Help them see where menu came from or where it’s going when there’s animation there as opposed to a hard cut, suddenly you’ve got that information of the path it took to get there as opposed to something just like appearing and you’re like, “What? Where did that come from? How do I get it back?” [Laughs]

It’s adding a little bit more information to some of these interactions, and that can help make them easier to follow and the fact that we’re doing it in CSS means you can still really easily have the whole idea of progressive enhancement where if they’re not supported, it’s just not there and it’s not like you’ve broken everything. So definitely a good article to check out for some of those examples to break down to give them of where it’s useful, and I think even just having the idea of looking for these places where it could help, it’s kind of a tough adjustment because you’re just so used never being able to do it. Why would you ever consider it? So it’s kind of looking out for them and then testing out what might work and what might not, and see how it feels for you in what you’re trying to communicate.

Timestamp: 00:19:51

Lea Alcantara: Do you think the rise of mobile first and app design is what has propelled CSS animations because when I’m thinking of possibilities of where CSS animations are, and I’m looking at your slides over like some examples over like bouncing and all those kind of things, it’s very reminiscent of my iPhone, right?

Val Head: Yeah.

Lea Alcantara: Like you know when things like slide and they kind of have a give and take bounce or whatever, do you think that it was mobile that was pushing CSS animations?

Val Head: I think that’s what’s pushing us to maybe consider using them more, because I feel like the way a lot of native apps work has changed people’s perception, like people using the stuff we make has changed our perception of what interaction should be like. If all of your apps have these great like transitional interfaces and there are really smooth transitions and like you can manipulate things by dragging them and they respond to you in a certain like non-static way, and then you go on the web and everything is like click, wait for next thing, statically appears like a hard cut to it, somehow you feel like the web is kind of behind, you know?

Emily Lewis: Right.

Lea Alcantara: [Agrees]

Val Head: It doesn’t feel like as sophisticated. It feels like it’s fallen behind maybe. Whether it’s a trendy thing or just a way it feels to use it, you feel like something is missing. I think that’s part of what’s driven us to look at more ways to include this and not just be like, “Oh, who cares?” It’s like, “Oh, there is a sophistication that’s added to this.” It is one of the ways we can use design to differentiate our product or to make what we’re building easier to use. I think the expectations of mobile and seeing that on mobile screens has kind of forced us to look at this and take it seriously.

Emily Lewis: I’m curious about the impact that CSS animations have in terms of performance. Are they processing hogs, like is it equivalent to some massive JavaScript file, or is it pretty compact and not really a hit to the browser, whether we’re talking mobile or even desktop?

Val Head: Like most things, it can be both, depending on how you use it, right? [Laughs]

Emily Lewis: [Agrees]

Val Head: So if you try hard enough, you can make anything perform badly.

Emily Lewis: [Laughs]

Val Head: But by their nature, CSS animations are all interpreted by the browser, so a lot of it depends on how well the browser is equipped to handle them. There’s obviously, maybe not obviously, but there are a number of properties that perform better than others when you’re animating them, and essentially, it kind of comes down to if you’re animating or transitioning properties that are transforms or changes in opacity, you’re going to get the best performance. Paul Lewis from Google, I think he’s on the Chrome team in some way has written some really great articles about why those properties perform better and what happens under the hood to make them to make them be better, and so there’s that kind of thing you’re keeping that in mind.

You can make some really performant animations because if you’re using those properties that are especially efficient and it’s all handled in the browser, you’re not like pulling in an extra script because it’s all in your CSS, there’s potential there to be amazingly efficient. But of course, there are other considerations as well, and not all browsers are as good at CSS animations as others.

Lea Alcantara: [Agrees]

Val Head: I like to say that the best thing about CSS animations is it’s all handled by the browser, and the worst thing about CSS animations is it’s all handled in the browser. It’s kind of how things have always been. It’s like browsers don’t implement the spec the same way. Some of them do stuff well, some of them do it really craptastically, and we’re kind of at their mercy. So they’re definitely potentially very performant, and I think things are always improving, especially if you’re mostly focused on modern browsers.

Android is always an issue for like everything. It has some very fun quirks with CSS animation as it does with like everything. So there’s definitely a lot of things to look out for, and there’s potential for it to be more performant than adding extra scripts, of course, but sometimes the reality of what you’re trying to do in the browsers you need to support, you may have to go for a heavier option because it might be better to have it there and have it be more costly as far as performance goes or HTTP request goes, but still have it like work, so the landscape is a little tricky. In that sense, there’s no one answer to that question, and I don’t know if there ever will be, like I’m always skeptical of articles or tools that are like, “We are more performant than any other option out there no matter what.”

Emily Lewis: [Laughs]

Val Head: It’s like, “Yeah, I don’t think that’s possible.” [Laughs]

Lea Alcantara: [Laughs]

Val Head: I feel like that the “it depends” answer becomes the answer to more and more questions the more we move forward with it. [Laughs]

Emily Lewis: [Agrees]

Lea Alcantara: Well, I’m curious a little bit about the browser support issue, and like the testing for that.

Val Head: Yeah.

Lea Alcantara: Now, like in static sites, there are so many devices, there are so many like browsers and all these kind of things, and for example, something like BrowserStack will send you screenshots, but all of that is static. So how do you test to make sure that your animation works in as many browsers as you can?

Val Head: I mean, there are a couple of things. If you look at things up on Can I Use, you’ll see which ones have the questionable support, and like honestly, most of them are all like, “Yes, green square supported, except for like older IE depending on what you’re doing.” Opera Mini, which doesn’t believe in doing anything normal, and Android, is it 4.3 and under, I think? I might be getting that version number wrong. So it’s pretty obvious to see which ones you might want to double check on as far as that goes.

So usually checking it out, I mean, the best way to do it is to check it out on devices themselves just to see how it actually works in the proper context. In a way, it will give you some idea as well, and that’s kind of the best plan, but the nice thing is it does not like you have to be like, “Oh, I need to check every single thing to make sure they’re all the same.” It’s like it’s easy to identify where your potential problems may be. [Laughs] And trying to look at those ones.

Emily Lewis: Well, for those problems, you had mentioned earlier progressive enhancements. Is that generally the approach you take?

Val Head: Yeah, definitely. I mean, like all CSS, if a browser completely does not support it, it’s just going to ignore it, and if you build your animations in a way that you’re kind of thinking about it, actually one of my All the Right Moves episodes is about this as well, like how you kind of structure things so that way you know if the animation is completely not supported, it will be broken. But if it is supported, you’ll see it. The tricky bit is, some of the older Android browsers, and this is why they’re such a pain in that way, is they say they support it. It comes back as like, “Yeah, totally got it,” but they don’t. They have some really strange quirks of like it will be enabled to animate one property at a time, so you need to be very careful how you write your animations and transitions to have them work in that browser because it says it supports it all, but it doesn’t really so that can be a little tricky.

In some people, the solution to that is to do it all on JavaScript still because they don’t have to worry about it. With some people, it’s like, “I don’t care about that browser. It’s such a small percentage of who’s using this site. It’s okay if it looks little broken.” Or structuring it in such a way that it doesn’t look too broken. It’s like one of those whatever is best for you. Making an educated solution or the best solution for the variables at hand for your project, like there’s no one good answer for that. A lot of the time, depending on what it is animating and what content is in there and how it affects the overall content, you may be able to just do nothing and it will be fine, or you may have to go through some effort. It’s just kind of, I guess, the reality of what we do, right? [Laughs]

Lea Alcantara: So if I was trying to get familiar with all of these aspects, what are you top resources for figuring out the attributes, the properties and syntax and animating with CSS?

Val Head: Well, I would recommend, and as far as the syntax goes, to definitely read anything but the actual spec. [Laughs]

Emily Lewis: [Laughs]

Val Head: Because it’s so hard to understand. I mean, to like self promote stuff, I have an e-book out on Five Simple Steps that goes through actually all the little properties and stuff, and I also have a Lynda.com course on that if you’re into those. But also, a lot of CodePen stuff is great for that, like look up things on the CSS animation tag and see how other people are using it. It is especially great for getting tips on how to use Sass to make writing animations even more efficient, which is kind of like one step past what you’re asking about, those things some of the little tricks people use. It’s like use the preprocessors and make their lives easier, it’s awesome.

I love CodePen especially for playing with animations and transitions and everything because you can just check the like prefix free box and you never have to write your own prefixes. So you can actually just focus on like trying things out as opposed to debugging whether you’ve got all of your prefixes in there for like 20 minutes or something. So the CodePen stuff is great for that too. It’s just seeing what other people are doing with it and you can pick up some great tips.

Emily Lewis: You mentioned CodePen, is that where you sort of do the first part of your coding of animations, and then you move it into like your own text editor once you can see that it’s working, or do you work right from your text editor and CodePen is more like for playing around?

Val Head: For my projects, it’s usually more to just start playing around, but then the playing around stuff often ends up in real projects. [Laughs]

Emily Lewis: [Agrees]

Val Head: I always use CodePen for workshops and for talks because it’s just so easy to like have it right up there. I’m not usually organized enough to be like, “I’ll go in CodePen and try out this idea.” I’m usually kind of like, “I will try with what I have open right now.”

Emily Lewis: So you don’t have like a special text editor for this? Any sort of special like add-on for a text editor for making animation, writing CSS animation more efficient or easier?

Val Head: I guess a little bit. I mean, I always set up Autoprefixer because I use Sass and everything in my own projects, so I always make sure I have Autoprefixer set up in my basic projects, that way I never have to write prefixes myself because they drive me crazy.

Emily Lewis: [Agrees]

Val Head: But we’ve used the Atom text editor. You can actually edit animation curves and evening in the editor itself, which is really interesting, but one thing we are definitely lacking in right now is like good visual editors for this stuff. There really isn’t. So a lot of time, especially since I really work more on my design side of things, I’ll create little motion mockups or one that’s like little mini storyboard and that’s how we’ll talk about what might move or even like a little thing in line After Effects or Flash are deemed like, “Here’s how I think it should move. How are we going to pull this off and in which way?” And then kind of building it from there. That one is really tough for a lot of people, and in the same way that designing in the browser straight up is really tough. It’s really tough to design motion, like with the text editor.

Timestamp: 00:30:11

Emily Lewis: [Agrees]

Lea Alcantara: [Agrees]

Val Head: Because you’re in a different frame of mind, like you’re worried about syntax and everything, and like prefixes when you should be worried about like, “Is this motion communicating what I want it to?” You’re trying to do a very visual thing with code and that isn’t always the best or easiest way to do it. We all kind of have different ways of working and that’s a tough one to really get into. It’s a tough way to get things done. I’m really looking forward to it. There are some tools out there that do this visually a little bit like Adobe Edge and Sencha and that kind of thing. Neither of them are really perfect. I knew that Mozilla is working on a CSS animations editor in the browser and I’m very excited to see what that’s going to be. I’m hoping that it will be my answer. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: And so…

Val Head: Because that sounds very promising.

Lea Alcantara: So I’m just curious then, you mentioned all these tools, but you also mentioned storyboarding.

Val Head: [Agrees]

Lea Alcantara: So do you actually sketch it out or do you actually go to a piece of software and stick figure it? I don’t know.

Val Head: [Laughs]

Lea Alcantara: [Laughs]

Val Head: Usually, it’s a really horrible drawings in my sketchbook. [Laughs] That are like messy and terrible and just kind of thinking through in my head how those should be, and generally, before I start with someone else, I might like kind of mock it up in Photoshop like as part of an element clause or something, like here are three different states of the button and here’s how it might work because I find that my messy sketches are very hard to have conversations about because most people can’t tell. Do you know what I mean? [Laughs]

Lea Alcantara: Sure.

Val Head: It’s like the brain dump, and yeah, depending on how it’s going to be built and how complex the interactions might be moving to something like Flash or After Effects to like have a moving prototype of it, that seems to be a good workflow as well. That’s kind of the reason why I’m very excited about this idea of having a visual way to edit CSS animations because then you could skip that whole step of working in other tools and like literally just do it in the browser.

Emily Lewis: [Agrees]

Val Head: And I think that would be pretty darn cool.

Emily Lewis: Now, do you have any top resources that you would suggest someone go to get inspiration on how to, or even where to effectively use web animations?

Val Head: I think as far as like getting inspiration, there are a couple of sites I really like for it. Art of the Title which is all about opening title animations for film and TV.

Emily Lewis: Oh great.

Val Head: I find that particularly interesting because a lot of the time they’re dealing with things like animating type and all this kind of stuff.

Emily Lewis: [Agrees]

Val Head: They are all trying to accomplish and telling you or hinting at the story of the movie or the TV show using texts and images, and that feels pretty similar to web design sometimes. There are also a couple of really good mobile galleries of like how, and I think CAPPTIVATE.io is one of them, which looks at kind of showing very specific needed app interactions, which I think it’s nice to see it’s all collected up because we use a lot of these apps – I don’t know – for always and really cataloguing in our minds how they do what they do, so seeing them broken out is really helpful. I think those are great places to look for it because I feel like not that we don’t do it well in the web, we do, but looking outside of the web, I think it’s a better place because they’ve been doing it longer. They’ve been animating titles for like 50 years. [Laughs]

Lea Alcantara: Sure.

Val Head: And as far as more traditional animation principles, I’m looking up Disney’s Illusion of Life. There’s a great Wikipedia page that explains it and a bunch of Tumblrs that explain these concepts very well. They do it in the context of traditional animation, but knowing that stuff and just kind of keeping an eye out for it while you’re doing animation for interfaces is it’s a really helpful way to kind of frame your approach to deciding things like, “Does this look right?” That’s a hard question to answer. [Laughs]

Lea Alcantara: So you mentioned a little bit earlier your book on CSS animations, the pocket guide, and I actually read a recent blog post on your site about how you went and experimented briefly with a pay-as-you-want model. Can you tell us a bit more about that?

Val Head: Yeah, that one is an interesting little like business adventure, I guess. [Laughs] For various reasons, I had no publisher for a little while and I kind of found out with almost no notice like all of the authors did, and so it was kind of like all of a sudden my book was no longer available to anyone at all anywhere, and I wasn’t really sure what to do. So I decided I would put it up on my own site and make paying for it completely optional, and if people do want to pay for it, they could pick any price they wanted, and it was kind of a tough decision to make because I was a little scared. I had no idea if it would work. [Laughs] But actually it did.

Most people were downloading the book for free, of course, but a pretty significant amount of people were paying for it like completely voluntarily, and paying reasonable prices for it as well. That was pretty, but I don’t know, it was a really great learning experience, and it made me very happy to see that you could actually pull something like that off. Obviously, I did it with almost no planning, and that meant it didn’t really or it probably wasn’t as successful as it could be, but I thought it’s not too much of a stretch to think if you actually like planned ahead a little more and had a promotional plan for it or marketing plan, you could actually release a product like that, and make out all right.

Emily Lewis: [Agrees]

Val Head: So I was like, “Oh, yeah, web community, we’re like responsible, honest people who actually pay for useful information. That’s so great.”

Lea Alcantara: [Laughs]

Val Head: I kind of want to just give the whole web community like a big bear hug after all that.

Emily Lewis: [Laughs] Would you do it again?

Val Head: I would. I think the biggest factor for me is since it just kind of came up so unexpectedly, I didn’t have a good plan and I didn’t have enough time to devote to it. It’s like this sort of thing, you need to keep it in people’s minds. You need to have a way to promote it and market it, and I just had like no time at all to do that. So obviously, you can kind of just see where I stopped talking about it, how just like sales kind of plummeted. So I would do it again but only if I have the time to devote to it, which sometimes is much easier said that done. [Laughs]

Lea Alcantara: Yeah. I know for sure, and I mean, it seems I feel like this is a model that a lot of web professionals are testing out these days.

Val Head: [Agrees]

Lea Alcantara: And I feel like the 37signals was like the first who tried to deal with that.

Val Head: Yeah.

Lea Alcantara: Because at the end of the day, a lot of this information can be found online, but we want to have like a more organized…

Emily Lewis: Packaged.

Lea Alcantara: Packaged.

Val Head: Yeah.

Lea Alcantara: And perhaps sometimes even the language being used can be different when it’s like an edited, vetted, organized book versus scattered articles of “I just tried this out, let me tell you what it did.”

Val Head: Yeah.

Lea Alcantara: You know?

Val Head: Yeah. [Laughs]

Lea Alcantara: That kind of thing, and I remember 37signals when they first even set out there with their bestselling books or whatever. They were actually just a collection of the blog posts of those guys.

Val Head: Yeah.

Lea Alcantara: So yeah, it’s definitely interesting. I’m always so fascinated to see how people push their businesses and business models and testing things out in what works and what doesn’t.

Val Head: Yeah, it’s really interesting to see and it was very different to be trying it too, because like I’ve seen 37signals stuff and various other ones.

Lea Alcantara: Sure.

Val Head: Dan Shiftman did one kind of in the processing world that went really well, but it’s so different when you’re like, “This is my thing that I worked on.”

Lea Alcantara: Yeah.

Val Head: And you’re like, “Holy crap, what if it doesn’t work?” [Laughs]

Lea Alcantara: [Laughs] What if people nobody pays nothing?”

Val Head: Yeah, like what if nobody buys it at all?

Lea Alcantara: Yeah.

Val Head: So it’s something totally worth trying and I’m really glad I tried it out and that I was brave enough to experiment with it and see what happen, because now my business is completely something I would consider trying the next time I have a book or some other product. It’s a completely viable option which is pretty amazing. So I’d recommend at least considering it.

Lea Alcantara: Very cool. So before we wrap up, I just wanted to know if you’ve got any final pieces of advice that people could do today regarding the CSS animation?

Val Head: I would say go out and check out CodePen, give it a try and see what other people are doing with experimentally there. Just mess around with it, try it out, work an example on CodePen and see what you can do with it. Start with someone else’s stuff and mess with it and see if you can change it. I think that’s the most fun way to learn this type of stuff. Starting with the blank screen sucks no matter what you’re doing.

Lea Alcantara: Very cool.

Val Head: It’s never a fun way to start. [Laughs]

Lea Alcantara: Very cool. Well, you’ve given us a lot to think about and experiment with.

Val Head: [Agrees]

Lea Alcantara: But before we finish up, we have our rapid fire ten questions.

Val Head: Okay.

Lea Alcantara: So our listeners can get to know you a bit better.

Val Head: [Laughs]

Lea Alcantara: Are you ready, Val?

Val Head: I am.

Lea Alcantara: Okay, first question, Mac OS or Windows?

Val Head: Mac.

Emily Lewis: What is your favorite mobile app?

Val Head: KENNEDY.

Lea Alcantara: KENNEDY, what’s that?

Emily Lewis: Oh, what’s that?

Val Head: It’s kind of just like for saving moments and it has this weird way of pairing up like photos or notes you take about where you are with like headlines, and sometimes, the combinations are hilarious. It’s just great to look back on stuff.

Lea Alcantara: Oh, very cool. What is your least favorite thing about social media?

Val Head: Facebook. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: What profession other than yours would you like to attempt?

Val Head: I would love to be someone who does installation art or responsive interior. I think that would be really fun.

Lea Alcantara: Cool. So what profession would you not like to do?

Val Head: Primary school teacher. Oh my God, I don’t know how they do it. [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: [Laughs]

Emily Lewis: Who is the web professional you admire the most?

Val Head: Oh no, that’s such a hard question. [Laughs] I don’t think I can answer that one. I need a really long list.

Lea Alcantara: All right, what music do you like to code to?

Val Head: I like to code to ambience like indie rock stuff, like Explosions in the Sky, Do Make Say Think, that kind of thing. Things without words.

Emily Lewis: What’s your secret talent?

Val Head: I am secretly a vegan cupcake expert, a vegan cupcake baking expert.

Emily Lewis: Oh, it’s great.

Val Head: Except that I just give it away to some of those clumsy… [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: What’s the most recent book you’ve read?

Val Head: I am actually reading the Monty Python Guy, Michael Palin’s Diaries, over the 70’s, It’s actually incredibly interesting.

Emily Lewis: And lastly, Star Wars or Star Trek?

Val Head: I’d have to go with Star Trek on that.

Lea Alcantara: Oh, interesting.

Val Head: Yeah, family time when I was growing up was watching Star Trek on like Sunday nights or whenever, so I know so much about Star Trek. It’s embarrassing.

Lea Alcantara: That’s amazing. [Laughs]

Val Head: [Laughs]

Emily Lewis: [Laughs]

Lea Alcantara: So that’s all the time we have for today. Thanks for joining us.

Val Head: Thanks for having me guys. It was really fun.

Emily Lewis: In case our listeners want to follow up with you, where can they find you online?

Val Head: You guys can find me at valhead.com. That’s my main site. I’ve got links to my video tutorials and book stuff off there if you want to check those out. Also, I tweet way too much, and I’m @vlh on Twitter. That’s actually probably the easiest way to see what I’m up to because it’s a little overkill. [Laughs]

[Music starts]

Emily Lewis: [Laughs] Awesome. Thanks Val. It was so good to talk to you today.

Val Head: Thanks guys.

Lea Alcantara: We’d now like to thank our sponsors for this podcast, Visual Chefs and Pixel & Tonic.

Emily Lewis: And thanks to our partners, Arcustech, Devot:ee and EE Insider.

Lea Alcantara: We also want to thank our listeners for tuning in! If you want to know more about CTRL+CLICK, make sure you follow us on Twitter @ctrlclickcast or visit our website, ctrlclickcast.com, and if you like this episode, please give us a review on Stitcher or iTunes or both.

Emily Lewis: Don’t forget to tune in to our next episode when we’re talking with illustrator Anton Peck about defining web roles. Be sure to check out our schedule on our site, ctrlclickcast.com/schedule for more upcoming topics.

Lea Alcantara: This is Lea Alcantara …

Emily Lewis: And Emily Lewis …

Lea Alcantara: Signing off for CTRL+CLICK CAST. See you next time!

Emily Lewis: Cheers!

[Music stops]

Timestamp: 00:41:38