 Welcome everyone to our talk on motion design and how to improve user experience with animations. We're really happy to be here. So short introduction. My name is Sarah This is my co-presenter Lise. We work for Amazelabs as front-end developers you'll find our Twitter handles and the code pendlings on the slides and And Amazelabs is currently hiring. So if after 25 minutes you still think this was pretty cool come talk to us So here's a small animation we created with G-Sap G-Sap is green sock animation platform It's the last for Drupalcon drop logos that evolve into each other using morphing and drawing animations Lise will show you a bit more in depth and in code how you can do stuff like that So we're really excited and let's get started The agenda as a short intro will show two brief examples how to and how not to do animations then invisible and immersive and how that What that means in the context of animations Then from the ten top principles we selected three and we're gonna explain those three in a bit a bit and then the biggest part will be examples and some code So when we talk about animation that improves the user experience We are not talking about things like this unholy abomination I'm gonna give you a couple seconds to watch that and appreciate it So sites like these are why animation gets a bad rap that is animating for the sake of animating Good animation is well thought through and designed. It requires planning and should be part of your development process So when we talk about animating your site, we mean things more like this This is an example of a site with immersive animation, which is not as commonly used But it's a good example to showcase how motion that has been designed can improve the flow of our websites and ultimately the user's experience So immersive and invisible animation Good animation can be broken down into two groups immersive and invisible To briefly explain the differences immersive animations are things like data visualizations where animation is the purpose Invisible animation is animation done well as part of a UX flow. It doesn't announce itself Well conventional animation may have 12 basic principles, which are originally defined by Disney in the 1930s There are many people who believe that this can be consolidated into 10 principles for motion design I'm quickly going to talk about the top three principles that Sarah and I have chosen which we believe to be the most valuable So squash stretch and smears this gives weights a sense of weights and flexibility Objects change shape as they move and depending on the depending on the elasticity of what they're made of When using this principle, it's important to maintain the volume of an object to make it look realistic This can have the tendency to look childish. So it needs to be subtle and natural looking Follow through an overlapping action not everything stops at once This helps give the impression that the characters are being the laws of physics And in this instance the character is whatever object it is that you're animating Timing spacing and rhythm. This is the amount of time it takes for an action to happen And the changes in speed over the duration of an action's timing This also makes animated objects that they appear to obey the law of physics and it can establish mood emotion and reaction So enough with theory. Let's check out some examples there will be animations that we think are really nice and improve the user experience and second part of the examples will be code and Stuff that we did so we go in more depth That's a page transition and it shows really nicely on how to keep a user's context We don't just switch the page or what we clicked on doesn't like suddenly come up from from above or from a weird side But we click on it. We know we clicked on the grid it enlarges. We can follow it with our eyes We know where we click. We know where we go through and we know where it goes back and On top of helping with UX it also just looks nice. I mean if there was no animation, I definitely prefer it Zooming scaling up Here's an iOS screen opening an app no transition no animation at all Just breaks context new page. I'm not sure did I click the right icon or not Here's the same thing but with animation So you know you clicked the weather icon it grows out of the icon and you know you're in right up That's skeleton screens The UI incrementally completes on the right side and Both screens take the same amount of time till they load But the right one just feels way faster because I start seeing Things appearing on top and the bottom can still load but also read I already read and see content Big sites like medium or Facebook use skeleton loading a nice contact form It's pretty playful. So don't use this if you work for a bank or insurance might be too childish It also has a lot of context switches, but since the elements move and transition you can follow it where it goes Where did it come from? Really nice and fluid Okay, so now we're going to show some examples where we dig into the code just a little bit So over here we have a search input field. I just need to get my mouse over here So we can actually use it There we go Cool. Okay. So when click the search icon morphs into the input field and the text animates in from the top This is created using g-saps morph SVG plug-in Let's see Again, so this utilizes some of the principles that we spoke about earlier such as follow through an overlapping action Which makes it feel smooth and organic and like it's obeying the laws of physics. So you'll notice when I Open it the text slides down and then the cross slides in just a little bit after with a little bit of delay This helps make it feel more organic. So it's to get into the code Just to give you like a bit of context. So, you know what we're talking about over here are some of the variables that were defined Here we've This is how you create a timeline in g-sap and here you can see it's incredibly simple literally saying morph a into b that's how easy g-sap is and This over here, you can see How we trigger this by toggling the active class and how we make the timeline play in reverse Onto the next example of a share button So if we click it like that Okay, so The one of the important principles of concept concepts here is that you don't have to show everything all at once You can reveal things when the user needs it or when the user asks for it This is also using the principle of squash and stretch. So it's maintaining its volume So it makes sense that when I it's a large We've obviously enlarged it for the presentation. You wouldn't actually make it that large on your website But when you click on it and the other buttons are sort of pulled out of it the original button gets smaller So it's maintaining its volume This example also animates from its origin. So the human brain is saying that's in there and we all know there's no There it's all just code But it gives a good sense of context for the user So it's going to the code this animation is entirely CSS and it's quite complicated But I wanted to quickly show you how powerful sass is if you really dig into it Here are some of the variables that have been defined and one of the mix ins here is another more complicated mix in Which this one is used for distributing the social share icons All of these examples are available on our codepains if you want to play around with them and dig into them a bit more and This is the only JavaScript that was used for that animation, which is what's used to trigger the animation on click So now something quite the opposite. This one is entirely JavaScript probably So this is the Drupalcon animation that was done using g-saps draw plugin morph SVG plugin and Shapeindex plugin. It's quite intricate. So we're just gonna look at a small part of it So over here you can see the piece of the SVG code. We've got a path Called V1 which stands for Vienna one, which is that first section of the Vienna logo and D1 Which is the piece of the Drupal Con Dublin logo that it morphs into in that section over there So the D1 that path is actually hidden. It's just plain none You will actually never see that but I'll explain a bit more of that later Just for some context here are our variables and here we've created our timeline So you'll see I've said repeat negative one and yo-yo true repeat negative one is what makes an animation loop in g-sap and Yo-yo true is what makes it Reverse so it'll play through and then reverse back We will so use labels a lot in this animation So you can use a label to inch to make multiple sequences trigger all at the same time Which is what I did so here we've got v1 and and D1 morphing into each other So in the animation at this point v1 2 3 4 and 5 morph into D1 2 3 4 and 5 all at the same time Using that label and then here is how the morph actually happens. So quite simple again You're saying take the path of Vienna one You choose your ease G-Sap has got some really great eases. You can also create your own eases Then you're saying more fit into the shape of D1 and what's important to note here Is that you're not making that D1 path visible? You are changing V1's path to the path of D1 so from that point onwards You will still be targeting V1. It will just look like D2 and now has Look like D1 and it has D1's data So then the shape index plug-in you'll see here. I gave it a shape index of 8 With this example, it's quite tricky with the SVGs the Vienna the Vienna piece has very few nodes whereas the Dublin one has a lot of nodes which makes it very tricky to make them morph into each other and Often if you try to use this plug-in and you try to morph things and it just looks like a mess It's probably has to do with your shape index so What the shape index does is you can change the node at which the morph originates from Yeah, and then you can see at the bottom there That's where you add in your label and you say when you want the sequence to trigger so a small chart we did not the nicest but Just about how can we animate charts? They're usually usually hard for websites because how do you make them responsive and This is done using chart tests the small library It makes all the charts SVGs which is nice because then we can animate and change them and it's automatically responsive out of the box so how can we Have this draw effect no matter if it's a pie chart or doing donut chart We first need to get the length of the pass the path is so we know how long do we need to animate so each slice We need to know how long it is and Then we set the dash array too much exactly that length so It's actually it's hidden because the the dash array property Is the space between if you have a stroke meaning a line in an SVG? It's the space between so the higher the more the higher the distance between those dashes if it's the same length as the past The path is actually not shown and then you animate it from that length down to zero So it draws the line and that's a drawing effect And then we define the animation so the ID we need of each slice so we can sync them So the second one starts when the first one ended The geo is duration. How long should that take from to from where does the animation animate to? And the fill freezes needed Otherwise the animation would jump back to its initial state and it would not be visible anymore So we need to freeze it so it draws the whole circle login form we click it and Shaking its head that's only CSS transform and Here's a key frame so zero and a hundred they don't change at all on the x-axis the form stays where it is and then 1020 we move it minus 10 pixel on one side plus 10 pixel on the other side and back and forth That's how it's shaking and then we just tell it to take one second to shake Ease and move forward not backwards the whole animation an upload button also entirely CSS except for the Click toggling Okay, that's misaligned Maybe to be more but so basically we have the button and on One side we have a spine element. That's exactly the size of the button But it's hidden because we translate it x into the minus and the button obviously has an overflow hidden so we don't see it and then we Transform it for two seconds slowly having this progress effect, and it moves and fills up the button that we saw And the cubic bezier is just that it's not linearly, but like goes fast and then slows down Yeah They're actually in code exactly aligned with the button. So don't mind that just check the code So That's the check That's drawing itself. It's also using the dash offset to draw. It's an SVG path it Takes 1.5 seconds and it's delayed by the amount that the other progress bar takes to fully load so it only happens afterwards and Then the fill mode forward linear default. These are default values and The key frame so what it first does it has the hundred percent hundred pixels That means the check mark is hidden and that goes to zero So it's drawing itself again, and then we slowly also move it up and the next element is Coming in which is the uploaded button. So the upload moves up the check mark is drawn and then the uploaded moves which is hidden and translated a hundred percent below the button and Delayed four seconds. Yeah, cuz that's a sum of the progress bar and the check mark and then it moves up as soon as the check mark is gone and Translate 50 50 that's just to vertically and horizontally center the uploaded text in the button So animation is often implemented as an afterthought and considered the sugar on top when it's treated this way It will fulfill this way It's a powerful design tool which can be used to greatly improve the user's experience But when used incorrectly it can hinder the user and end up causing an overall unpleasant experience Motion design should enhance the user's experience and add meaning to a design It's an important tool that every designer and developer should pay attention to Thank you very much Any questions? Thank you for the really nice animations. I have a silly question because do You obviously probably receive from the from the designer Documents where it's like in very detailed explained how animation should work Does it work that way or do you sometimes event them on the spot and then suggest to the client that this is better You mean we work in the process you do you receive a document where it's like really deep in detail or do you vent on yourself? So I've got a bit of experience with this The designer that I mostly work with Jason in the Cape Town office We often will sit down together and discuss things in great detail and plan things and you know discuss like is this possible Can we do this? How long is it going to take and yeah, it's part of the process that we Go through and we decide upon the animations that we're going to implement So like intense communication with you and the designers essentialize you Yes, and how does it work if you work with a large project and your designer sits in a different country You have an experience with that There's an application called zoom Is it possible to work just over over Skype or is this being physically together? Yeah, well at amazing. We've got a lot of remote developers or remote people in general And I've actually never really experienced any issues working remotely with people It's very easy to contact someone via Slack or zoom and you just discuss and yeah You talk about the animation with JavaScript. Do you have any recommendation? I mean library or any anything that you really like to use Yeah, so personally I'm gonna give a very obvious answer. I really like G-Sap G-Sap has been performance tested and It Performs as well or better than CSS obviously there's instances where you'd prefer to use CSS But if you're going for JavaScript and you've made that decision, I would definitely recommend G-Sap There's a lot of extra libraries on top of tween max and timeline max Yeah, it's incredibly powerful. It's quite easy to use as a very large community as well It's easy to find things out and learn things How do you handle accessibility? Because you're conveying Information through animation How do you present that information to visually impaired people? There are a lot of ways which with SVG text. It can still be readable I Don't quite know how to explain it but a lot of time when you animate text. There are methods which you can use to Have the text will be legible and it can be picked up by like text-to-speech Edits and things like that. Also, that's that's more when it comes to immersive animation. So the sort of subtle things It's not really Going to be affected by that. I don't think well I think if you change a button to the status of upload it You will have to inform the user that you know the action has resolved Yeah, well, that was your button. Do you want to explain you? No, no, no, I mean she okay. No, that felt like I was throwing on the bus. This is how we we work together But so Sarah is a Designer and developer and all of that so and she put a lot of thought into that That button we sat together when she was programming it and I think she's been about like seven hours Yeah, so the yeah, we changed that button a lot of times and just wanted to make it perfect So the focus is on animations here and The accessibility I know it's it's always the thing that we keep forgetting or that projects don't have the budget for and it would be important but In this case it yeah There's not the SVG that you could talk That's her maybe one last comment. I think Accessibility should be your first focus because if I'm visually impaired and I cannot use it I simply cannot use your website So I would suggest start with accessibility and build on top. I mean progressive announcement is still the best way to go So I really like the Animations, but I want to make sure I can use them especially for our government Clients where we have to be accessible Thurley Hey, thank you for this amazing question. I just have a little query How do we decide if I have two options for the animation? What are the criteria's on which I can decide which animation which way I should go this way or that way like there There must be some basic criteria, right? It should be user-friendly easily accessible the colors maybe and so something like that You can do user testing or usually I design a lot of the things I do in the browser itself because only if I see them or I can then Knock on like get one of the other designers to look at it in my browser and then start discussing and tweaking When's the timing perfect? How much needs this to be delayed or? Is there something like the optimizations as well in in the animation designing because I'm a backend developer I really don't know much about the animation design So does the optimizations part comes in and plays an important role as well? Or it's just that you can design whatever the way you want because I'm starting to learn the animation designing for my own project This is why I'm asking this but shouldn't take too long and animation should not be something that the user has to wait for to end because it It should help but certainly not like prolonged anything. Thank you very much Just a quick remark to the accessibility question from you So it's one thing is the animation and then to show people who are able to see that animation That they can experience it and maybe get an added value But on the other hand there are possibilities to add information Which are only visible for example to screen readers and so this is actually in my opinion at least not part of this talk So let's discuss it later I'm just on the topic of optimization a couple Fun facts or things that probably everyone already knows If you're looking at CSS animations the sort of the cheapest properties to animate our opacity and Transform I believe and Then with SVG I always use SVG OMG to optimize my SVGs Depending on the complexity of it because some of them you put it in there and the next thing you know it looks completely different but SVG OMG has a lot of different settings that you can play with and Adjust the precision and yep, usually I mean I get about like 60 to 70% saved on my SVGs that way