Transcript

Jen

This is The Web Ahead, a weekly conversation about changing technologies and the future of the web. I'm your host, Jen Simmons, and this is episode 103. I first want to say thank you so much to our sponsor today, Squarespace. And to thank Pantheon for powering The Web Ahead website. You can check them out at pantheon.io. And to Cache Fly for delivering all the audio files to you through their fast reliable CDN, cachefly.com.

So it's been a little while since I have done an episode. I'm back into that place where I start getting a lot of tweets and notes from people saying, "Where are you? Why haven't you done an episode? Are you coming back?" The answer to that question is now and has always been: "Yes, I am coming back. Yes. Sorry, sorry, sorry, sorry, sorry, I'm sorry. I was busy."

I don't know. Usually I know that I'm going to miss a week or two and the next thing I know, two months have gone by, and I don't know how two months have gone by.

I've been speaking at a lot of conferences lately, I think I've probably spoken at half a dozen conferences since the last time you heard my voice on the show. So that's what happens. I get really super focused on perfecting my talk, and lately I've been obsessing about layouts, and the web, and speaking at fabulous conferences like An Event Apart. And I will be doing that through the rest of the year, so if you're interested in coming to a conference where I'm speaking about layouts and web design, and things like CSS Shapes and Regions and Exclusions, check out jensimmons.com and you can see the whole schedule. I'll be at An Event Apart four more times this year. I'll be at Future of Web Design twice, I'll be over in Brighton for other things that are probably not quite announced yet. So check it out. I'm sure I'll enter 2016 as well.

So thanks to everybody who's listening. Thanks for sticking with the show, and being excited, and pinging me and saying, "Hey, I miss you, come back!" That definitely always motivates me to find someone and get back on the show.

So today, I went and found for you Rachel Nabors. Hi Rachel!

Rachel

Hey, hi Jen!

Jen

We were speaking together at some conference, and I was like, "You should be on the show," or you were like, "I should be on the show," or we agreed that you should be on the show, so here you are.

Rachel

I probably just sent you a super aggressive tweet and was like, "I want to be on your show. Put me on." I have a tendency to do that.

Jen

Yeah? Maybe, although I have to say, I tend to not respond very well to those. I tend to be like, "Who do you think you are? Wait, I would pick you if you…" But you are awesome, and you do know a lot and I probably saw you speak and thought to myself, "Yeah, I need to… yeah." Because you've been traveling around and speaking a lot about web animation.

Rachel

I do, I do, and I'm sorry if I came out aggressive in any tweets

Jen

Oh, no!

Rachel

But I've learned that if you sit passively and wait for people to invite you to dance, you never get on the dance floor.

Jen

Ah.

Rachel

So sometimes, you've just got to say, "hey, I like your moves, let's dance."

Jen

Yeah, so you are a web animation consultant, and have a company called Tin Magpie, and I feel like you've just been digging deeper, and deeper, and deeper into web animation and that you know stuff that I want to ask you about.

Rachel

That is probably a fair assessment. I ended up getting crazy into web animations, I don't know, two or three years ago. I saw the spec and realized that there were all kinds of amazing things that could be done with it. And I ended up digging deep just never unburying myself. And I'm so deep right now with web animation, it's like the light of the rest of front end development hasn't reach me in a year.

Jen

[00:03:57] So what kinds of stuff are you doing, or are you doing with your clients with animation? I'm looking at your website and I see these animations projects, and they look like cartoons. Are you doing full on video animations with the kinds of things that people would do in Flash before, or that you would do in a movie, perhaps?

Rachel

Yeah. There's all kinds of things that… Basically, you can do a lot of simple animations with CSS that people used to only be able to do with Flash. We're still not at the point where we have a really reasonable replacement for Flash, but we're getting there, slowly but surely. CSS animations is very declarative and primitive compared to what people could do with Flash, but we have the Web Animation API, which is supposed to at least offer some underpinnings that people could write libraries to do even more with in the future. But the Web Animation API isn't quite where CSS animations and transitions are right now. Those things are very baked in and very reliable, they're only prefixed with webkit, and you can pretty much put them to work today in any project you like. But the Web Animation API, it's been a long time in the making and it still enjoys spotty support only among the top two browsers.

Jen

Which would be?

Rachel

Well that would be let's see Chrome and Firefox.

Jen

Ah, Chrome and Firefox. I was going to say Chrome and Safari. Safari iOS.

Rachel

Safari's developers have no comment on the Web Animation API. And Internet Explorer has also adopted a wait and see approach. They want to see if developers are going to adopt it when it's in these two large browsers, or if perhaps the API is… to be fair the API is still under going some changes so to start implementing it today might involve a lot of backing up and redoing. So I can understand that.

Jen

It's a JavaScript animation? I'm sorry, JavaScript specification that gives people a lot of things with the Javascript API to do animation. Is that right? What is this? Is that what this is?

Rachel

Well, it is a JavaScript API. It allows you to interact with the browser's rendering engine that renders CSS transitions and animations in the DOM using JavaScript. So you don't have to write it in CSS, you can pass an object to some JavaScript, it let's you pause, and rewind, and set time objects on things, which you can't do with CSS right now. So you can actually sync up different animations across objects by setting their time objects to have the same value. So it lets you have a lot finer grain control over the animations to do things that some Flash developers have complained in the past were just simply not possible without Flash. Well, when this API enjoys more complete coverage, it will be possible.

Jen

It also seems like it would be a more direct response to a user's behavior to have a JavaScript API rather than… because right now of course if the user does something, then you can capture that behavior with Javasciprt and then you can change CSS classes around and then use CSS to respond with and animation but this would… Is that right, it could be a little bit more like, "People are doing stuff on the website and JavaScript is noticing what they're doing and then immediately coming back with animations rather than having to round trip through CSS.

Rachel

It can be used that way. The round trip through CSS, it really depends on what kind of model you're using. If you're going with a stateful animation, where you're changing the layout of the page, remember pjax?

Jen

No. Explain…

Rachel

Ok, well pjax was when people realized that they could combine push state and ajax to reload only a portion of the page's content using ajax and then update the URL to reflect that, so they could push that to history. And so they could simulate navigation through a website without having to cause the page to repaint every time a person clicked a link. This makes it feel a lot more like an app, you can add page transitions, too. Like on my site, you'll notice that different pages slide into and out of focus, and this can provide a different user experience, perhaps even a better one in certain use cases. So anyway, that's one example of a state based animation, going from page to page, changing your state in your website's user path.

When it comes to doing more interactive animations, say you're building a chart that updates depending on new information, there's a lot of dynamic processing that's going on there to change the heights of different things and how they should change, and that's not necessarily something you want to handle with states and classes. That's something you probably want to be assigning values directly to your different elements on the page using JavaScript as information comes in. In that case the Web Animation API would be very useful. Anything where you might need to scrub through a timeline, that would also make this very useful. So it depends on what you want to do. To give you a roundabout answer, it depends.

Jen

[00:09:33] Yeah. So what kinds of things are you seeing people use animation for successfully these days?

Rachel

Well, in addition to doing states, which I've seen some really nice examples of using stateful transitions to move people through an app-like workflow — (we'll get into cognitive load in a little bit, I'm sure). I've seen people do some really beautiful fancy stuff with animation, like educational sites that verge on being video games, Cornell has been doing a lot of interesting things with birds, the Cornell Lab of Ornithology, they've been doing some really neat quiz sites that use birds, and they use a lot of animations on those sites to make it a little better than, "Select the correct answer and hit submit." It's just a little bit more fun. It updates a little bit more immediately. And because you have those animations between, you know you got the correct answer, and selecting that answer, it feels just a lot more like using an app. It's a lot more — I wish [the word] "responsive" hadn't already been claimed — but it responds to the user, a lot more intuitively. It makes it feel like you're actually interacting with the page, rather than clicking buttons. So I’ve been seeing people use animation in good ways there. Like I said, really, really liking what's happening with stateful and the interactive animations, and what people are doing with infographics and dashboards is getting very advanced these days. It's an exciting time.

Jen

Yeah, I'm looking at rachelnabors.com and it's amazing to watch your content load without reloading the whole page.

Rachel

There's so much more I wanted to do with that site, but you know how the cobbler's children have no shoes, right?

Jen

[00:11:35] Oh yeah, yeah. Yes. Yeah. [laughs]. Yeah. So where are some of the pain points these days, with animation? Where is it that people have a vision, they want to do something amazing, but they can't.

Rachel

I live in the the world of animating things in the browser. I had forgotten until recently that people outside this very narrow niche scope don't often have the window into some of the things that I take as common knowledge. For instance, I still see a lot of people animating properties that are very unperformant to animate. To give some background on performance and jank etc. you have to remember that up until recently, browsers were not designed to animate things aside from scrolling. Browsers did layout and they repainted pages. And now we're going into the DOM and we're changing properties, and we're telling the browser you have to change it so much over such a period of time, and the DOM, the browsers, these things just were not build originally with that in mind. Browser vendors are scrambling right now to improve performance and make these things less taxing on the renderer.

For instance, there are three things that happen, there is layout can be re-triggered, like if you change something's width, the browser has to re-lay out the entire page to figure out where everything goes. Even if you know that changing the width of an object isn't going to change everything else on the page, the browser doesn't know that, it has to do all of those calculations again. It's very expensive. There are repaints, that's where the browser actively paints sections of things that are to be rendered, and there's composition, or compositing, which is when the browser actually starts putting things on the page. All these three processes are pretty expensive, layout being the big one. You can see them in your dev tools usually, if you know what you're looking for.

Now, when it comes to animating things, there are only two properties that can be animated causing a minimum of disruption to this rendering pipeline, and those two things are opacity and transform because they don't change layout, they don't take anything off the page per se, so nothing's being composited or repainted. And so those are the two things that you can animate. I still see a lot of people animating positioning and width, or display: none, which is another story entirely, because you can't animate display. But it's more performant to only use those two properties today, but browser vendors are scrambling to increase the performance of things like background color, or color, changing something's color shouldn't cause a bunch of calculations to happen, but that's not what browsers were thinking when they originally wrote their rendering systems. So right now we're seeing a lot of animation being used, but it's not necessarily performance animation, so animation is likely to cause jank on less-capable devices and browsers. We are fortunately, the nice things about CSS animations is that when you implement them, they tend to be very state oriented. So if the hover effect doesn't work on a button, it's not like the button stopes working, it's just the person doesn't get the nice little transition from that unhovered state to the hovered state, it just jumps from one to the other, so it doesn't really ruin anything for them. I love that about CSS animations and transitions, that they are by their very nature backwards compatible and accessible in that regard.

Jen

[00:15:42] Yeah, they have a good fallback. Talking about all this performance reminds me of the the things that drive us crazy the most when it comes to — sometimes you'll see someone trying something "cool" with their website, and their parallax animation, or "you scroll, and this zooms from here and it zooms over there"… There's a way in which people, our initial idea is, "We could never do this before, now this is amazing, let's do it!" Then there's a bit of a backlas. People are like, "oh, I hate that". Partly perhaps whatever is being animated is not a good idea, it shouldn't be animated. But a lot of it, I think, is because the performance is so bad. Where, if it were smooth and fast, it would be fine. But because it's awkward and janky, and things are jumping around, and things are reloading three, four, five, sometimes you go to a website and it load four or five times. I'll start reading, I'll start scrolling because I am reading the article, and the page is still repainting.

Rachel

Ohhhhh.

Jen

Especially on an iPad, and especially reading at sites that have a lot of ads, it feels like the ads are triggering repaints because they're loading, but the page doesn't know how big they are until they get there, and then it repaints the page, then another ad loads, and it repaints the page, then another ad loads, and it repaints, you know?

Rachel

What site is this happening to you on?

Jen

Oh, it's lots of news sites.

Rachel

Ewwwwww…

Jen

[00:17:14] It happens all the time. I'm on Twitter, I'm on my iPad, I'm clicking links, and it's loading webpages into the Twitter UIWebView. And it's repainting over and over and over and over. This happens so often, it feels like normal life. That's not intentional animation, but there is: the page is animating because it's jumping around. And I scroll, I'm reading the third paragraph and I'm scrolling, and it's still repainting the page and it jumps back to the top and I have to scroll back down, and it jumps again back to the top.

So all that to say, I feel like there's a big backlash of, "Ahhhh! This is terrible, this parallax scrolling!!!" Jeffrey Zeldman was on episode 100, and we were joking for the first quarter of the show how horrible parallax scrolling is.

What do you have to say about that, when you've seen websites where the animation almost takes over people's attention so much that people want to say, just read an article, and instead they're having to deal with bad performance on a bunch of animations?

Rachel

You'll notice that a lot of things on my website, a lot of my fun little projects, they use things like parallax. (They don't necessarily, especially since they're a little bit old now, use the most performant methodologies that I recommend people use now.) I think it's definitely fun to experiment with these things. I think that they even have their place.

Parallax is very useful… "Parallax" — I think is a horrible name for this — it's really just scrolling triggering animation, or scrolling as a timeline for a rate of change. And that can be really useful for determining when, say, a person has hit the end of a page, and animating in some calls to action to get their attention, like, "Hey, you've finished your quiz. Would you like to submit it now?" These kinds of event triggers based on where a person is in a page flow, can be very useful. It's dangerous to stigmatize them, and it's dangerous to use them. I try to encourage people to animate responsibly.

I've written for A List Apart about the six major uses of animation — using them to reinforce hierarchy, cause and effect, etc. If you're going to animate something, it should fulfill at least two purposes. And you can't use the word "delight" as either of them.

I do a lot of work with various companies, sometimes I need to help them with building an animation portion of their style guide, how they use animation. I also do interactive projects with companies. Invariably in a meeting, somebody's going to come in and they're going to say: "We need lots of stuff to delight the user." I feel like I'm always the person who cringes first when people say that because I feel like that's a carte blanche to put a bunch of moving stuff on the page. As if it will "delight the user" if it's cute enough. Nooooo… it'll annoy the user if they see it too much, and it will make some users outright sick if you don't do it right.

This is a powerful tool, and like all powerful tools, we should be responsible with it. I don't think that means we should demonize it and stick it on a shelf and be like, "Don't ever touch that." If you need a blow torch to weld things, that doesn't mean you should be using it to light your birthday candles.

Parallax gets a bad rep, it is definitely becoming trite. Try to look at any design agency site that doesn't have some sort of parallax on it. It's very easy to turn out a slick looking magazine type site using some parallax effects and really nice typography, but not necessarily the most useful sites. Definitely, I think using parallax in that way, will make a site look dated. Because I can guarantee you in two years people won't do this anymore.

Jen

[00:21:42] Yeah, I guess there is a way in which we start to think about the effect, the animation effect, as if it's a complete abstraction from the content itself. Rather than thinking about, "Ok, here's the content, here's the purpose of the website, here's what the user's trying to do, here's the user experience that we're trying to craft for that user… Ok, how can animation help us? How can we pick the appropriate animation from a whole different bunch of different types of things that animation can do to help make it more clear what's happening, or make it easier for the user?" Instead it's like, "Oh, we got this cool stuff. Let's use some cool stuff, we'll just sprinkle cool stuff sprinkles all over this."

Rachel

Right.

Jen

We don't do that with anything else, we're not like, "Hey, this typeface looks awesome, let's just use that one because it's cool! Oh yeah, it's like Halloween! Oh yeah, this article has nothing to do with that typeface, but I like it."

Rachel

Junior designers do that all the time, and then junior animators do the same thing. So that's what I mean. Right now, everybody is a junior animator online, and we're all like, "Oh my gosh! I can put a lock cycle here, that's so cool! Oooh, parallax, yeah! Ooooh, ahhhh! Let's do page transitions, even if it's a flip that would cause people with vestibular disorders to throw up." We're in that phase of the industry where we've got this shiny new tool and now we're going to go burn our fingers off with it. And that's happening. It's happening right now, it's been happening. I love the interaction design community. Ok, who hasn't heard about… oh my gosh what was it called… it wasn't Paper… what was it… they redid the entire site in canvas to get 60 frames per second.

Jen

Flipboard.

Rachel

Flipboard, thank you. I have two apps and they both do the same thing. They did the entire site in canvas so that they could hit 60 frames per second with their animation — which I think their animations are very well done, by the way. And they got a lot of flack for that because their answer to accessibility issues, was to recreate the DOM and have it as a shadow DOM accessible to screen readers. Of course there was a lot of push back from the accessibility and UX community, some bastardization of the technology. When have we not heard that expression applied to anything involving animation. It's like, as soon as you move anything on the page, someone's going to scream, "Bastardization of the technology," because the web is just a big document, I suppose, and it was never intended to move or interact with human beings at all. And the whole sum of human knowledge should be distilled down to text.

Well, that's not true. We have a lot of different facilities for taking input. We have our eyes, we have our ears, there are different ways to present this information to all of these senses, and for Flipboard, they chose a visual way of presentation. And for a visual presentation of information, that 60 frames per second is an accessibility issue. Because as soon as you break 60 frames per second, if you haven't… what is the word for it? If you have uneven performance, it destroys the illusion of life as it were, and any cognitive load boost you got from animating that experience is lost as the entire process gets taken from the visual cortex thread, the brain's GPU, and thrown onto the main thread, where it interrupts tasks.

So this was an issue to them, and they wanted to solve for that issue. And this is what developers do when they have a big problem that they need to solve, they find their own way around it. Because obviously, it's not like they could go to the browser vendors and say, "Hey, could you improve your performance for us, because we want to do this thing?" But because they did this, and they did a write up of why and how they did it, a bunch of developers for the browsers came over and looked and saw that this is a big issue, that people are trying to build these things, and that they can't build them the way we're supposed to build websites because browsers just aren't optimized for that kind of animation, and maybe they should be. Maybe they should be, or people are going to continue using what is, let's call it what it is, a huge hack. And I thought that they were very noble for writing about this because all of the interaction developers I've interviewed have been doing the exact same thing for their clients, "Oh, it's a really cool site for Burger King or Nike," and the whole thing is in canvas, and guess what? They didn't even bother to build a lovely alternative DOM for screen readers.

So you have people right now working silently, not sharing their information, not sharing their code, not talking about what they're doing because they're overworked interaction developers, making the equivalent of inaccessible Flash websites for clients. And that's a problem. That's a silent unspoken problem. And here, Flipboard actually exposed this process, and showed all of these pain points of why you need 60 frames per second, why that's impossible using the tools we currently have because of the browsers, and what you have to go through to make that accessible, and I found that was just a valuable conversion for the community to have. And I have gone totally, totally off the road here, I can't even remember what you asked me.

Jen

No, it's good! Yeah, me neither.

Rachel

I've gotten the dirt bike out.

Jen

[00:27:07] No, I think it's good because I've been one of the people in that camp that's like, "Well, that's just not what the web is, stop trying to make the web into this other thing. Don't put all of your content in canvas, you're a news website. Put your content into HTML." But I also find myself thinking increasingly, as I think about layout, this is a three dimensional computerized space, this is not a piece of paper. Why are we not using the z-axis? What is it that we might want to do, and it does feel like a bit of an empty… I don't see a lot of answer to that question of what could we do. And as I'm listening to you, I'm thinking, well that's part of the problem. There's this… I don't know. On the one hand, let's just use HTML, let's style it with CSS, let's let it be what it wants to be, which is flat on the page, and let's not worry so much about doing some kind of fancy 3D spinning effect where stuff's… But then Flipboard comes along and they're saying, "Hey, we want to use the third dimension, we want to use the z-axis, we want to make sure our animation is fast." And yeah, they had to do this crazy hack which they shouldn't have to do, that they shouldn't be doing, but if browsers come back around and say, "Ok, let's change what the browser's do, let's add JavaScript let's build a beefier API…

There's this tension between wanting to do fancy things and have excellent performance vs. wanting to not try to force the medium to be something that it isn't, and to let the medium be what it is, because that's how you get the web to be what the web is. Which is content in a format that will outlast all of us, probably, outlast our lifetimes, outlast decades. Not just, until the new OS comes out, then all the software needs to be replaced. And so all the old file formats are useless, and all the content. Try to open a Microsoft Word document from 1992. I dare you. You're not going to be able to do it.

Rachel

Try and play a game from 1992.

Jen

Yeah, these operating systems come and go. So the web is a way for you to put content into a format that's going to last a very long time and work on an incredibly diverse number of different machines, from crappy old phones, to brand new phones, to all these different things, computers, and you'll be able to listen to things in the car, and you can listen to them, you can watch them. It's multiple, zillions different kinds of computers. The web was designed in an era when most people were using the command line only on their machines. They had terminals and they used command lines. And I think that's very valuable. I think that's important. That's what the web is, and I don't want the web to try to be something that it's not.

Rachel

Also, we're talking about content types here. One of the major exciting things for me is that when you build something using the tools of the web, it has a very long shelf life, compared to, say those wonderful video games we used to play on DOS. I remember those games. I don't think I'll ever be able to play them again because they're gone. They're in a file format that's no longer supported. More and more people are building interactive comic books, interactive stories, a lot of them were built in Flash. Newgrounds, so many cartoons, so many games, so many things that were made that are now throwaway code, they'll never be accessible again. You have people coming from Flash who want to make kinds of content that people can interact with. They want to make games, they want to make those interactive stories with sound and motion, and they want to build them in these tools that have such a long shelf life so that their art, their creation, will last as long as it possible can and isn't tied to an operating system or a third party container. And for them, these conversations have to happen for them to come up and be first class citizens of the web, too.

Jen

Yeah.

Rachel

[00:31:18] I mean, think about it this way, too. Remember when responsive design came out and everybody was saying it was a bastardization of the format of the web? I know I was, I was like, "What? No. You design it once, and it has a layout like a page. Why would it change? Why would you do that?" And now we have reasons for why people would do that. That's an example of when we looked at the web as a medium, and we thought, "Why is it being constrained by what came before? Why does it have to be this way? Is it this way because we never had the technology to do it any other way? Or is it this way for a very good reason." And we found out it was because we had never challenged the technology before. There was no reason why the page should stay the same size. And that we could create a better web if we let go of that inner tube, if you will, of fixed page layout.

Jen

Yeah, well now the story really is, the web was always fluid, we broke it by making it this fixed width size. And responsive web design is a more mature way to return to fluid design, but being able to make better layouts at all different screen sizes because pure fluid, just having your text be a thousand pixels a line is too much.

Rachel

Right. Yeah, the fluid web was the web of the command line.

Jen

Yeah, and the reason many of us, myself included did not want to make fluid websites was because the beauty of the layout would start to fall apart once things got too wide, and responsive gives us the chance to say, "Hey, I got different CSS for those wider states." It's basically a giant if statement. Let's just change the layout at different sizes. But it's true, there was a moment when we thought the web was fixed and now we tell each other this story about how that was a delusion, that we went down the wrong road, we misunderstood the web, and the web really is this thing that is the newer understanding.

Rachel

Yeah, but could you imagine us trying to write up media queries back in the fluid width days? We would have no idea what we would have actually needed in the future until we started trying to build layouts.

Jen

Yeah.

Rachel

It's weird. It's like you have to go through this awkward growing phase, this really awkward gangly teenage phase with everything. Every. Single. Spec. It's like this full circle of, "Well, we started this way, and then we went that way, and now we got it right. Now we got it right."

Jen

Right.

Rachel

And you wouldn't have been able to get there if you didn't go through all the awkward weird stuff beforehand.

Jen

Yeah, it is funny how a lot of people who, they just want to be able to use the technology right now in the browser, and they're frustrated at this browser or that browser, and they don't know why it's not there already. And I don't know how it could not be this messy mess of, well… sometimes there's a single company who has a vision, sometimes there's a single browser vendor who has a vision, sometimes there's a group of companies, or many times it's a group of individuals, really smart individuals, and they have a vision. And then there's a big debate, and the debate sometimes goes quickly, sometimes the debate takes years and there's a lot of nerd wars and emails and sometimes it gets implemented, and it gets re-written completely, and it gets implement in a different way.

Rachel

Some things take along time because the people who care about them most are the people least equipped to have those conversations.

Jen

Yeah, and I think that the world as a community, the people who make web browsers and the people who make web standards have… it's like we've gotten better and better and better at figuring out how to go through this process, but it's still going to be messy, and it's still going to be a lot of trial and error, and it's still going to be a process.

Rachel

Yeah.

Jen

And things won't be "done" until a lot of process has happened.

Rachel

I like to think of it as sort of like evolution. There are a lot of really cool species. There have always been cool species, and they do go extinct and they do turn into other things. And sometimes they get cooler, and sometimes they get less cool, but the process of getting from a hooved predator to a blue whale is a long messy process. You can't walk in one day and be like, "Why don't we have blue whales?" You're going to have to go through that awkward evolution of an intermediate seal format that's not very attractive and barks, but you'll get there. And you just have to be patient and cooperative. This is what the system looks like.

Jen

Yeah. Those weird fish with feet.

Rachel

Yeah.

Jen

[00:36:00] So this article that you wrote for A List Apart, is this Web Animation at Work?

Rachel

Yeah.

Jen

So, I'm curious. You've got six [kinds of animations]. When I think about animation, I think about, "Oh yeah, do something cool for a hover state, instead of just the boring switch." Right, ok, that's cool. All the way on the other extreme, I'm working on a website for a comic book company and we want to have basically videos that are more than videos on the webpage, so we're going to have all this illustration artwork, and drawing, sort of the classic Flash website back in the day when things were very heavily animated to the point where it's almost indistinguishable from an animated movie. But most people are not building websites like that, right? So, there's a whole world in between, that it feels like you are in this article starting to explain to people like, "Hey, your typical regular website of content could benefit from animation if you used animation in smart ways. Here are six kinds of animations that you might want to use." So can we, I'm looking at this article, can we just talk about what these six things are.

Rachel

Let me pull them up. I haven't memorized them all yet.

Jen

So the first one is causality. "With proper application animations can indicate causality." So then you say, "causality, when one thing happens, just before another, our brains infer that the two things are related, and that the first caused the second."

Rachel

Yeah, a great example is when you have a loading spinner on an image, a person knows that they don't have to click on anything to make the image come, they're just going to wait for the bandwidth to catch up and the image to load. So when then spinner disappears, they know that that was an indicator of a causality, that the spinner was related to the image that appears in its place. The second one I think is feedback, which is a little bit more human, which is when your action is what causes the thing. For instance, that wonderful hover state. You're hovering over a button. Instead of just jumping from one to another, you animate that, it indicates "if you click on this, this will happen." Or if you're changing things around in a form that causes them to animate as well, you're the cause of that change.

Jen

So you're giving the user feedback, "Yes, you've accomplished the thing you were trying to accomplish.

Rachel

Mhmm.

Jen

[00:38:40] Relationships. Animations can underscore where things are hierarchically and spatially in relation to one another.

Rachel

This is particularly useful in page transitions. For instance on my website, you'll notice that the page itself slides in as though a piece of paper were being slid down from a clipboard, and that the sidebar slides out to the side. It reinforces that hierarchy that the sidebar exists above the page. That the page is larger and comes down from the top, so it's more important. The sidebar just scoots off to the side. It's an aside, it doesn't really matter.

Jen

Yeah, that is the kind of thing that we are now very conversant in in the phone app world.

Rachel

Yes.

Jen

If you think about applications, like we talk about apps apps apps, as if a native app is the savior of us all. But we've had applications on computers since we've, well, maybe not since we've had computers, but somewhere along the way in the worlds of computers, applications got invented and they have been around far longer than the web has. And probably for a long time, the graphics of the computers couldn't really handle, there wasn't even a GUI for a long time, but once we got GUIs, the graphics cards were such that there wasn't a lot of animation going on. Macintosh OS 7, System 8, but there was always some. And then it feels like when the phone apps…

Rachel

Remember closing windows, or minimizing windows?

Jen

Yeah, I remember when minimizing windows showed up because people were freaking out about, "That's too much movement, that's too much animation, go away, I just want to click and have the window disappear. I don't want this genie effect like zyeeoooming down into the dock.

Rachel

Yeah.

Jen

Or when the dock got invented when OS X, showed up, and you would hover and the dock would slide up from the bottom or disappear. People complained. They thought that these things that Apple was introducing was really hokey.

Rachel

Yeah, and you'll see that people complain about that on the web, too. But the reason Apple started using those animations is because they had very good research backing up and justifying why they should use them. One of the things I've done since writing that article for A List Apart, I feel like I wish I could write another article to cover this, but I've been reading through a lot of research papers about animation, and operating systems from back in the early '90s, which was when silicon valley started investigating how they could differentiate their operating systems. So there were a lot of papers that started coming out about how animations being used in an operating system improved user performance because of that cognitive load I told you about. You and I are in very special place and our brains development. It's very fast. It's probably running as fast as it's ever going to run. And it makes a lot of assumptions for us. It does a lot of things for us that we're not really grateful to it for. One of them is when you're on a website and you click a link and the page repaints, our brains take a quick snapshot of the page before and then the page after, and it determines, "Am I on a new page? What has changed on this page? Am I on a different page on the same site and just the content I was looking at has changed, where do I focus my attention?" It does all of this from the background, and then it lets you get back onto task, which was reading, or perhaps completing a form or something.

The research suggested very heavily that, properly done, animating between those interactions, like instead of when a person clicks on a drop down, the dropdown suddenly just boom appears underneath them, that causes like 100ms worth of brain cognitive load processing time. So it's like you've added a little delay in addition to the computer's delay of processing that information. So you've got the computer processing and the human processing happening, and they found that if you added 100ms animation, for instance, that you lost the 100ms worth of human processing time out of that. And that properly applied, you could use animations to make the system feel snappier, even though it might be running a little bit slower than it would be if everything just had jump cuts from one state to the next. Because people were taking less time to interpret the changes on the screen. And that's when you started seeing animations showing up in operating systems. And you'll also notice that around the time they started showing up in operating systems, these papers stopped being published, probably because the people who wrote them ended up working for the companies, and doing their research internally and not sharing it with the rest of the world. We're starting to see more research papers coming out as people who are doing graduate studies experiment with animation and the web. I just saw one from May that was really exciting that used CSS transitions in their tests to see how people would interpret their transitions. I love them. I love reading them. It's very exciting to see this work being done in a public space, even though I'm pretty sure that all of this work has already been done. It just hasn't been shared with us.

Jen

[00:44:01] Huh. Yeah, it feels like when phone apps showed up, first iOS iPhone, and iPad, and whoever else. All the knock offs. Animation inside those apps is very much part of the language of those operating systems and those spaces.

Rachel

Oh yeah.

Jen

And so when people have these debates about native apps vs. the web, native is winning. I think part of what people design when they're imaging which one are they going to do, are we going to do this one or that one, they're imagining a space where they can do these kinds of animations to explain relationships and give people feedback and create causality in a way that they assume the web isn't capable of.

Rachel

Yes.

Jen

And it increasingly is.

Rachel

It's increasingly becoming capable, but people are still hesitant. Like, most people who work in apps don't suddenly start working in the web. I feel like there's a definite set of people who work on building the web, and a set of people who work on building apps, and they don't go to the same conferences, they don't read the same journals, they don't talk to each other much, even though they’re doing really similar work half the time. They're going about their approaches completely differently, which is unfortunate because I feel we have a lot in common. We're sharing content and modeling user behavior. I like that the web is taking a few lessons from app development. Because I feel like app developers have already been focused on the user, they've already been focused on performance, they've already been focused on making an experience for people who have a limited buffer for cognitive load. And we're only just getting there. We've always accepted that the people who use the web will be sitting. And in a cubicle. And that they'll be in this prime mode of thinking. And that they have the time to click and interpret and wait, and that they're going to be very patient with us. And app developers have never been afforded that luxury. Not since mobile came along.

Jen

Yeah. Let me talk about our sponsor today, and then let's go back and mention these other guides to animation that you put in this article.

Rachel

'K.

Rachel

Yeah, I'd like to see that!

Jen

[00:51:38] Yeah! So your list here. We've got Causality, Feedback, Relationships, Progression.

Rachel

Ah, yes. Where you are in relation to other things. For instance, where you are… as a common example, how far along you are in reading a page, or going through a task list, like a form. If your animation somehow shows people that better, it's an improvement. For instance, scrolling to top is a common example, where that animation of being scrolled to a particular section of a page is really useful because it's less disorienting than a jump cut. If you animate a person to where they are in their progress, it helps reinforce that spatial relationship in their brain.

Jen

[00:52:33] Right. Physics.

Rachel

Physics could be an entire talk in itself. For instance, adding weight to heavy or important objects on a page, and making something feel heavy by how you move it. If you make it move low and slow across a page, as compared to an alert, which might just bubble on and off, very light weight, you might make an alert to some new things in your inbox seem very light weight. Make its animations happen very zippy, very ethereally, whereas maybe an alert that your account has been hacked will have a much heavier feeling in the animation so that it has more weight on the page.

Jen

Yeah, I guess that's where the hokeyness can start to creep in.

Rachel

The hokeyness?

Jen

It's like, "Oh, I animated this paragraph because it's the most important paragraph in this article." But when you talk about things like an alert message, that starts to make a lot more sense like, "Oh right. Something that somebody's interacting with the website. Someone's logging in and adding content to it, or they're in charge of managing the comments, so they're having to go through a bunch of comments. I guess that's where you start to think of it as: "it's a web application."

Rachel

A good rule of thumb for if something should be animated or not: is more information being painted onto the page? If it's a paragraph and somebody is scrolling down the page, it doesn't have to be animated. It's already there. An alert is new information coming onto the page, so it makes more sense to animate it than to just pop it on there. If you can do it to make it more or less discrete depending on how important it is, that's a good example of where animations would help as opposed to hinder. Try to think about like, "is this new information coming onto the page, or coming off of the page?" because if it's already there, it probably doesn't need to be animated.

Jen

It's also interesting to think about the scroll itself as an animation. It's not an animation that you're adding to the world. It's an animation that comes with every browser.

Rachel

Hurrah! Default animation!

Jen

It is an animation, right?

Rachel

Yeah.

Jen

The page loads, and I'm reading this big long article of text, and I'm scrolling it to get to other parts of it, and it is in fact animating. It's animating in a way that I'm so entirely used to that it's invisible to me. But that is an animation.

Rachel

And it already imitates real life. It's scrolling. It's not flipping through pages of a book, you're scrolling down a document, so you're an ancient Egyptian priest reading one.

Jen

Or I'm holding on my tablet, pushing on it, and making the content go up. My hand is holding the content and pushing it out of view.

Rachel

[00:55:28] Yeah, you're stroking the great reams of paper over the edge of your board. I mean, it's hokey already.

So another use of physics would be, you know easing functions?

Jen

I do. Explain for those who don't.

Rachel

Ok, so when you're using CSS Animations or Transitions, you have the option of using a non-default transition or animation timing function. Now in animation, studio animation, we call this 'easing' or 'cushioning' even. It's a little mathematical formula that describes a rate of change over time.

You can change things at a constant rate. That's called linear, and it looks very mechanical, very inorganic, almost mineral like because if you look at anything moving in the world around us, it's not a constant rate of change. The branches when the trees are stimulated by wind, they kind of bounce up and down, they don't move from side to side in a straight line at a constant rate. They have a little bounce to them. And whenever you watch somebody getting ready to hit a ball or something, they do a little wind up. There's rates of change in the world's motion around us. It obeys certain curves of timing, and we can imitate those curves using our timing functions. There's ease in, which starts slow and ends fast, this gives a feeling of acceleration and then a sudden stop. There's ease out, where something goes from fast to slow, that gives the feeling of deceleration, like somebody rolls a ball across the floor, eventually because of the drag of the floor and the atmosphere around it, it will slow down to a stop. That feels very natural for moving an alert message onto the screen. That's where we talk about when animation can be used to reinforce physics.

You can have lots of animations on your page, but if they don't have some connection to the physical world we enjoy around us, they will be jarring to the human mind. They won't make quite as much sense as they could. It's a good idea to reinforce the way things naturally behave in our environment. We have studies that show that babies have a concept of physics the moment they're born. They expect rolling balls to slow down. They know that when something goes behind another thing, it doesn't cease to exist. That is so core to being human and the human experience on this planet, it doesn't make sense to buck it in the digital environment.

Jen

[00:58:05] Yeah, people have talked extensively how when the iPad showed up, toddlers everywhere would just — "give me that thing".

Rachel

And old people.

Jen

And they could understand how to use it very easily, either having had a lifetime of not being ok with computers, first of all not having computers around, but then later, being like, "Ah, I'm not one of those computer people. Get that away from me." Lots of people suddenly were willing, in their 70s, 80s, older, to say, "You know what, I actually do want to try that out." Or, little kids, babies who don't even really have language skill, aren't even to the point of being able to talk yet, knowing exactly how to use an iPad or an iPhone, or an Android device, just by somebody just showing them a couple things and having them be able to click and understand that. And perhaps it could be argued that it's the animation more than anything that allowed this kind of instant fluency, because hand a toddler a thing, and they're like "Oh, that's a square, and if I click on it, vwooomp now that thing opened. Now I'm playing that game that I wanted to play. And then, "Oh, I click this button and it goes back over here. And I click a different square and I go on to this other place."

Rachel

I would say the animation is half the story. The other half is the interface. One of the hardest things about learning to use a computer is the keyboard and the mouse. Because, you're not touching the thing on the screen, you're indirectly maneuvering it using another from of input. Now, baby expects that when they touch something, it reacts. And touch-based interface, where you touch the thing and it reacts, that makes a lot of sense to baby. And it's a lot easier for older people to process that because as you get older, it gets a little bit older to make those connections between abstracted interfaces.

Those would be very hard to use on such a small screen with jump cuts between information. If you tap something and the entire page wipes, and then there's a new page, that can be very confusing. So on a small screen, it transitions. When you swipe something, it moves with your hand. That's where the animation really brought that extra data, that extra sensoral data to the page to help offload extra processing from the brain. The computer is doing that work for you so that you can just focus on interacting with it. It's those two things together I think that are why we saw such eager adoption amongst users. And it took a lot of empathy from the designers to get there I think. Because we're all in the prime of our lives. We're working with a computer. We don't stop to think, "Why does the screen wipe when I do this? Maybe that is confusing for some people who aren't as efficient as I am with processing information."

Jen

[01:01:00] Yeah. Transition was the sixth kind of animation you put in this article.

Rachel

Transition has actually become a big deal, I think. The longer I've worked with animations, the more I felt that transitions are the little stars. In fact, stateful transitions are one of the number one reasons you'll implement animations or transitions anywhere on site. And in the wild, they're not very obvious. Day to day, you're not going to notice transitions happening in the wild, and when I wrote this article, I said that they're unnatural, and that they're a human based convention. And somebody said that that wasn't true, that transitions happen all the time. I thought it was a really great comment there. The transition from night to day, sunset, that's a transition. Going from a well lit garden into a darkened room, that's a transition. These transitions have been co-opted by cinematography and then game development and app development as well. We have a visual short hand for these transitions, fades, in some cases, even the movement of a fake page across the screen. Because in an app that lets you swipe forward an backward. These are transitions between states, and they are some of the more powerful uses for animation today.

In fact, if you were working on a site, or a project, and you're thinking, "Well, where would be a good place for me to use a full page transition? Where would I want to do that?" What you want to look for is whenever the page reloads completely and not a lot of information on that page has change, or when all of the information on that page has changed. Like you're going to a different place on the site. That is a perfect place on the site for a transition. You remember that a lot of sites used to have a search page on them? Like, you built a Wordpress site and there's a search page where people can go to search on your site for something.

Jen

Yeah.

Rachel

One thing I've noticed happening more and more is this design pattern where instead of going to a new page, when a person goes to the search box, which is on every page, the rest of the page fades out and the search results become the center of attention right in front of the users. So as they're typing in, these search results start showing up underneath where they're typing, but none of the rest of the page is visible, not front and center. They've transitioned from a reading mode into a searching mode, and they haven't left the page. This is very intuitive for every user out there because they're not having to analyze, "Oh, I'm on this page, I can't go look at the thing that I was looking at before. I don't know how to leave, I'll just continue with this one task." It's like an overlay over what they were doing before that they can get out of easily if they change their mind, not having to use a back button or anything.

Jen

Yeah.

Rachel

That's an example where you might look at a site you have and go, "This search page… Maybe we should just make this something that we'd transition into on an as needed basis."

Jen

[01:04:13] Yeah, it's hard. It's really hard to imagine. We're just so used to, "I'm on one web page, there's a link, I click it, the web browser window goes completely blank and a new page loads."

Rachel

Sometimes with very little different on it.

Jen

Right. There are a whole bunch of things that happen when a page is loading that we learn to pretend we don't see. We pretend they don't happen. There's so much emphasis in the industry right now about performance, which really is about making that load time be as quick as possible. But what we're not talking about is, "Ok, if you stop pretending that you can't see anything as it loads, and you start to notice what is the experience that we're having as something loads," that fraction of a second where the page is completely white, watching the header loading in first, perhaps and watching the sidebar stuff load in second, and then watching the content itself load in third, then watching it disappear, then watching something else happen, then watching the content reappear, usually there's quite a complicated set of things that happen, especially the worse the site is coded, the more obtrusive the ads are.

Rachel

I love that we are concerned about performance. We've already talked about with the Flipboard problem. That's a performance problem, that is 100% performance getting in the way of user experience, in a very different manner than page load. When we talk about performance in this industry, I feel like we're just talking about load times, we're not talking about rendering, or in betweening, we're just talking about getting the information to the user as fast as we possibly can.

Jen

Right.

Rachel

That's important, it's important to get the information to people, but it's also important that we show it to them in an appropriate way. For instance, it's great if you can tell people, "Oops, it looks like one of the accounts that you're watching is being hacked right now." It's important that you get that information to them as quickly as possible. But if you put that information on the page in such a way that they didn't even notice it loading because it's in the upper left corner and it just suddenly popped on when they were looking in the lower right corner, and it has no animacy, it has no way of showing, "Hey hey, there's new information here, pay attention to this new critical information that's right here right now," what good is that performance? If it takes people five hundred milliseconds, your daughter, your old grandmother, it takes her 500 milliseconds to figure out that she's on a page of search results, what does it matter that it took you 50 milliseconds to deliver them to her?

Jen

Right, or you were describing earlier that the cognitive load of the human being that you can actually add to the length of time that the computer is doing something and shorten the cognitive load of the human being, and that ends up being a better result.

Rachel

Yeah, and it's hard because human cognitive load is hard to measure. We can put some tags on information and see how long it takes us to get it. We can dig poo sticks all we want with information, but people are harder. It is harder to measure how long it takes a person, and it varies, there's a 70 millisecond to 700 millisecond range of how long it takes humans to register change on a page, and that's a really wide area to cover. You end up talking about generalities, you make gross generalizations, there's a reason why 250-300 milliseconds keeps being used over and over for transitions, because it's as fast as you can go without being too fast, without being so slow that you completely turn off a large number of users. But when you start thinking about your user base, like if you're building a site for older people, you probably want to extend that out to like 400 milliseconds because they're going to be closer to that 700 millisecond end of the range. It's a whole n'other ball game, and we've got a lot of work to do right now.

Jen

[01:08:22] I worked in theater for a long time and a huge part of what you use to shape and sculpt a show is manipulating transitions.

Rachel

Yeah.

Jen

I did lighting design for a long time. In lighting design there are two pieces. One is: what kind of light is coming from which direction? Is it specular or is it diffuse? What color it is? How bright is it in comparison to the light coming from other directions? Then then other half is the part where all the magic happens: in the changes — the cues that you write. "Ok, well, the light's going to be set in this particular setup for this scene. Then at the end of the scene, let's do this kind of fade, at this speed. Or, in the middle of the scene, we're going to slowly do this change. It's so slow that the audience doesn't even recognize it."

Rachel

Wow!

Jen

But it happens anyway.

Rachel

I would love you to write an article about this!

Jen

[Laughs] The thing we don't ever talk about with the web is that transition from one webpage to another webpage — because we have not [had the ability to control the transition] up until this point, and perhaps still do not, and still maybe are a ways off from it… How can you really control any of that stuff? How can you control the page as it's loading? How can you get it to load the important things first and the crappy things second? How can you get the crappy things to not interfere? Because I would rather talk about that. Sure make it faster, great, but just making it faster isn't… we could say, "well, it's still going to take five seconds to load this page, but we're at least going to load the important things first, and we're going to nail them to the page, and we're going to make sure they don't repaint, and if other things take a while to load, then that's fine.

Rachel

Priority painting. I like it!

Jen

Or be able to manipulate that experience as part of the experience, and not just have it be: "let's just get it over with as fast as possible — we don't care about it." If it were one millisecond, that would be awesome because it would just be bam bam bam. Or, well, you might want a transition, you might want to have an experience in the transition itself.

Rachel

Yeah, it might be perceived faster and actually be computed faster for the user if you do it right. There's a spec actually out that people are talking about. It's page transitions. I saw it at Chrome Dev Summit last year, and when I first saw it, I was really excited because it was a spec for how to transition pages in and out, sort of like native, but then then longer I thought about it, the more I realized that that's wasn't going to be enough for designers, because they're going to want that fine-grained control that you just talked about, what loads, how it loads, what remains on the page. It's not merely about how we fade a page in, it's about how we orchestrate the changing of the information. So I ended up having reservations about the spec. And it's an ongoing conversation because I think this is one of those things that a developer thinks this is the answer to that problem, but a designer will not agree, and that we might spend time on a spec that in the end designers will continue to use more "hacky" ways around it, like using pjax, to get that fine grained experience control that the web wants.

Jen

Well, you could today load a page, but have everything be opacity:0 and then fade the page in.

Rachel

You totally could do that.

Jen

I think it would be really annoying.

Rachel

I think so. But less annoying than moving things.

Jen

It would be like, why is this page not showing up? Why is this page invisible and slowly becoming visible?

Rachel

Unless that was part of the story that you were telling, like if you were doing interactive journalist piece that fog that killed a nation, you might want to fade everything in just to heighten the spooky factor.

Jen

[01:12:24] And we're back at the hokey territory.

So let me ask you: there's a whole entire world of people who have nothing to do with web or app or animation — or anything in the tech industry — who do animation. They do things like cartoons or special effects in regular films. They're animators. Animators. They have their own language, their own toolset. They've got their own software. They've got their own level of mastery and expert levels of, "how do you manipulate this ball in this Pixar movie so that it moves the way you want it to?" It feels like on the web, the tools, the words, the vocabulary, the understanding is so rudimentary in comparison.

Do you play in both worlds? Do you go back and forth?

Rachel

I do. I have a lot of friends in animation and they're definitely animating different things. I know right now, the web world adopts animation, we talk a lot about Disney's Illusion of Life book, but it's only one book out of a great, great pantheon of creators, there's also a book by the Warner Brother's studio Chuck-a-Muck, which details their theories about animation, but the thing is, there's good information in these books, but it's not a one to one correlation to what we do with the web. If you strictly adhered and tortured the metaphor of the principles taught in the Principle of Life, you'd end up with a very gummy, bouncy feeling user interface. We're not animating living creatures, we're animating websites, which don't exist in the real world, and we have to think in different ways about how we animate those things than how we would, say animate a princess twirling. I'm not saying that there aren't things that we can learn from our studio animator cohorts, but I do find that there are some times where their answer to my questions is just, "I don't know, I don't know how I would do that."

Jen

Yeah.

Rachel

I like to think that web development is entering this field of animation as like the younger sister of these more advanced brothers and sisters. We've got apps, we've got operating systems, we've got game developers who've built HUDs that are animated, and they all have different ways of sharing information with each other. And they've all grown up doing things in their own way. And we're going to learn from them. We're going to look up to our bigger and older sisters and brothers and learn from them and ask them questions. And they'll teach us. But in the end, we're going to have to find our own way of animating things.

Jen

It reminds me of discussions I've been having about page layout and going back to print design, graphic design, magazine design, books, posters to draw from so much of the best of graphic design that has happened and the history of it. But — to not transfer any of those ideas directly over to the web. Instead to figure out how to translate them. To continue to say, "the web is not print", and we're not going to lay this web page out the way that we laid that magazine out. But, we could do better on the web, and, "hey, we've got to get out of this rut we're in, so let's come up with some new ideas. Oh yeah, we could cleanse our pallet and come up with new ideas by looking over the wall to the other side and see what they've been doing"

Rachel

We're lucky that so many people have come before us and we can draw on all their information. Does that mean that we should be outright imitating them? No, but little sisters have been known to wear their bigger sister's shoes and hat out to certain parties. So, I expect to see some of that, but I also expect us to grow into our selves.

Jen

[01:16:27] We don't have much time left, but there were a bunch of people who put questions on thewebahead.net website for you.

Rachel

Wooo! Goody.

Jen

I thought, "Oh yeah, we should end by hitting up some of these questions." Two people were asking about tools. Saying, "Hey, you know, we're using Photoshop, and we're using animation tools," the designer using maybe using more classical animation tools, Invision, the Creative Suite from Adobe. But then the developer is using HTML, CSS, and JavaScript. Are there good tools to make those worlds meet in the middle, or to be able to do better prototypes or come up with better ideas for software animation design?

Rachel

Blurg. Right now we're at a point where we don't have really good tools to go between. There are certain things that try, like Animatron (like Anim-A-Tron) is a user interface, a lovely visual user interface that outputs to canvas and SVG, I think. But it's not the sort of thing that you could demo a sidebar in and then take the code and give it to your developer and they could recreate the sidebar perfectly. We don't have any tools like that right now. At best we have prototype code and then you hand off those prototypes to your developer and the developer recreates that in whatever system you're using, be it JavaScript or CSS based. And that's not very efficient and it is one of the sad things of working with web animations today. The developer toolbars are getting better and better in the browsers. I often demo tiny animations by tweaking CSS and using it directly from the developer console. But it's not really an ideal way of doing that, so I wish I had more exciting news for this lovely question asker about greater tools coming out. But I don't. I'm sorry.

Jen

Yeah, you know I've seen people use Keynote.

Rachel

Yep.

Jen

Because Keynote slides have a lot of… you can set the ease ins, ease outs, transitions, you can move things around and especially because you can make a Keynote deck that is, say, the size of a phone screen, and you can open it up on a phone and pretend that it's a website or a native app and test it out holding a phone. "What does that feel like? Is that…? Do we need to…?" Then you can make changes pretty quickly and try them without writing any code at all.

Rachel

Yeah, that's great for prototyping, but like I said, you're not going to be able to hand a sheet of pluggable CSS values after doing something like that.

Jen

Yeah.

Rachel

Even the timing functions in Keynote, you're going to have to approximate them.

Jen

Yeah, those numbers are probably not at all related to the numbers for the web.

Rachel

Yeah, and good luck trying to drag them out of Keynote.

Jen

Yeah.

Rachel

So, unfortunate, but that's where we are.

Jen

[01:19:33] Candace asks, "Are there any groups out there for web animation. Are there any conferences or expos that could be helpful for learning and exploration?"

Rachel

Ahhh, I wish there were. I really do. Web animation right now hasn't got its own conference. I was hoping to start one, but it didn't work out. And I'm hoping that because I was thinking about it, somebody else was thinking about it, and maybe in the next couple years we'll see one. In the meantime, I highly recommend, if you have the chance, go to Open Viz, or Eye O, that's "eye" like the eye you have in your head, "O" like the letter "O" Eye O Festival. Checking out those two, there are a bunch of interactive conferences that happen, data visualization conferences as well. These conferences have people who are doing some pretty incredible stuff using web technologies, and not web technologies, which can be inspiring. So if there's no web animation conference, there are conferences that do feature web animation, and they are worth going to.

Jen

Yeah, I'm on the Open Vis Conf website and as I'm scrolling the page, they have a little, it's not really a carousel, but it's a bunch of photos that are side by side and they're scrolling sideways as I scroll down.

Rachel

Yeah?

Jen

Small little animation.

Oh! I heard that there's a really great email newsletter!

Rachel

Oh, that's true! The nice thing about email newsletters is that they're free and you don't have to travel to attend them. And they arrive in your inbox once a week! So you get new information as it comes out, as opposed to one big glut of information once a year. I curate Web Animation Weekly, which you can get at webanimationweekly.com. Every Sunday I send out, late at night, a list of all the news that's fit to share in the web animation world. Everything from new libraries that come out to which parts of the spec are being supported, to really nice case studies from people who are working in this field and in others.

Jen

[01:21:46] Nice.

Johnathan asks, "What are your thoughts on GreenSocket versus using some of the common methods such as jQuery?"

Rachel

GreenSock.

Jen

GreenSock, sorry.

Rachel

It's ok! GreenSock, or gSock as it's known in some circles is a tweening library originally made for Flash. The people who wrote it re-wrote it in JavaScript as soon as they saw the writing on the wall. It is one of the most widely compatible JavaScript animation libraries, very performance, very compatible, I know a lot of people in interaction development who use it. I've met people who build dashboards who use it for animating graphs with new information. It's very good at doing not declarative animations. By non-declarative, I mean animations that react to input or new information, not just changing page to page. It's very powerful, but it's often more powerful than is necessary for say, building a banking website, you probably would not need GreenSock for that. But, if you were building an interactive children's game for Sesame Street, for instance, you might want to use GreenSock for that. Now, how does it stack up to other animation libraries, for instance jQuery's animate function? Well, jQuery's animate function is a little bit different, mostly what it's useful for is it provides callbacks. You can do something after this animation has finished. The problem with it is that it's horribly unperformant, and it's unlikely to become performant because of the way it's been written and the jQuery way of updating itself and backwards compatibility blah blah blah. It's unlikely to become performant any time soon. Fortunately, there is a plug and play solution for this called velocity.js. Basically, you just add this little attachment to your JavaScript lineup, and it replaces jQuery's animate function with a much more performant one. It's still not as performant as GreenSock, but it will probably help you do all of the things you're trying to do with animation using jQuery.

Jen

[01:23:56] Cool, well thank you to everybody who wrote in questions. It's a thing you can do. You can go to thewebahead.net/upcoming and you can see a list of all the upcoming guests who've been booked the moment I've actually finished booking somebody and it's a for sure thing that they're going to be on the show.

Rachel

Woohoo!

Jen

I post there. So if you're ever wondering, "who's coming up soon?" you can go to thewebahead.net/upcoming. And if you're wondering, "Is Jen ever doing this show again?" you can also go there and see who've I've booked, or perhaps who I've not booked. And just because there's nobody there, it doesn't mean I'm not working on it. But then you can click on the thing and comments are open, you can leave a question about the topic that's coming up. It's kind of cool. We haven't been doing much of that, but I like this asking questions.

Rachel

Me too!

Jen

Sort of the more nerdy details and very specific things at the very end. And we'll put links to all of these things in the show notes for this show, which you can get at thewebahead.net/103. As always there will be a gob of information, including a transcript for this episode. Transcripts are a great way to quote anything from this show, or refer back to it more easily. You know, you want to quickly look up something that you heard. We also did a whole show, I did a show with Val Head on CSS animations where we talked specifically about what CSS can do with animation: Transitions, Transforms, and Animations. We discussed the difference between using Transitions versus Transforms versus Animations and some of the, not really all the syntax, but sort of syntax, like which is which, what's the difference between them in episode 53. Almost exactly two years ago. Two years ago tomorrow. We're recording this on Sunday, so it's the 15th of June two years ago.

Rachel

Wow!

Jen

So it's kinda funny. If I read the transcript, the whole show starts with, me apologizing and explaining why I hadn't done a show in a while.

Rachel

Oh my gosh, so basically the verdict is not much has changed in two years.

Jen

Yeah because we're here! This is what I said, "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." [Laughs]

Rachel

Oh man!

Jen

"Four presentations plus an all day conference. All day workshop. So I don't know, weeks go by." So it's exactly the same cycle. It's just conference season, the beginning of spring conference season, I'm able to stay on top of the booking guests and doing episodes, and somehow by the end of spring conference season, I fall off the wagon. But spring conference season is over. Now it's summer break, and then we'll do fall conference season coming up in August.

Rachel

I'm so looking forward to this break. I've been traveling quite a bit myself and I'm looking forward to going home.

Jen

Yeah, it's funny, it really does go in a season. There's a spring season, and then there's a break in the summer, and then there's a fall season, and there's a break for the holidays. And then it starts again.

Rachel

Wow. Well, I will see in you in the fall then.

Jen

Yeah! I will see you at, wait, where are we together? I forget.

Rachel

We're going to be in San Francisco at Future of Web Design.

Jen

Yes! I do Future of Web Design in San Francisco, and then I do An Event Apart in San Francisco like, three days later, and then I fly to New York and do a Future of Web Design in New York.

Rachel

Wow, go you!

Jen

Same talk! So people can check it out. And they can follow you on Twitter, you're @rachelnabors.

Rachel

Yeah. N A B O R S.

Jen

Yes, Rachel with one A, not two. Nabors with an A. N A B O R S.

Rachel

Yes.

Jen

And of course you can go to the website, thewebahead, and track you down. There's links to you and your website, rachelnabors.com. Your company, Tin Magpie. And you're a consultant, so if somebody say, "She sounds awesome. Let's hire her." They can contact you about what you might be able to do for them.

Rachel

Absolutely. I love to help people with their animation strategy. Oh god, I never thought I'd call it that.

Jen

[Laughs] And find your newsletter, Web Animation Weekly.

Rachel

My pride and joy. I hope that I will get to hear from people like you there. Also, we do accept link submissions because it is a community efforts and sometimes people see things I don't, so I'm always asking people for link submissions.

Jen

That's cool. That's where you'll first hear about a new tool that somebody has figured out or invented. Or a new library that's now the hot stuff that's faster and better than the other libraries.

Rachel

Mhmm. We have quite a few library authors who submit their releases directly to the newsletter. It's always exciting to give people the main line into the latest and greatest changes.

Jen

Yeah. Fabulous. Well, thanks for coming on the show.

Rachel

Hey, thanks for having me, it's been a real pleasure Jen.

Jen

And thanks to Squarespace for sponsoring and all of the people who help make this show possible, including the folks who do the transcript every week. Probably it will be Jenn Schlick again, doing this transcript, so thank you so much again to her.

Rachel

Thank you Jenn!

Jen

People can follow me, @jensimmons, on twitter, follow the show, @thewebahead on twitter, or just go check it out. Oh! Go subscribe! I should say this at the beginning of the show, not the very end, but if you like the show and you want to get it automatically, you can subscribe to this podcast. It's free! It helps us, actually, because it helps folks see how many people are listening to the show. I don't know why you wouldn't subscribe. Just subscribe to the show. So thank you for listening. Thanks!