 Yeah, good job. It was good. It was all great. Hi everybody. Um, is everybody enjoying word camp? Yes, all right That sounds like a Sunday morning. I went to the after party last night enjoying word camp. Yeah How many people is it your first word camp ever? Oh my gosh I love how it's always like a billion people like we keep having them all over the place and every time There's always so many new people. That's so exciting This is not my first word camp, but it is my first word camp Atlanta So I'm so thrilled to be here. It's been really really fun. Thanks for the welcome A little more about me. Hi, so I'm Michelle like you saw And I design and build digital interfaces So my background was in design visual communications is what I studied in school Currently I do front-end development and I also do a lot of strategy focused UX design But my first freelance job ever Right when I was still in college was actually doing a banner and header animations and flash for a career builder like for some other So yeah back in right that was a thing So I've been doing animation since well, it was you know flash was never it was cool But it was never cool, and I was doing that for a while But obviously nowadays we don't have flash anymore, right? But we still have Plenty of animation right we have even more great technologies that enable us to interact with all sorts of stuff on websites We've got javascript obviously and modern CSS even allows us to do a whole bunch of animation So we can do a lot of things that let us interact dynamically with our websites So in the modern age and the enlightened age the the post flash age, right? What does that look like? um So unfortunately, although we have left flash and my space behind Animation still causes problems on the web You've probably noticed if you go to a website some of the stuff you see is very it's very resource intensive, right? Like there's just the struggle is real when it comes to loading and there's usually bandwidth issues a lot of animation on The web right now. You'll probably agree is like very overdone. It's unnecessary. It's annoying. It's complex and If you there's too much motion going on if there's too much it leads to purposeful ignorance, right? It's like the the ad blindness effect So you just think that it's a banner ad like the ones I used to build for career builder and just ignore it, right? So there's a lot of kind of problems with animation on the web right now And one of the biggest ones is the parallax website trend. How many of you have seen a parallax website, right? How many of you have built a parallax website? You don't have to admit to it. It's okay if you don't want to yeah, so There is a group called the Nielsen group Which I'm basically just going to quote them all the time and if you take anything away from this talk It's just do whatever the Nielsen group says cool But they're basically one of the foremost authorities on user experience and they did a study on Parallax websites and what they found is that users find them very very difficult to control Obviously they take longer to load which is a problem, especially if you don't have a really great internet connection Users find them disorienting they find them dizzying they find them distracting and Honestly, they're they don't even find them that cool It's so it sounds like it's really just like not that worth it to do one of these complex parallax websites Like it's not that cool for all of the problems that it causes There's also a concept in animation called jank This is from like the regular animation industry and it's basically in an animation. You've probably seen this where there is Stuttering there one of those is mine. Yeah, that's that's yeah. There we go. Got it There's they're stuttering there's halting it's breaking the flow So it's basically when you notice that the something's wrong with the animation, right? So this is called jank I just really like this word and This happens a lot on the web when the animation can't keep up with you know bandwidth or it loads improperly, right? So there's a lot of problems that are with animation nowadays But I am not saying that animation is the enemy It can still be an extremely useful tool and the point of my presentation is to answer this question How can we avoid these problems and use animation effectively, right? So let's let's avoid jank. Let's avoid over complex sites How many of you have heard of the 12 principles of animation? We're like kind of close to Florida. So I figured maybe some of you are Disney fans, right? But these were 12 principles that were developed by the original Disney animators at Disney Animation Studios And they're also published as a really great book that looks super impressive on your coffee table I've got one obviously because you know I want people to think I'm smart But what's really cool about these is they were created in the very early days of animation when they were trying to define What is animation as a storytelling medium? To provide a platform to make animations feel more physically and more psychologically believable So basically we're gonna be talking about how to convey physics and psychology in 2d. That is the point of the 12 principles of animation So number one is a squash and stretch. So how many of you have heard of squash and stretch? This is usually one that people have seen before Squash and stretch if you've ever seen a bouncing ball in slow motion This is a real thing that happens, you know the ball it goes down and when it hits the ground It kind of compresses and then it springs back up That's exactly what's happening here in this animation and what squash and stretch does is it's used to convey the physics of mass Right because materials have mass and the materials have flexibility. They're impacted by gravity They might behave differently depending on what a material is So using squash and stretch effectively gives you some sense of the physics of mass of that material that you are animating There's also a principle called anticipation where it needs energy to start and stop and this is also physics This is a concept called inertia right which means that you know an object in motion tends to stay in motion an object at Rest tends to stay at rest unless acted upon by an outside force So we're seeing like that energy that's needed to like start a thing moving It also can be used to add sentience to a thing like a wind up before a pitch Or like getting ready to run before you take off from a starting line So anticipation is this thing this sense of energy before something starts moving. It just makes it feel more physically believable There's a concept called staging now. This isn't a physics or concept It's basically just any kind of art direction concept But it's guiding the viewer to the most important part of the stage and it can be any number of things You could be using movement you could be using a little burst like this thing is but you can also use The layout you can also use focus you can use relationships between different things basically staging is anything That helps guide the viewer to wherever you want them to look There's a couple of concepts in animation Straight ahead action versus pose to pose now if any of you ever worked in flash And if you ever do any work in flash so you may have experience with keyframing, right? And so straight ahead action is where you literally draw each of the keyframes, right? And there's some stuff you can do in CSS. That's very similar to this and pose to pose is basically what you could do in Flash by tweening and we'll talk a little bit about that later In regular animation it was basically like laying out all of the keyframes and and then it was like you have to draw each one Or it was drawing the main poses and then just letting the junior animator figure out what goes in between all of those poses, right? So those are some different animation concepts Here's another physics concept. It's called follow-through and overlapping action And this also has to do with the physics of mass the physics of a thing so Different differences in mass for example If I if I'm moving like different parts of my body are probably gonna stop at different times because they weigh different things They're doing different things my hair is probably gonna do something different than the rest of my body if I stop I mean, I don't have long hair, but if I did it would just go in my face when I stop running for example I don't know why I'd be running that sounds terrible But also it has to do with like, you know, this thing is a tall thing, right? And so when it gets started the top of it's gonna tend to keep going right and then it's gonna slow down differently So again, it's behaving believably This is how an object probably would actually behave if it was a random sentient rectangle going back and forth on a screen This is another concept that has to do with acceleration there's a lot of physics happening here And this is called the slow in and slow out We've also talked about easing. I'm gonna talk about easing a little bit later, but that's basically this concept things don't just Immediately be at speed and then immediately stop right they usually have to accelerate again that inertia concept They usually have to decelerate to stop it might be quick. It might be slow But there's not it's not instantaneous. And so this is this concept of easing There's also the concept of an arc. So again, we're going back to physics I luckily I liked physics a lot when I was in school So this is good, but objects in aerial motion tend to follow an arc assuming that there's no air resistance or whatever And obviously we all know from physics that we never account for air resistance. It's always spherical objects in a vacuum. I Think it's funny. No one else laughs. It's okay Physics joke But anyway objects that move through the air tend to move through an arc They don't move in straight lines. And so this is just another concept of believability Secondary action is basically supporting motion and this has to do with physics and with psychology Physics because of the attention to detail again if I'm running and I had long hair My hair would probably behave differently It would probably be behind me when I'm running and then it would kind of fly up into my face when I stop So that's kind of that physics of the different parts of your body Psychology though it adds to the element of believability, right? Because the more secondary motion that's happening the more it feels like this is a thing That's real if any of you watched monsters ink. It was a really big deal when they animated all of the hairs on sully That's an extra an example of secondary action because it's a small detail that makes it more believable that yet This is a hairy monster walking through air, right? Concept called timing. So this has to do a lot with several different parts of physics These these are shaped the same they're doing the same thing but you kind of believe that they're very very different materials or they're very different weights or the little Boxes have very different strengths or very different levels of acceleration So timing is a way to convey kind of the presence of an object and whether it's supposed to be heavy or light or Quick or slow or whether there's a lot of friction or it's really you know easy to move these are all concepts that can be talked about through timing and exaggeration this is a Psychological thing so actually kind of like how if you're wearing stage makeup On stage it looks great, but if you see them in real life walking down the street, you'd be like oh my goodness, right? Exaggeration makes something seem more believable if you overemphasize it So when you're doing animation, obviously, this is you know, obviously Square-teeth chomping, but that's very very exaggerated if it was more subtle Maybe it wouldn't seem as as right like it would just seem a little bit off Concept of solid drawing basically means that we believe the object can physically exist because it's following consistent principles of Existing in space right like it's not going through itself or contorting itself in some weird space-time continuum Wibbly wobbly way like it is following the principles of solid drawing it behaves consistently with itself It behaves consistently with its environment, you know, everything is following the same vanishing points, etc That's solid drawing Then we have this this concept called appeal and this is very psychological This is basically just like you know the heart and soul of the thing like is it delightful is it fun? Is it personable? This is very very subjective obviously, but a lot of brands try to add appeal to their brand right like male chimps A great example of a brand that just tries to add a little bit of appeal a little bit of personality But this is kind of the final principle of animation and it's just a little thing of like adding adding a soul to your to your object, right? So this was super fun, and it made a lot of sense I'm sure but like how how useful is this to us like that was really cool to watch rectangles fly through space But what does that have to do with web animation, right? So what do these principles provide to us? What these things give us is realism, so they let us establish how things would actually behave in the real world They give us context, so they establish spatial relationships between states between different objects and between all of these things and their stage They give us causality, so we know that one thing is influencing another thing An action is influencing an object we can see the reaction there They give us focus again We're directing attention to the most important elements and they give us delight right they give us some positive experiences They give us personality that's back to that appeal concept All right, so now I'm done with all the philosophy parts, so I hope that was super fun We're gonna go into practical stuff, which is what are the properties we can animate and in what way can we animate them? So this is an animation vocabulary lesson not that it wasn't before but we're going into it now So what are different elements that we can animate, right? One is color you can animate the fill of an object you can animate the border of an object, right? You can change the color in some way you can animate the location of an object, right? Where it is relative to everything else you can animate the scale is it going to get bigger is it going to get smaller You can animate the shape, you know, we talked about tweening you can change the shape of something into something else You can animate the focus you can make it more more in focus and more out of focus and you can animate the opacity, right? You can make it more opaque or more transparent. So these are all different things that you can animate on the web Well, I said I'd talk about easing and this is like my favorite animation on this whole thing It's so hypnotic. I just want to stare at it But easing is that that slow-in slow-out thing that we talked about Easing in is basically accelerating so that means you're starting slow and you're getting faster. That's called easing in Easing out, I'm sure you can guess is slowing down or decelerating, right? And there's also the concept of bounce and we talked about the follow-through earlier So bounce is when you use follow-through to go slightly past its destination It makes it seem like it's lighter like if I'm if I'm going to like run and suddenly stop like I'm not gonna suddenly stop gracefully I'm gonna kind of like fall forward a little bit. That's that bounce. That's that follow-through So if you have an object that's kind of bouncing That means that it kind of happened probably quicker and it's a little bit more believable if it springs towards you So now we're gonna talk a little bit about timing because that was a thing Again Jacob Nielsen, right? They had a study called three important time limits and these are the three important time limits I'm going to give you some examples pretty soon So any response time if an animation responds in a hundred milliseconds or less It feels pretty much instantaneous like that's how your brain works some people It's a little bit different per person But basically about a tenth of a second feels instantaneous like it just happened right away A response time of up to one second still felt like it was connected So I did a thing within a second if something happens I feel like the thing I did caused the other thing to happen. So that is like it's good for navigation It's good for major state changes, right? After 10 seconds people tend to lose the train of thought they don't remember what happened to cause something to to animate So let's go through some examples here So this is a really good example of a basically an instantaneous, right? So it's usually like some kind of toggle right like a radio button to toggle a checkbox You basically feel like I did it it happened instantaneous done. I mean there is some animation here, but it's really really fast Somewhere in between that that tenth of a second and that one second are maybe some slightly longer animation So like a little more detail. We don't want it to be so fast that people don't see it We do want it to be noticeable, but it's still well within that flow of thought, right? The the one second flow of thought this is great for state changes So I'm using a lot of examples by the way from material design because they just have a lot of really good examples And they've really well documented all of their animation processes But obviously material design is not the only one out there doing animation It was just very very convenient to use them as examples But here's an example of you click on a thing and there's a page transition It's within that one second flow of thought because it's really clear like I clicked on a thing and therefore something happened But because a lot's going on you want it to take a little bit longer so it feels natural It doesn't want to just jump out at you When we start getting up to that ten seconds though when people are you losing their train of thought That's when you want to have some kind of secondary animation in there To indicate that something is going on because if you just clicked on something and there was a blank screen And it sat there for ten seconds and then suddenly some stuff came up You'd be like did I break it like did I did I lose my internet connection? What's happening right now? So that's why progress indicators loading states all of that stuff is very very important when you're starting to get up towards that ten second side So how do you choose? Duration's right. I mean obviously the type of thing that you're animating does help influence it Basically if you have to travel a greater distance or expand to a greater size You probably want your animation to take a little bit longer rights people can process it If it's closer to the area of central focus So it's if it's happening right in the middle of the screen You can probably take a little bit less time because people are staring at it if it's happening on the periphery of the screen Maybe a little more time so people notice that it's happening But anyway this this study by the Nielsen group on the three important time limits again I will have a link to all the slides so you don't have to feel like you have to read these tiny URLs That are kind of useless in presentation mode They'll all be there and you can and you can check it out Next transitions so there's several different things that objects can do on object can be persistent Which means that it stays on the Screen stays on the stage it can be incoming so it wasn't there and then it enters the stage It can be outgoing which means it leaves the stage right that makes sense or it can be static Which means it isn't animated, but it's still an object that the other objects can interact with so it's still important As part of the animation these are these are basically all of you different transitions I want to talk a little bit about a cut transition so this is something it basically means not there's an immediate change There is no transition state change done right These are very disorienting right the problem here. There's a lack of orientation Your brain kind of internally resets as soon as it changes and there's also a change blindness because we we don't really Necessarily remember what was on the previous screen, so it's really hard to see what actually changed specifically Problem is obviously much of the web is powered by cuts right like you load a new page in a traditional website Like that's a cut that's not an animation and so that's why we need to do things like Be consistent between pages keep your menus in the same spot keep your footers in the same spot use a similar layout guide people Through what they're doing because we have to deal with cuts and right here You can see like these are vastly different pages and it's kind of like I you know Like things are jumping around and I don't know why and like it's it's confusing I don't know what changed So we want to try to mitigate that as much as possible when we're dealing with page changes and things that we can't control the animation for A tween great, so here's a great example of a tween Multiple properties changing at the same time right, so we have color change. We have a shape change We have a size change Tweening is useful because you can kind of tell where something came from and where it's going right So if I just clicked on the purple circle and suddenly there was a white square I wouldn't necessarily know that the white square came from the purple circle, but here it's pretty clear That they they come from each other and so that's why tweening is very very useful And again, you can tween between any of those things that we talked about earlier that you can animate So then there's fading there's several different kinds of fading you might see like a dissolve Which is a standard fade basically something fades out and then something fades in a cross divide is where they're simultaneously fading So one object might be fading out while another one's fading in which means if you kind of paused it in the middle You'd see both of them a little bit There's also a fast through sequential fade, which is basically a really quick fade out and really quick fade in So just different kinds of fades that you can employ This was like just a cool like layer based example that that material design gave us about about fades Which was I just thought it was nice Transformation this is one object becoming another also known as morphing This one this reminds me of all the flash stuff that I used to do like oh the first time we discovered Oh, you can make a shape turn into another shape. This is so neat. It does it for me. How cool So that's fun, but probably moderately useless. However This example with the buttons actually a really kind of nice example of transformation to convey useful information, right? So you've got your submit button you click on it There's a progress bar and then it turns into like a success state That's actually a really cool useful form of transformation to convey information This is a very very overwhelming slide that I don't expect you to digest but there was a Group that put together 12 principles of UX in motion So they kind of roughly based it on the 12 principles of animation They made it a lot more specific to web interfaces like here are some specific ways We can use animation on the web the URLs UX in motion net again the slides will be up So you can see these URLs, but I'd suggest digging into that and taking a look at it I'm not going to go into detail about this. They do a really good job of talking about it But these are probably some things that you've seen before in animation on the web So now that we know the elements of animation and what we can animate how do we then use animation? semantically and usefully so basically what what value can all of this animation provide to us now that we know how to do it Well one thing that animation is great at is establishing Context through hierarchy it establishes basically hierarchical and spatial relationships so you can see here The crane example, you know you click on your your crane icon and then the app kind of grows out of the icon Right, so it's very it's establishing. Hey, this is the the parent icon and this is the app that comes out of it The example in here where you've got your kind of list and you click on it and it grows out from that list That's great because it's establishing Navigation between different layers and again It's also being used to direct your attention to the important element because it's growing out from that So I just really liked this because it was showing kind of this layer-based animation So that's what you would see Statically, but this is kind of how it feels like you're looking at it You know material design is very layer-based and so you know you're clicking on a thing And it brings a layer up to the surface and then it brings it back down So things that you can do with animation is establishing hierarchy There's also several different kinds of relationships that you can establish with animation One is the the tab-to-tab or the scrolling swiping There's a lot of scrolling and swiping going on on the internet right now, especially mobile But these are basically establishing peer-to-peer or adjacent relationships that are equal so it's not hierarchical So for example the the dogs and cats that's a great example of like tabbed relationship A menu button to a drop-down So if you click on a button on a menu comes out of it That's establishing that relationship there or when you click on something and a modal or a pop-over comes up Like establishing that relationship right there Even toggles like accordions or drop-downs. That's a really great example of being able to use animation And loading icons and placeholders to final content That was something we talked a little bit about with the duration if something's gonna take a while But a lot of apps like Facebook or Twitter if you load it kind of on a slow connection You'll see kind of that blank state flashing at you But it's implying like here's where the content's gonna go And that's a useful way of establishing a relationship between the placeholder content and the content that will eventually be on the screen Animations can also be used to provide feedback, right? So if I drag something I'm showing hey, I'm going to drag this here And this is where it's going to be everything rearranges so I can see hey I'm doing something here if I add this one's cool. You add it to the cart It just like goes into the cart like hey, I added a thing to a cart, right? That's providing useful feedback Here it's entering in a passcode and it's shaking. It's like no no no no you did it wrong Right, but that's a little bit of feedback that it's giving just by using animation and even here with the The checkbox it's very simple animation, but it's saying like yes, you clicked on this box. It is now checked So it's providing feedback. It's providing whether there's a success or an error state Whether you're dragging or moving or hovering or pressing these are really great ways to use animation to provide feedback You can use animation to indicate status So like we talked about those pre-state or transition animations Placeholders like loading new content like on Facebook or Twitter when you're trying to load something Also the loading indicator if you've got like an Ajax button to load more posts at the bottom of a thing and there's a little spinner That's a really great example of indicating status. Something's happening State changes again stuff like on or off open or closed selected or deselected Focused or unfocused enabled or disabled great places to be able to indicate status Indicating progress is super great. So loading bars or pagination showing where you're at in a stage And then indicating the function of something. So these are all just like really fun examples of indicating the status of something by Yeah, like there's the loading thingy. It's like hey more stuff is going to be here Yeah You can also use animation to give instruction So this is it can be anywhere from just a very simple like that animation saying oh swipe to unlock I understand like a jump so that you know that you can swipe Very simple. It can be as complicated as let's build this whole entire like thing to teach you how the app works Slack does some of that but like hey, we built this whole complicated thing It can be just a pop-up that like shows up with like hey Here's an indication of the button you're supposed to click on next it can be a full walkthrough of your entire thing It can just indicate where you're at in the process These are all really great ways to be able to give instruction using animation And of course you can use animation to add delight. I just love this juggling guy. Oh, I could stare at that forever He's so cute But it's giving it a little character right so it's loading and we could have just had a normal loading bar But instead we've got this guy juggling because he's setting up your account Oh, but he's really sad because something went wrong. Oh, no. I don't know. That's just so fun The the crane has another good example. It's just a little bit of personality This one again adding personality, you know You you kind of pull down and it like shoots the airplane up and then the trees move like is it unnecessary? Yes, but it's fun and it fits whatever that brand is doing and I absolutely just love this loading bar indicator It's like what's happening. It's happening. Oh, no We all felt that before so fun ways to add delight I want to talk a little bit about the Animation and how it's kind of been used to provide information since the earliest visual output on computers and this the flash In cursor is like the first computer animation and it conveys actually a whole lot of information With just this one thing first of all it's conveying hierarchy because it's telling you hey This is the thing to look at this is the most important thing on the screen right now It's this is the one thing that's flashing. It's providing feedback The if the cursor moves while you're typing that means hey cool. I am typing and therefore things are happening It provides status if the cursor is still flashing that means your computer is still working because if it stops flashing You're like oh something's broken It's supposed to be flashing and it's also giving us instruction because it's like hey type here This is where you this is where you interact so just this this flashing cursor There's really basic thing it's conveying so much information with animation It's now I want to talk a little bit at the end here about using animation responsibly because remember at the beginning We talked about all these problems the bloat the complexity all this stuff all of these things were super super fun But how do we know when we should be using them and when we shouldn't right so number one Does your animation add value? Prioritize animations that will add value or especially multiple forms of value. What do I mean by that? Does your animation show the user where information came from or where it went to you know is it conveying some kind of location? It doesn't indicate progress, you know does it move the user through an information space does it? Reinforce physics or branding like does it make sense with what you're doing does it explain something faster than words or a video? Could sometimes some of those instructional things It's like a little bit of animation goes a lot better than trying to make users read a document So does it add value first question Second question are your animation behaviors consistent across your entire site? It's better user experience right to adopt consistent animation patterns because then everything behaves as expected If I interact with something one way on one page I should be able to interact with it similarly on another page But also it's a more streamlined and more maintainable code base when you reuse animation components Right, and so we want to be able to load as few things as possible We don't need to be super creative every single time We want to maybe establish a library of patterns. So this is why we want to know is our animation behavior consistent Is is it still functional without it, right? It may not be as delightful or as easy But we want to offer an alternative or feedbacks We don't want our animation to be mission critical to the thing working especially if your animation is done by Cutting edge CSS that maybe not is not supported in every single browser or it's done by JavaScript We want all of our actions to still be functional without it because again We don't necessarily know how people are browsing our website and the point is to enhance not to Cut people off from accessing something So remember to make sure that things are functional without your animation Even though your animation does add value and does make it a better experience for traditional navigation, right? Also, is it optimized? Consider what you're trying to animate consider how complex it is. Is it a super complex SVG file where you're trying to do all of these Things all at once. Are you trying to parallax scroll a three megabyte photo up your screen? Why are you doing that? How many paths are you trying to animate how many things you're animating at once? What's going on? We want to try to limit what we need to render We want to try to limit the size of things that we're interacting with so just try to optimize it as best as possible And the last one is do you need it? Don't do it if you don't need it I mean if you have a good reason if you can point to why you're doing something and it's compelling do it But don't do it if you don't need it. Don't do it just because it's cool Don't do it just because you saw it somewhere I mean do it on your own to practice it because you saw it somewhere But don't do it for like production ready sites There's a really great quote about this that I saw in the book animation at work Which was don't make something unless it's both necessary and useful But if it is both necessary and useful don't hesitate to make it beautiful, right? So my takeaway from that is you know be pragmatic first But if it is something that you do need if you have gone through those questions and established that you do it Do need it do it purposefully and do it well Here's something that's super useless to you right now because it's tiny But I will give you the link to all the slides These are a whole bunch of really great resources to learn a little bit more about the principles of animation Especially as they relate to the web the first two are great CS animation rocks Which is all of those 12 principles of animation but done in pure CSS So you can take a look at that that's fun and then jankfree.org because we want to not have janky websites so This is the final slide of official content. Here's how to get in touch with me. That's my email I mark time media basically everywhere on the internet easy to find this is the link to the slides So I will just van a white this Okay, where to find me next so I'm gonna hang out right now and answer questions until the end of the session After this I am going to be hanging out in the site ground booth because I'm a site ground ambassador And so I I you know get to do a bunch of fun stuff with them So come say hi to me. Otherwise, I'll be in the hallway track. I'll maybe be in some sessions. I'll maybe be randomly exercising I don't know. I do that sometimes online. I've been on a lot of podcasts You might see me around if you have a podcast you need a guest I like talking So that sounds fun and in person the next word camp I'll be at Officially is word camp Minneapolis, but otherwise I'll be here throughout the rest of the day. So Cool good ending Was for all of you because you sat in this hot room with me. That was fun Okay So so you're talking about using animation on your site. I want to clarify. So are you on? wordpress.com, okay, so Being able to customize wordpress.com is a question that I'm not super qualified to answer Just because I I do all custom development, you know dot org self-hosted stuff Maybe something especially if you've upgraded to a higher plan You probably have a higher tier of support and so that's probably something really great to ask them about like hey I have animation. It seems very slow. Is there anything that I can do because they They kind of control all of the server-side stuff that you so I mean I would say talk talk to them Yeah, yeah, that's that's why you pay them the money. So like use it Good. All right. Awesome. Yes Sure, so the question is about using Animated gifts and or gifs in I'm not gonna say it both ways because I don't want to take a side In newsletters and whether there is a Compelling source of them that are well, okay So I mean I think they're inherently kind of supposed to be lame a little bit But most and they're also going to be kind of big And hard to download just because they're multiple frames as opposed to one But I think if you look into and I don't have a specific resource for you But if you look more into like Motion photography as opposed to to looking for it like usually if you're looking for that You're gonna find like memes and like dorky like let's recut this anime into this other thing like that kind of stuff Which I find hilarious But I think if you look more into motion photography type stuff. It's more classy They're usually kind of trying to play with the whole dimensionality of stuff. So maybe look into that I don't have a great resource because I like I like the dorky ones So that's cool And it yes, sure Any other questions? They don't even have to be about design. I mean about UX necessarily I could talk about design I could talk about whatever you want. This is like free free design advice Everybody wants free advice, that's fine. Oh hi Okay I haven't actually so most of most of what I'm doing is very like low-level UX experiential I Follow a lot of really awesome animation people on Twitter One a couple people that I would recommend following One woman her name is Val had VLH on Twitter. She's fantastic Another one You know Kravitz I can't remember what her I think it's just like you know, it's like really easy But anyway, they're both like super super smart people and that's where I get all my like super cool inspiration from I'm not doing anything cutting edge. Although. I'm aware of what you're talking about but Yeah, the world is your Twitter oyster. I guess I don't know Terrible answer to your question cool Yeah, no, that's yeah Yep, there's a lot of really awesome cutting-edge stuff and I cannot believe that so much is possible on the web nowadays It's amazing. I am like really sweaty. It is hot in here cool I'll let you all can go because it's warm go go cool off. Thank you for coming. I'll be downstairs