 People in the back, yes. So my name's Sarah Drasner, I'm here to talk about complex responsive animations. Like Adam just said, I'm a senior UX engineer at Trulia Zillow Group, and here's my Twitter and code pen, but you can look at those later. I figured since we're on a comedy stage, I would start off with some CSS humor. I was a little upset about actually using this in the talk because every time I started working on the talk, I'd rickroll myself, but anyway. So before I talk about what I'm like the ways in which to implement this, I'm going to kind of run through why because I think complex responsive animations have not really had their place in the sun yet, but animations are starting to kind of take over the web and they've become a bigger and bigger issue as people implement them in their UI, UX, and you know, some illustrations on their site, and so that means real life applications and real life also means mobile. I know that that sounds really complicated, but I'm going to show you some ways to kind of make it a lot easier and like really cool actually. So one thing I'm going to talk about a lot is animation in terms of informative UX, like stuff that's not just purely for show and just to do it, but also things that like kind of inform the viewer and you're like purposefully thinking about and it's not as hard as it used to be, so just kind of like getting away from the idea that because you're going to implement animations, you can't do things for responsive like that doesn't have to be the case, and you know, it's really important to give your users the correct information for the context that they're using, and a lot of the times that's mobile as well, so you know, not separating out those concerns. And it's really fun, remember fun, that was nice, because I'm going to be talking about two different kinds of animation, I'm just going to separate the concerns just a little bit so that you know what I'm referring to, what I'm referring to them. UI UX animation is basically, I'm going to reload the page here so you can see it, UI UX animation when I talk about that is like pieces of the UI aid in informative UX choreography, there's a great article that someone else wrote about that. And typically this can be done for mobile with well-placed CSS and media queries and JavaScript to trigger those interactions, so a lot of this stuff that you might think is like really complicated and you need JavaScript for you don't really. However, oh, another thing that UI UX animation really helps with is context shifting, so this is an example from CSS animation rocks, and basically, you know, in typical use cases that list item would just pop into view, this like slight transition in bringing it on the stage kind of helps the user like connects those two states and be like, oh, this appeared slowly, and like, you know, that's where that went. I'm not sure if this will load, we'll see, oh, it is. So like the nav on this site is a good example of context shifting, so if you see that logo is like really big and robust and you have our story and context and rather than it just snapping back into the other view, it transitions very nicely so you, the user has that kind of feedback of like, oh, okay, that's where that went. So, there's also standalone animation, I do a lot of these. You can use these on your site for kind of like more illustrative effects and kind of to illustrate your stories or your, you know, we've been talking a lot about how images are super heavy and very performance heavy, there's a lot you can do with SVG that's like really, really trim and I'll talk about the performance effects of that as well that is very easily accomplishable and actually like pretty cool animation as information. Animation really needs to be designed, I think that is not really something that's happened yet and so I wrote a smashing magazine article on it, that's the link to that if you want to grab the slides later. It really, because it helps with context shifting, it can't just be slapped on on the top of it things and I think a lot of people do that and you know, even in like, if you're building out complex systems, it's very tempting to write a bunch of animations and just have those lingering around that you can put on things but and I'm not, I'm definitely not saying not to reuse those resources but just a purposeful idea of like, oh, this is our company, this is like the type of easing we do for these type of modals and so it kind of also gives the viewer this like consistent look and feel rather than them popping up a modal on one page and it bounces and the other one goes in from the left. It's like kind of disorienting. When I'm talking about animation, I'm not saying to animate everything at all. I think animation is really strong and very powerful. We talk about calls to action being bright orange to get the user's attention but nothing really gets people's attention as much as something in motion. Because of that, it should be considered, you know, a helpful thing and also like potentially harmful, like you should really be thinking about the ways that you're using that in a very purposeful and hopefully creative way and not just making everything on the page move because I think that that's where some of animation's bad rap comes from. The other thing was something that I touched on before. It complies with branding so you can have like an entire set of the, this is the way our easing functions work on this site because we are a friendly site, it's very elastic and bounce or like, you know, if you're like, you know, an investment firm you'd have like more linear eases and things like that. So really thinking about how that works with your company's branding and not just being like, oh, I like this and then adding it. And I think that that's really the strength that Google Material Design had. Like that's like the thing that I think is really important and cool about Google Material Design is that those branding guidelines really went for a deep dive into like how those animations and transitions move. And now when you see those animations and transitions you're like, oh, it's Google Material Design. That's good branding like looking at an animation and being like, oh, that must be that company. That's really, really awesome. And then, you know, if you do work for a really big company like I work for Trulia, we have apps and we have web and they're not implemented the same way at all. But if you have a kind of like consistent idea for how things should look and feel with animation then you can kind of go to the mobile team and say like, we're doing this on the web and then keep those two things kind of coupled and paired. So I'm actually going to do this form separately. So when you're working with a contact form on a website, that is actually like the place where you are going to get the most lead generation. You're going to like, that's where your company is actually going to gather like the people that it needs to make money. If you're not thinking about the performance of your contact form, you're doing your customers a great disservice. So I was just considering the contact form and I'm pretty impatient on the web. And so like sometimes I'll fill out a contact form and that submit button like doesn't do anything and I hit it a bunch of times. Have you guys ever done that? And like you, it already went through, but I'm just like, hello. So one of the ways that you can kind of have animation help out with those things is to give the users feedback for those things. So one thing is that when they're hovering obviously on the submit button that they're hovering and then with that push will actually show them some sort of loading animation so that they know that something's coming and that helps with the anticipation part of animation which is one of the 12 principles of animation. And I personally think that it's better if you have like the initial loader sequence be a little bit like one like initial kickoff and then something that repeats after that so that if it takes a while to load it's like still okay. But you know how the sky's the limit on that one. And then of course at the end to get like a success like a rush of green or like a rush of some sort of color that tells you that it did go through. So if I like fill out this form. So it's like pretty simple but you know it's still it like gives the user that feedback and also that took a minute like that between those two interactions but you probably didn't really notice it as much because you're entertained by that loading animation. So like one thing that animation can help with is like if things do just sometimes forms take a second to submit it helps keep them engaged while that's happening and let them know like okay cool. So a little bit of tough love here like if animation feels like I get kind of tired of people saying like oh animation is like this like fluff if you treat it like fluff then it will be fluff. If you just slap animation on top at the last minute without thinking about real engagement and that user interaction then it's not going to be that great. So yeah of course I use Clippy because that's the kind of like you know the easy one. Another thing I want to cover is that motion on the web is not a one size fits all thing. So like I'm going to be showing you a couple of different techniques that I think are super cool but that definitely doesn't mean like I think you have to use these. Everybody is different and their implementation is different and you know that is just the way of the web. Some people don't do they do these like crazy canvas sites where everything's interactive and that doesn't necessarily mean that they should be making mobile sites. I'm not telling everybody to make the same thing. I think that for most companies though it's more responsive than you might have imagined. Like just saying that like oh it's animation like we're not going to do it for responsive is kind of like throwing the baby out with the bathwater. So motion design language is for projects. Don't worry I'm doing a lot of theory right now but I'll get to the demos later. Motion design language for projects I know it seems like a lot of work because you know you have to like sit before you actually make the thing and you know kind of talk about those things but consider your tooling like when you set up Grunt for the first time it probably took a little bit of time to do that and it took some consideration. So like all of that like paid off in the long run and now you don't ever have to think about that again you can just go in and like modify it. Same kind of thing. You can reuse resources like easing functions and animation keyframes Mixins extends you know the same reason that you make a design language for any CSS site and again what I was saying before like if mobile is decoupled it's easier to keep it consistent across both and like we all don't want to talk to each other all day long about everything we're making. If you have good animation branding guidelines you don't have to have a big meeting every time you implement something or you know like it's not like why is this doing this thing like it kind of saves that time in your company also. So I just wanted to talk a little bit about like the concept of things I feel like there's like this idea that the concept comes first but I don't think actually the concept comes first not just for animation but for like a lot of things so if we're talking about animation being like an intrinsic part of the build process you have your branding that's first that's immovable usually then you have your performance budget that's probably pretty immovable too then you have your concept which should be tied to those things right and then from that can be born the page structure and animation interaction which should come together. So it's actually kind of great that Chris went before me this was like not an intentional thing but Chris set up a lot of the stuff that I'm going to piggyback off of I'm not going to go into like the nitty gritty of what SVG exactly is I'm going to kind of just show you how to work with it in this context so I'm going to be using SVG for a lot of these demos and there are a few reasons for that that Chris kind of went on so it's crisp on every display which is awesome less HTTP requests to handle which Chris also talked about it's awesome easily scalable for responsive super awesome small file size when you design for performance so the key part of this is probably when you design for performance like it's really important that you actually consider those things it's not like every SVG is going to perform well you have to be thinking about that performance when you're designing it's easy to animate it's easy to make accessible which is really nice and it's fun there's a pattern here Canvas can be made accessible as well it takes a little bit more work like you have to make like React.js and Canvas work really well for another type of DOM but SVG is kind of pretty simple and I'll show you some examples for that so so this animation was actually pretty small and it was pretty easy to make in that way like designing it was just drawing those shapes and in Illustrator and bringing it over and like changing some of the colors and opacities and moving things around with transforms I think Ryan talked a bit about how you should be using transforms and opacity almost all of the demos I'm showing today only use those things you can do tons of things with those things so don't feel too limited with just like opacity and transforms transforms are awesome so that's like you know I'm going to be showing you some performance statistics for these things as well before we do anything though we have to optimize so SVG oh my god is Jake Archibald's kind of web GUI editor so you can just drag and drop it in there and there's like all these toggles because I would say that every time you do a compression of an SVG or an optimization of an SVG you're going to want slightly different controls there's SVGs where like optimizing the path is not a big deal or like you know like you have like a really really detailed path and that's a little bit more complicated so those kind of controls are really important Peter Collin Ridges SVG editor is a little bit older but I still really like it that also lets you toggle those controls SVG oh an SVG oh GUI those are like terminal based if you feel more comfortable in your terminal than in a web GUI so and then of course before we get started animation performance is really vital for some reason people do expect the mobile to be faster than the web and that's kind of counterintuitive if you know how the web works but they don't and so they consider these sites to be like smaller sites on their phone so keeping that into consideration that a lot of your users do expect really fast stuff on mobile a place with really good resources for all that stuff is jankfree.org they have tons and tons of resources done by the Chrome DevTools team on the Chrome DevTools team is Paul Irish he does advanced performance audits with DevTools he does some really nice things with like Chrome DevTools for like larger sites and he kind of digs into the timeline it's really cool I wrote a CSS tricks article called weighing SVG animation techniques with benchmarks I wrote this article in February of this year I think it's still pretty good in terms of like you can kind of get a general idea of where things are at I tested SMIL which had more pertinence then than it does now CSS Velocity JS and Green Sock API and the results were actually pretty interesting I'll get a little bit more into that as we get further along CSS did really really well especially when you know everything was like moved with transforms and things like that but the thing to keep in mind about this article is that it exists in a certain place and time at a certain juncture and it was done with certain versions of those libraries so animation on the web is always going to be a bit of a moving target there's new stuff coming out all the time when Chrome updates DevTools changes it the way it reports so you know don't take that as like you know like the Bible and I only did one type of animation and just benchmark those you should be running tests for yourself so like write an animation in CSS and then write it in JavaScript and see how it performs for your use case basically that was like the idea behind the article was to kick off that kind of stuff so some of you or maybe most of you might be familiar with this SVG technique with using responsive SVG sprites which is really cool you know it shows like a progressively bigger or smaller house depending on the viewport I kind of piggybacked off of that idea and created SVG animation sprites so originally I just created this like kind of map that I used in Illustrator for what I wanted to have happened so you know you see in like the expanded view at the top that there are like all of these stars and buildings and things in the next view the background changes and some of the windows drop out of the buildings and things like that and then at the bottom view it's a very like kind of small version of what's going on then I took that and I made it appropriate for the SVG viewport so rather than having it cascade like this because we're going to always use the same viewport for our view box for this image where it's I found all of the redundant kind of things between one SVG and the other one for the first two and then made a separate one for the bottom sprite I'll explain more as you see the animation so the side of the page here so as I scroll this animation down the animation completely changes but I'm reusing all of those resources and that sprite now the coolest part about that is that whole SVG and animation and actually the text CSS was eight kilobytes gzipped now if you're using images to illustrate content on the web like if you compare that to using a text with a photo it's like pretty good and it's actually kind of interactive and interesting and also that's like that fun part that we were talking about before so the CSS animation is actually not any different than you might expect it to be it's like I wrote a mix in for accelerate and then I just you know that's like hardware acceleration on any object that's moving and so that's a repeated feature I put that in there I also have an animation on like I just kind of grab all of the classes that are stars and have a common animation for all of those I also just designate one keyframe for all of those animations and have them at slightly different delays and timing so I can kind of reuse those and then also you don't have to set the you know I see a lot of people setting the zero and a hundred percent values for the keyframes you don't really have to do that if it's set on the initial element so you can kind of save some code there so there's no width and height for the SVG itself instead define it define it in CSS so right here we're using percentage we could also use flexbox we can someday use CSS grids which will be awesome it's really important and in fact it's vital to make sure that your viewbox is in there but I actually defined it to be smaller in this case because remember we have both of those views and now we're collapsing down to just one view so in order to do that we need to change the viewbox itself so we also need the preserve aspect ratio x y meet but that's the default so it's not strictly necessary to put it in so this is like really the coolest part is you can actually affect animation in your media query some of you know that some of you might not so you can change the animation like the skew for the mountains totally went off when I collapsed it on the mobile view so I had to kind of change that and that's very easy to do with CSS media queries I can also grab multiple objects and reuse the same animation so a lot of this stuff is much more simple and you already know a lot of these techniques that you'd probably maybe not have realized that you could have affected SVG as well yeah so this also applies to JavaScript I use a JavaScript for my animations as well and I can use media queries for my JavaScript even in like you know for CSS like I can like hide and display and do those kind of things while still animating parts or I can do media queries in the JavaScript so it's all those that same logic that you already know this part I did have to do with JavaScript it's the view box shift so remember when you saw those two images basically view boxes like a little window that you're looking into your SVG at so like the whole thing is like the canvas of the image and then you kind of tighten it so you have this like the view boxes like what is going to be shown on the screen so I have a media query in there and an event handler for you know different screen sizes and then that shifts to the lower view and so that you're only exposing that part of the SVG fallbacks there are really good options for fallbacks as well I use Modernizer I think it's a really great thing I think some people used at support too I fall back to a PNG equivalent a lot like if it's a standalone animation like the one I just showed there's no reason not to fall back to an image like it's just kind of there to illustrate the thing you might not necessarily need that if you're just animating those like remember the site with the nav like those those media queries probably aren't SVG so you might not need a fallback because those are fonts Sarah Soydan wrote a really great article about the picture element in polyfill for SVG I think that you should look at your analytics because that is a lot of work and you should kind of consider whether or not you have that type of audience on all of those older browsers to warrant like all of the picture element stuff maybe that time is well spent it really depends on what your analytics are telling you so this is like kind of a poor man version of an SVG in the illustration of text so it kind of does that and it stays a consistent size so I can just like collapse it on mobile and it just does the normal thing that you would think but I said complex animation so we're going to go step further but in order to do it I'm going to break the rules and use G-SAP which is green sock animation API one of the reasons I'm using green sock oh I think it's really important to say like I don't work for them they don't pay me I'm not like a sponsored person I just really like this tool there's lots of reasons for it this might be the number one reason I don't think I've ever made a really complex animation where I didn't rotate something and this is a total nightmare the word on the street meaning like I bugged people on twitter is that it will be fixed in like three versions of firefox but that's like a little why like ways to wait so consider that if you're going to make something like super crazy and you need to rotate something you might need to switch to something like G-SAP and another really big reason for switching to G-SAP is the timeline you can stack tweens you can set them a little bit before and after one another which is really really nice you can change their placement in time you can group them into scenes you can add relative labels so you can say like start and then have like a bunch of things start at the same time or like that gets really interesting when you have a really long animation it's like you know 20 seconds at 15 seconds you need everything to fire but like let's say you change that like then you know in CSS that's like all this recalculation and you don't have to do that you can animate the scenes you can make the whole thing faster with one line of code move the placement of the whole scene and nest I actually have an animation for you so yeah like I'm just like it you know as a visualization of like what you'd have to do for CSS like imagine that you have this like one second to three second animation you define these key frames and then some of that adjust you might have to change some of those percentage bases and you wouldn't have to do that in javascript so so this pen is just kind of to illustrate the power of the GSAP timeline so you have this like that middle part fires a few times the things go around so this is the current position so that middle part actually gets fired a few times and then that first part shows on the timeline where it goes second part I don't need to tell you you can do this thing so now it's really cool I can just say like oh you guys switch places and I can also say like actually I need everything to be faster so if you write CSS animate like you should definitely still be using CSS animations for those UI UX animations that we were talking about before like those that's a really good use and you don't have to load external resources and things like that but if you're going to try to make like a crazy fancy SVG animation which you totally should they're really fun to make switching over to a library like this is pretty powerful and it's really nice other cool things for complex animation so they support motion along a path that's actually the widest support for motion along a path because they have support in IE SMIL still doesn't even offer IE never will that is eventually going to move into the CSS spec but it that's still a little ways away so for now GSAP kind of gives you the biggest birth for motion along a path which is a pretty common use case for a complex animation that you want to tell it to like go around and do things like that they have draggable so you can drag and push and pull CSS properties draw SVG that's like the thing where it makes the SVG so like usually you take the stroke dash offset of like an SVG around the perimeter of it I think you know Leah did a great job explaining some of that and and you just have it animate along those lines but you have to calculate that out you know you have to find out the length of that path this just does this nice thing where you can say zero to true or you can have it like look like a line is going around the thing because you can say like you know zero and 10 percent or 90 and you know to 90 and 100 so that's cool this is really neat for a responsive dev percentage base transforms on SVG that is a hard thing to do and CSS especially with the support that it has right now so that's really cool so I made this for the talk so I'm just going to let it run once and then I'll show you what I was so can like replay this and resize it to any size I think I put between 20 percent and 60 percent or something and it just stays consistent so that's kind of nice it doesn't actually necessarily have to be fully fluid either like most responsive design is not like your site just going it's like things move around and like you know you have to like actually you know think about it and be creative about it so let's let's do some of that so I've been talking a bit about like ways to rethink things with animation or like ways that animations can be a key component to like what you're making and I was thinking about revisiting old approaches like infographics infographics had like a huge impact on conversion I mean that's an infographic about infographics it's very meta so you have like you know a traditional post gets 243 actions like infographic post gets over a thousand like that's a huge amount of conversion and I wrote an article about this if you're interested in checking it out there are three sources I found with like really good information on like crazy performance numbers like this one this is just a sampling it increased traffic to their website by 400% lead increased by 4500% number of new visitors to their site by 78% but all of these posts are two years old and I haven't really seen a lot I don't know about you guys I haven't seen a lot of infographics lately so I was kind of like thinking like okay what would make something that like has that kind of impact on leads just fall off of the face of the earth I think one of them is that it's not responsive if you know if you get an infographic on your desktop and you're like ooh cool there's all this stuff if you get it on mobile you're like it's like this horrible pinch and grab phenomenon and you're it's like too much information and you're like screw this so I don't think that they perform that well and there was a tipping point in like the amount of mobile and you know I'm sure you guys all know about that stuff up there's an article from Tim Cadlec on it if you want to know more so I think it's also not updating to the current context and one of those is design like design didn't really head in the infographics salon style all over the place like too much stuff kind of way it kind of got flatter and more minimal so trying to kind of reimagine all of that stuff so I made this pen that hopefully you can my brightness down so I kind of sped it up so that you could see the animation I'm demoing obviously the animation more than the content here but you can also go back and forth in the timeline to like see what's going on here and the so there's like the effectiveness the millions billions and trillions and then there's like the on the spinning thing there's like likely to unlikely and you can see like the most likely approach to the most unlikely approach so there's all of these kind of like transitions and things like that and then when I scale it for responsive it does that so like I move the controls over and I change that so like the SVG itself becomes fluid but some other parts do not they just move in placement just like regular responsive design so I talked a little bit before about that view box change here's like another example of the view box change I had it like really super big before and I had that like little thing around the dialogue the text is just text it's not part of the SVG and then I have like the replay button is just a replay button it's not part of the SVG and I'm the millions billions things like that so I basically just cut down the like size of the view box so that you're only seeing that part and then scale that instead because it's adjusting to that not like the whole thing and then you know I have media queries for layouts fallbacks with modernizer like all of these things are should be things that you're kind of familiar with and pretty easy to do and also it's a little more accessible like an image that's just shared like that is not accessible at all went away so like if you this is a work in progress I know that there are other like really cool ways of working with accessibility I'm kind of a newbie at accessibility so I'm starting to learn this stuff I got the idea for these things from our resource with support charts and also this article by Dudley Story it's really great so basically I have like a title for the icons and like an RA labeled by title so that I they know that they can go find that title and then also I made sure that the text was like decoupled from the image so that I can give a description of the image but then the text is still loading separately they can still find it social coding sites help you learn I don't work for them they don't pay me I really think I've learned like a lot of things from other developers and I just think that it's so I'm going to give like a little bit of a shout out to code pen here because I think that like you really can learn a lot of these techniques by following people and like looking at their code and reverse engineering it and this of course is well mostly responsible and it's fun remember fun there's also a million other people that you should check out because they're all super smart so yeah if you want to check out my slides later and like you know maybe follow these people on twitter or code pen they have tons of really interesting and cool demos or things to say thank you these slides are