How to ANIMATE your Web Designs in After Effects like a professional!

even if you constantly see more and more 3D in websites 2D animated uis are still the most requested ways to create website experiences portion design is a huge topic so of course we're not going to cover everything in this video but there are some basic concepts to know and understand to professional animate your websites timing is a crucial concept to know to get your animations right and I see a lot of beginner motion designers that set the same duration for every animation on their websites did not think about the size of the element the visual weight of it and how much distance it has to travel during the animation choosing the right timing doesn't really mean that you see what works with one element and apply to all the rest there is a process behind let me show you some practical examples in After Effects I've created this animation in After Effects to show you how to set the right timing for every single element depending on their scale their visual weight and how much space they take let's only take the second half and I want to slide down all the content and show the menu with all the links first elements that we have to move are the buy button and the images you press p on the keyboard to change the position of this element we create the keyframes and then I want to move ahead to three seconds and I want to slide down the content let's add some delay to the images to make everything more interesting and now it's time for the menu first I want to show the background and we are going to set the timing for the background of the menu we create a keyframe we move ahead and we are going to set the animation the duration of the animation to one second we create another keyframe and then we slide down the background we add some easing and we're gonna talk about using in a bit so don't worry and right now we have the animation in place last thing we want to show the links for the menu so we go at the beginning of the animation for the background of the menu we set the position for the links and we go at the end and then we show the link so we can see them set some easing just to make everything more smooth and organic some delay and here we have the animation for the menu but every single animation right now is almost one second on that and what I said is that every single animation every single element has to have its timing in this example setting the same timing that the background of the menu has to the links of the menu is a huge mistake because everything is load down by the perception that the user has by seeing the links of the menu if an element is really small and it has to cover a small distance that the overall animation is going to feel way more slow for instance here we want to have the animation for the links of the menu just around the 0.5 seconds and as you can see everything looks way better and the user doesn't have to wait for the animation to play to see the links now because this animation has two stages the first one being that we slide out the content device button and the image and the second stage is that we show the menu everything need to takes longer the more complex your animation is this lower it needs to play to Luke Center and organic you can squeeze everything in one time spanner just because all your other animations have a specific Edition you need to analyze your composition determine how complex it is and set a timing a specific timing just for that composition to make it look more organic and natural for instance but just by speeding up by 20 percent you can see that overall emission doesn't look right it is melted together and is not understandable another effect it takes too long to activate or deactivate is another bad timing example imagine if you want to see some additional information about a products about to do so you need to hover over a button but it takes two or three seconds for you to see the content wouldn't you feel frustrated about it in this little section I want to make this button interactive and when you click on for example cashmere I want to show some details about the fabric so I want to move these jeans bottle node by a tiny bit to show the actual paragraph as simple as we have previously done let's set and create some keyframes for the initial position let's imagine that we want to set the duration to one and a half seconds for this animation and we drag get the equal to action down again we set some easing just to make everything look way more organic and beautiful now we have created some space to show the additional content go back with the play header set the initial position for the actual content that we wanted to display let's go at the end of the animation and drag it down so we can show it somewhere around that let's add some ease into this element and add some delay to the animation at this point you can see that something is wrong and I know that you know what I'm going to say fun Factor if you follow the longer and you remember what timing did we set for the main interaction in the other composition is the same as the one for this call to action but here everything looks way slower like call to actions you want to keep these interactions really fast and simple especially if they have some functional purposes going even further with the conversation you can use timing to create a hierarchy if you have a complex section with lots of elements primarily show the ones that are more important so the user sees them first and then you can show all the rest if you show everything together you make it a mess and the user feels overwhelmed they're losing interest for the content now you set at the right timing but everything looks linear sluggish basically not natural and organic that's because easing is not on point easing is the behavior of the animation and it tells how faster or slow an element should move out what stage of the animation a common mistake is to use too much easing causing the motion to feel sluggish and unnatural the good way to do it is not by having an animation that starts extremely faster or ends extremely slow but you want a smooth transition between the faster and slow stage a good practice keeping the same using curve throughout the entire experience and throughout the entire UI makes everything way more consistent so you don't want to end up having four five sixes in cursor because that disruptive flow and Rhythm of the website choose one curve depending on the mood of the website and stick with it all the way through the entire experience especially in complex compositions a lot of people don't actually think about adding smooth Scrolls to their websites but to me is a huge announcement to the user experience and it has more interactivity to the website plus it has a level of Polish and attention to detail that can make the website feels way more professional and well designed there isn't a specific value that I can tell you to make it perfect effect but for sure you don't want to be in two scenarios first you don't want to create a smooth crawl that is too fast because otherwise the user don't have the time to consume the content in the right way and it doesn't have the opportunity to stop in the zap position that he wants this second scenario you don't want to create a smooth scroll that is a way too slow because otherwise you create friction between the user and the user experience here it's important to get the timing right you don't want to have animations that started too early or too late in the first case you will have a too much empty space before you hit the trigger and that cause the user to think if he has come at the end of the page or if he has some problems with the internet connection it breaks the flow of the website and it is super annoying in the second situation if the animation starts too early you don't see the animation so why would you do that scroll triggers are super useful to reveal additional information or options when the users crossed a specific point of the page creating a sense of Discovery and engagement it's really important to keep the interaction really simple so the user don't feel lost or overwhelmed I highly recommend you to implement these in your mock-ups by the way if you want other tutorials on how to create animations in After Effects let me know that I'm more than happy to help you it's been a hard video to make friends but at the end I'm really happy about how it turned out there aren't many tutorials on the internet about that topic and how I explain it to you so if you found this video helpful leave a comment down below with feedback smash the like button subscribe to the channel I hopefully see you in the next video

Channel: Matteo Valentino

Views: 19,755

Keywords: minimal website design, minimal web design, web design tutorial, web design tutorial for beginners, ui design tutorial for beginners, ui design tutorial, how to design a website, beginner to professional designer, graphic design process start to finish, web design process, web design, after effects, free after effects tutorial, free after effects course, after effects tutorial, after effects tutorial for beginners, motion design, motion design basics, web design freelance

Id: 0W7MoeXslyE

Length: 7min 57sec (477 seconds)

Published: Mon Jan 09 2023