12 Principles to make your Webflow Animations look Pro

you add interactions to everything on your website and nothing seems to feel right how do the pros create award-winning animations that people love what's the secret sauce missing from your interactions in this video I'm going to show you the 12 basic principles of Animation you can use to instantly make your website stand out and let you charge more for your work hi I'm Devin Fountain a low code designer with over a decade of interactive websites and app experience I'm going to walk you through each principle and how to apply it to your site adding new rules every step of the way before we get into the 12 principles a little history lesson the illusion of Life Disney Animation is this iconic book published in 1981 by two of Disney's animation ogs Frank Thomas and Ollie Johnston the book is a treasure Trove of insights into the art and history of Disney Animation packed with sketches behind the scenes info and most importantly introduced the 12 principles of Animation a set of rules that became a holy grail for animators globally even though it's been over 40 years since its release it's still a must read for anyone serious about animation showing its lasting impact on the industry in fact if you want to take any animation class now that's one of the very first things you're going to learn it's one of the very first things I ever learned when I went to college okay so I've created this webflow cloneable for you to follow along with me if you want otherwise this is a free clonable you can always download it at the end and check it out at any time you want the very first principle of Animation is squash and stretch it's the action that gives the illusion of weight and volume to a character this can be applied in webflow by manipulating the size and shape of elements to give the illusion of force or momentum this could even be applied to buttons loaders or interactive elements on this page for example I'm using them on buttons just so we can build on something really basic here I have three buttons I have a normal button that has a hover I have what's called our fun button and I have a serious button now the normal button has a really standard hover color change and this is perfectly fine I see this on a lot of websites it's inoffensive and it's really easy to do it doesn't require you to know any animation deep now the normal button here is perfectly fine it has a hover effect of a background change but that's it it's just fine at best it doesn't have any emotion to it it doesn't convey anything that we wanted to convey so how can we use squash and stretch to do that now squash and stretch doesn't necessarily mean that it has to literally squash and stretch it can mean we change the volume of it as it moves we could change the speed of that thing anything to give it the illusion of a real human moving I know that sounds really weird but it's going to make some more sense as we go on so on the fun button I've created an interaction called squash in and squashing's currently empty right now because we're going to fill it up so I have the div block selected which is the parent of the button container and the reason that I've done this is because when we hover over the button if the scale changes at all that our Mouse is slightly outside of that button and we keep sort of hovering you'll have this weird clipping bouncing effect but by wrapping it in a div that never changes the size but the button inside changing size that whole thing could remain safe so we're going to be animating on the div block here I'm going to add a scale and I'm going to say that I want the scale to be 1.2 because I want it to be long I'm going to uncheck this box I'm going to say 0.8 because I want to be short sort of like a really oblong cartoonish button and that's exactly what we want to do it's a fun button so we want to make it fun and instead of linear because linear is a little slow I'm going to set this to bounce past because I want it to be fun I want the jiggle click play that seems nice I want to be a little faster perfect now I've already gone ahead and created squish out for you and squish out is nothing special I've just duplicated the original squish in and I've set the original Dimensions back to one one you can see that here and now we save that and we go back see it squishes and bounces back nicely it adds a really fun interaction to an otherwise very normal button again there's nothing wrong with the first button it's just that it's fine it doesn't convey any Mastery don't give any personality now for the Sirius button we're going to do the exact same thing but slightly different so I've gone ahead and created squash into and squash out two is obviously already complete it's the same one but it's in reverse and what we're going to do is select the button I'm going to do a scale we're going to maybe set this to 1.1 I'm going to feel it out here 1.15 something I like and rather than setting the duration to 0.3 I'm going to set this to 0.6 and the reason I'm doing that is because when something is slower it conveys that feeling of luxury like it's more expensive for the Sirius button we want to convey a feeling of maturity like it's expensive or like it's going to take its time because it's serious it's not going to be fun so in order to get that serious personality I'm going to take this serious button we're going to add a scale so what's that to the button we want we want to scale the button not the div I'm going to set this to 1.1 we're just going to feel it out here and rather than the 0.3 seconds for the from the original fun button I'm going to set this to 0.6 seconds we're going to double this so we want it to be serious and Sirius takes time now I'm going to go with out Court out court is a preset that I really like you can actually view what that looks like in the ease out here it's a nice slow curve upwards and I'm going to save this squash out to already has an animation put on it it's the exact same animation as the in but reversed I've taken a lot of the effort out for it now let's take a look again we've added squash and stretch to two buttons while the original still has the background color change and we can convey a lot of Personality just from these minor changes so here's the normal button again simple background change nothing wrong with it but it also really doesn't convey anything to the audience now the fun button that's fun right I think it's fun and then the serious button it's going to scale up really slowly and scale back down even slower does that feel like luxury something you would see on a really expensive site and the thing is all three buttons look exactly identical and we've conveyed three different emotions just by modifying two of them That's The Power of using 12 principles of Animation is you can convey all sorts of different things with just minor tweaks now let's move on to principle number two now the second principle anticipation is pretty self-explanatory it's a technique used to prepare the audience for an action it basically lets them know that something is about to happen before it happens let me show you two examples here I have this example of a NAB bar container and the stab bar container has a little menu as well and normally when you hover on a menu container you just get the pointer element and the problem with the pointer element is that all it does is tells us that it's a button but it doesn't quite convey what's about to happen and that's the entire point of anticipation it's not to let the audience know exactly what's about to happen by looking at it but what's about to happen by interacting with it so we have the snab bar menu here and we have a menu container it's usually like a menu button or something like that and usually you put a pointer element on it to convey that it's a button and that something is about to happen but that's about it so how can we convey something a little more how can we anticipate the user let's create an animation on this I'm going to call it anticipation in two and I'm going to select the first line here now I'm going to add a scale we're going to do 0.5 because we want that to shrink by half the next line I can select it I'm going to do a scale of 0.25 I'm going to turn off the lock because I only want the width to change not the height that's also 0.5 I want these to happen at the exact same time so we don't want it to be like a PowerPoint situation I'm going to set this to 0.3 just eyeballing it and set it to ease ease is a really just very simple s-curve when we hover on it rather than just being a pointer we get an indication that it's actually a menu item and then when I click on this thing it's going to collapse down now this is a really great use of anticipation and to be honest a little bit of squash and stretch because we're squashing the lines on the menu button now let's also pretend that we have an accordion on the page most of the time with an accordion same deal there's a pointer icon when you hover over it letting us know that it's clickable letting us know that it's some sort of button but that's about it the only other way you would know it's an actual drop down is maybe the arrow or the section letting you know that it's frequently asked questions but what if you've never seen a frequently Asked question section how would you know what it's supposed to do it might go somewhere and if you click it you might not be able to get back it's a bit extreme but you get what I'm saying so what can we do about this one let's create an anticipation animation on this I'm going to select anticipation in this is the one that I've already created for us and I'm going to say that on Hover what I want to happen is maybe this Arrow rotates 120 degrees that way it'll tell us which direction the FAQ will collapse down into I'm going to add a 120 degrees that looks pretty good and then maybe the background changes to have little arrow container here that way when we rotate it doesn't mess up the bounds I'm gonna say background color I've got some here let's say pink a little you know flux pink I want those to happen at the same time so I'm going to drag those together and let's just see what that looks like pretty good but kind of boring with linear so I'm just going to select both I'm gonna put faster duration on there I'm gonna go out Circ it's almost got like a nice quick speed jump to it that seems nice so when we hover over that it'll show us the arrow rotating and we'll know you know this is the direction that it's going to go in that's pretty good but maybe we take this up one more notch let's add a little move here I say 0.5 Rems which is 8 pixels I put on there give it the same time give it the same speed properties and click play now that seems nice I'm gonna hit save again the out is automatically done for you I'm going to preview that so now we've got our menu we know what that does because we hover on it we've anticipated what it will do and now with the FAQ section when we hover it tells us these things are probably going to go down if we click I think the arrow will probably move all the way there's something about that indent that makes it feel really nice the third principle is staging this principle is akin to the staging in theater or film its purpose is to direct the audience's attention and make it clear what is the greatest importance in the scene what's happening or what's about to happen in webflow staging can be about the layout and the design of the page and how it draws attention to the most important elements this can include the use of color contrast or animations to highlight key components now this is a rather difficult one to convey because a lot of staging is done in the actual design of the page but staging could also be done to draw your attention on things so in this example I have two cards one with Jane Smith and one with me Devin fountain and the only difference between the two are the images at the top and then in the higher buttons at the bottom now the higher buttons are just gray and that flux purple and I think that that's enough to differentiate them I would consider that staging in itself but staging can also mean the way things are brought into the page so if I hit command shift p to preview this you can see the cards come up one at a time which is a really nice way to bring those cards in these two cards have a really nice intro animation when we preview the page they both load in elegantly one at a time they feel nice but they don't really have any other way to let us know what you want us to click on so how can we do that with staging well one of the ways we can do that is Maybe by showing this button is the most important thing on the page other than the color what's something that we could do if you thought scaling slowly you'd be right so what I'm going to do here is add an animation here to this button and I'm just going to add a scale and another scale and I'm going to tell you why in a second so on the first scale I'm going to make this 0.6 seconds because I want to be slow and I want this to grow 1.1 times its size that's a little large so I'm doing 1.05 so if this scales up we'll see click play this goes up nicely but we want it to have a pulsing effect because we want it to really draw your attention so I'm going to set the second button 0.6 so they're both 0.6 that way they're timed equally and I'm going to set this to 1. and I'm going to give them both an ease just so they are exactly the same on the in and on the out so now we have this nice little growing and shrinking effect I'm going to hit done if we preview the page we can see that happens but it happens almost immediately we don't actually get to see what happens so I want to put that on a loop that way it occurs the entire time so now when staging the page we preview the cards load in and higher bounces over and over again letting us know what you really want us to click now this is a really simple way to Stage a page and again a lot of it is done through the design but what are some other ways in which you can draw someone's attention by growing and shrinking something by making things disappear by making things appear making things glow maybe even adding some sort of underline to something number four straight ahead and post a pose there are two different types of approaches to the actual drawing process Straight Ahead action means drawing out a scene frame by frame from beginning to end while post to pose involves drawing a few keyframes and then filling in the rest in wellflow context this would refer to creating a complex animation sequence step by step versus creating key poses slash States first and then adding in between poses the thing about webflow and a lot of modern animation is that the pose to pose part is done for you as is the Straight Ahead a lot of it is done through tweening which is where you take one frame you take the last frame and then automatic exactly fills in the rest through software but one of the things that a lot of webflow animators do is working backwards and this is sort of a way to do that so let's say I have this card here it's fixed on this page so we can show out the animation and we scroll nothing seems to happen right now but the cards in here are in their final resting place we want these cards to move from right to left as we scroll so to animate this in the old days what you would do is you would literally take the first frame like this and you would animate each one by hand until the last one is done or you take this first frame you set the animation key on it you go to the last frame you set the animation key on it and you'll work your way in the middle but thankfully a lot of the animation is done for us now so what we're going to do is set an animation here on the entire page and we're going to say while page is scrolling because we want this to happen while the entire page is scrolling so what we're going to do is create an animation while scrolling in view because the right panel can scroll while the card element is fixed so we can show what happens while it's scrolling so while scrolling play scroll animation and we want it to be fully visible when it starts because it's already at the top it doesn't need to be doing anything else when element is fully visible no we want to be start exiting that way when the bottom of the page hits that's when the animation starts to happen or starts to end we're going to set the animation on the right panel because this is going to be our scroll trigger I'm going to set it to while scrolling in view play scroll animation when element is fully visible because the right panel is already fully visible and we're going to end the animation when the element is fully invisible it'll never be fully invisible because it takes up the entire height of the page but that part doesn't matter we're trying to convey the animation itself and what we're going to do for this actual right panel animation we're going to create a new scroll animation called straight ahead so on the scroll animation we want zero percent to be the top of the page and 100 to be the bottom of the page so what we're going to do is select the Straight Ahead cards element here because this is what we're going to animate from left to right I'm going to say move and that automatically sets the beginning and the end for us and with the beginning already set in place because that's how we've designed it we're going to set that position to zero percent we don't have to do anything and for the end we're going to eyeball this but I'm going to say negative 100 because we want to move to the left I think that's a little too far I'm just going to bring it back 57 percent now if we turn live preview on and we scroll we can see that that has a really nice effect very simply number five follow through and overlapping action follow through means the termination of an action and its effect on the surrounding environment overlapping action is the tendency of parts of a body to move at a different rate take for example a person walking when your left arm moves your right leg moves when your right arm moves your right leg moves this is an example of overlapping action these two things happen at the exact same time if they didn't your whole body would feel more like a really slow PowerPoint presentation you can apply this in weblow by having animations affect other elements or continue after the main action has already happened so in this example of overlapping action I have this card where it says no overlapping Action Now Let's Pretend This is a page load if I preview this the card comes up the text the square grows and then the labels come up and this is something I see a lot in amateur web designs where things happen one after another it's something that I want you to start changing because if anything I think that this has the most effect on making your animations look really nice it's the overlapping action right now if we jump into this animation we can see that everything is grouped together in the initial state and then afterwards the move happens the opacity of the text in the card the staging panel name moves the overlapping Square grows and then all the labels move at the same time now this is really easy to understand when you're animating something you just click them it animates and then the job is done but it doesn't really convey any emotion when all of them are happening one after another it feels static it feels slow so instead we're literally just going to take all of them and bring them together and just like that through overlapping action that really boring card turned into something far more interesting with zero effort now if you want to go the extra mile one thing you can do is start analyzing what things come in and how slowly you want them to come in and it's really easy you can keep the exact same duration timing and the easing and all you have to do is add a little bit of a delay now this is a bit like separating the steps but the difference is that the steps don't wait for one after another to finish by putting a delay on there all you're saying is they occur together but one is delayed a little longer so in this example I like that move and opacity are the same we play that we can say they happen very smoothly but paging staging panel name move I wish that that was maybe a little slower and I'd also like it's to have maybe an opacity change too so I'm just going to add that while we're here put that in the starting area I want these to be together that way we can see this is 0.6 this is ease as well okay so even though these are all the exact same time and these are last they'll still play at the same time so what I'm going to do is Select these two I'm going to give them a delay of 0.1 just to start so we play we can see that the card comes in and then no overlapping action comes in just slightly after now if we take the scale and we position it after the point one we'll say 0.2 we can see that that also occurs afterwards and maybe I want the square to actually occur first and I want the staging panel name to occur second because they appear in a vertical order as that now the square comes in and the text comes in and the labels I also want those to come in after the actual label name comes in so the label name delay is 0.2 and I'm going to set these to 0.3 so now when we play this they'll all come in after but the problem is now they feel like they're all coming at the same time and I want them to be staggered I still want them to be overlapped but I want them to have just a slight delay between them so I'm going to take all three they have 0.3 each and rather than give them an entire Point extra what I'm going to do is just add .05 to them so it's going to be 0.35 so I'll 0.5 or well 0.3 0.35 and make sure the second one is 0.35 and I'm going to say for the last one point four because we're adding 0.05 to 0.35 so now when we play they should all be just very so slightly delayed and now suddenly with very little changes that card feels far more expensive than it really is and all we did was add some slight delays to it everything has the exact same timing if we move down here 0.6 0.6.6.6 all with ease so just adding a delay and coupling things together with overlapping action will make something appear far more expensive than it really is number six slow in and slow out the movement of the human body and most other objects needs time to accelerate and slow down for this reason an animation looks more realistic if it has more frames near the beginning and end of a movement and fewer in the middle webflow includes easing options which can help to create a natural motion these can be adjusted to create the feeling of acceleration and deceleration a lot of the work is already done for us so in this example I have this menu button and when I click it a menu pops out totally normal this is something you would see all the time but slow in and slow out principle says that things happen very slowly at first that very quickly and then very slow again think about it like walking you don't just walk immediately or running you don't just run immediately you start to build up to it building up speed and then if you want to slow down it doesn't happen instantly it happens by slowing down just like this menu this menu is appearing instantly and disappearing instantly as well so we want to create slow in and slow out to emulate that movement so I'm going to click this button which already has a mouse click on it of slow and slow out if you jump in here we can see that there's a scale change opacity and then the list items show one after another and just like the previous principle that we talked about these menu items also have a slight delay of 0.05 so if we play that you can see those happen in real time but right now the menu doesn't have any slow in and slow out so we're going to add that we can literally just select all of these and add an easing to it and this is where you come in you can pick whichever easing you want to choose for me I'm going to choose just ease and you can see that is already instantly way better the problem is now the moves are a little too short so I'm going to add that to 0.6 they all float in nicely and I think that this menu still appears a little quickly so I'm going to make that 0.6 as well so now when you click on the menu it has a nice slow movement in and a nice slow movement out it doesn't feel unnatural and it doesn't instantaneously happen it appears like a real menu would in real life number seven Arc most human and animal actions occur along an arched trajectory and animation should adhere to this principle by following implied arcs for greater realism While most movements in web design tend to be linear due to the constraints of the medium subtle arcing can still be achieved in webflow for certain elements like a modal appearing to rise from a button for a more natural feel so in this example we have a filter button and this looks exactly like our menu from before we click filter that menu appears and we're not going to worry about timing on this one we're just going to be worrying about arcing and so the thing about arcing is that it's just like a body movement something that I want you to keep going back to when you imagine walking with the human body your arm doesn't just jump forward and jump back at a really straight fashion it has an arcing movement almost like a semi-circle and we want that same thing to appear here when we click filter we don't want that menu to immediately appear upwards and to the right we want to sort of have a arcing trajectory as it's clicked so how can we do something like that we have this slow in 2 here we click this we can see that that appears now it's cleared on this button we have an element trigger here called Mouse click tap we have an interaction already set up called Arc in and this does a lot of the work for us the scale is automatically set to zero zero the opacity is set to zero and then it just grows and grows in opacity something we've already seen before but what we want to do is create that arcing motion so how can we do that with the scale well we can treat it just like squash and stretch and a lot of these principles start to blend together when you use them all together so in this case with scale we do want to grow to one to one but we also wanted to take the long way around first if we watch this over and over we can see that it's longer than it is tall now the animation is still very linear when we click filter but we want to have an arcing motion so just like squash and stretch we're going to have it grow long and then we're going to have it grow tall so right now we have the arc list scale here when we click play we can see that that's happening very quickly out Circ 0.3 because it happens quite quite fast but we want to change it so that the scaling happens slightly differently I'm going to unlink these we want to grow long so one first but we want to drop that we want to actually be zero so it remains zero so we can see it it grows long but we can't see it because the height is actually set to zero and then scale the second one we're going to emulate the same timing same easing and we're going to unlink these again I'm going to say that this is one now if I click play because it said that the same duration with no delay it's going to appear exactly the same as the other one because we're modifying the x value and the Y value in the scale at the exact time without any delay but if we add a slight delay to this we should get long and then tall and by playing with the delay we can choose how long we want it to go now it has somewhat of an arcing motion so by taking the first scale and setting the x value to 1 with 0.3 duration and creating another scale where the x value isn't touched but the Y value is and we double the duration what ends up happening is it grows long first and then grows tall second but they're not delayed at all so they occur at the same time and they create this fake arcing action so if we preview the page and we hit filter you can see that it has a nice effect that's better than just popping out in a linear fashion principle 8 secondary action adding secondary actions to the main action gives the scene more life and can help to reinforce the main action you can use the secondary animations to add richness and webflow this might be a loading spinner on a button that's been pressed or an additional slight rotation or color change to an element being interacted with let's say that we have this button here it's a trash button and if we click it it's going to delete this are you sure you want to delete everything modal most people would probably think by hovering on this we'll turn the button red or by clicking on it we'll turn the button red but with secondary action what you want to start doing is thinking how will this thing affect the other thing that is directly correlated with so in this case maybe what we want to do is create an element trigger we'll do a mouse click start an animation because this is principle eight we'll call this zero eight secondary action click and maybe when this button is clicked we do a background color change I'll change this to Red I'll just kind of feel this out a little bit we'll set this to 0.3 just go with the ease that way we don't have to mess with curves let's take a preview click this turns red that's fine it immediately lets us know that this is a negative Action Now what we want to happen is for when you hover over the trash icon it affects the other modal so maybe when we hover over the trash icon we can change the background color and the text so let's do a mouse hover effect we'll change the trash icon we'll call this zero eight secondary hover in and we want the background color of this to change slightly will go with a light pink like a pinkish red and then we'll change the background color of this as well because we want them to know that one thing affects the other thing so let's say that's pink and we'll say that this is red now we're not really focused on readability here I do want you to focus on readability in your main builds but right now we're just focused on animation and then we want to bring all these together because we want them to happen at the same time we're going to say that this is 0.3 because we want the interaction to happen quickly we want them to be Associated together so now when we hover it shows everything turning pink and red and this is an SVG with a current color fill on it so what we can do to make that a little extra is actually add a text color change to the button as well and that will affect that so let's set all this to 0.3 give it a nice ease so now we hover in the button turns red the modals turn red and all you have to do is add a hover route but the secondary action automatically lets us know that by hovering that trash can icon we're going to affect something else as well principle 9 timing more drawings make an action slower and if fewer make it faster timing is critical for establishing a character's mood emotion and reaction with webflow's animation timelines you can carefully control the timing of your animations this can create a sense of weight and reality or can be used to create a more stylized feel in this example I have four different blocks one called timing small one timing big timing cheap and timing expensive and you may remember cheap and expensive from the earlier principle principle number one squash and stretch but in this example I'm going to show you how timing can change the way that things feel even if they're exactly the same with timing small block one I'm going to make a load in animation with the timing principle I'm going to create a page load in animation to show you the difference between these even though they're almost exactly identical so with timing small block what we're going to do is add an animation here to make it go from the left to the right and we're going to start that at zero percent we're going to move that to 100 percent and 100 actually means 100 of the original block so I'm just going to create I'm just going to increase the spy in arbitrary amount it doesn't really matter we're going to say one thousand percent just to move it over to the right you can play with whatever number you want and by playing that you can see that it happens very quickly and we said the initial State for the move and I'm going to do it for the big block too so we can compare the two I'm gonna say one thousand percent I think that's a little a little too far the zero percent to start both of these squares are going to have a timing of one second and an ease if I hit play they'll both go approximately the same amount but they feel totally different depending on size so timing is really important because you can create a mood with it too so with the small block for example smaller things in real life tend to move faster than bigger things if you think of them in your head like a mouse and an elephant a mouse is going to Scurry across the floor at Max Speed whereas an elephant is going to sonder very slowly wandering swaying it's this big hunking thing so we're going to do instead is set the timing for the small one at 0.3 and we're actually going to increase the timing for the big block to 1.5 and again just feeling it out here but you're going to immediately get a sense of speed from these two the fast one moves quickly like it should and the big one moves slowly like it should remember small things should move quickly and big things should move slowly it creates a completely different sense of character now with timing cheap and timing expensive this is another one of those examples just like in squash and stretch we're just changing the timing on the scale can completely alter the way it feels so I'm going to create two different scales for each one one will be our initial and the other will be our end result and for our initial we're going to start with zero because we want them to be completely invisible we're going to scale them up to one so they're going to be exactly identical the only thing we're going to change is the timing between the two I'm going to give them both an ease and 0.6 timing I'm going to press play see both exactly identical now if we take the cheap one and we speed it up let's say 0.3 we leave the expense of one at 0.6 it feels a lot snappier a lot cheaper and if we take the expensive one and we increase that by double to 1.2 it seems to take its time it feels more expensive so just using timing will allow you to create these moods different characters using just objects I mean these are just simple squares and circles if you think about it so what can you do with cards buttons text images there's all sorts of things you can do with timing to give them character without using any other principle but I want you to keep building on those number 10 exaggeration the this is an effect especially useful for animation as animated motions that strive for a perfect imitation of reality can look static and dull while realism might not always be the goal in web design some degree of exaggeration can draw attention and making interactions more satisfying this could be as simple as making a button press more announced while realism might not always be the goal in web design some degree of exaggeration can draw attention and make interactions more satisfying this could be as simple as making a button press animation more pronounced in this example I have three different small animations and these are something you would see on a page anywhere but exaggeration is the key here again like I mentioned earlier it's easier to pull back from exaggeration than it is to add exaggeration so in this case I want you to start thinking about what can we add to things that already exist on the page so with a link how can we exaggerate an underline on the link something you see frequently by default it's easy we're going to add an exaggeration underline I have an exaggeration link item here this is a link block and I have a piece of text inside and then I also have an exaggeration links underline and if we look at this it has a width set to zero percent if I extend it you can kind of see where that's going and a height of 2 pixels I give it a color of flux light purple and the links have them as well and when we check this the mouse hover has a size and that's pretty much it I set it to 0.3 out Circ and I basically just set the width to 100 percent but the thing that's different about these underlines versus default underlines is that they're exaggerated versions of them they're thicker and they animate from left to right we can see that here and the beauty of building your own link blocks and making them exaggerated is that you can play around as much as you want you can increase these underlines to I don't know six pixels the more crazy they get the more character they get so this has a really thick underline to it but the exaggeration makes it pronounced it gives it personality another example of exaggeration is taking a disabled button what does that look like by default usually gray with dark gray text on it and you can't click it but how can we exaggerate that a little more dig deep on these things maybe we change the pointer to a no symbol to let them know that no you can't actually click this but I think we can go one step further by adding an animation to this in this example I've added a click animation to move left and right to basically shake like a head again I mentioned this earlier but I want you to start thinking of your own body when it comes to objects on the screen start imitating them what is something that you would do when someone says no you'd probably shake your head this is exactly what we're going to do with this button here because I'm doing it one REM to the right which is 16 pixels negative one REM 0.5 RAM and then zero and the reason I'm doing 0.5 Ram is so I can get a really light bounce effect at the end if I click play it shakes nicely and I only have it set to click once that way it always happens so I'm clicking it and the button is telling us no you know this is not usable you can't click this in two different ways it's got the no symbol it's got the gray text and it's got the shaking button lastly we have this image on a page and normally what you'd see is you hover on the image and maybe it grows maybe the image inside grows but the container stays the same but what is another way that we can exaggerate an image if you think about images in real life I mean think about the history of images I'm thinking immediately of a film effect so maybe that image goes from negative to color immediately on Hover and maybe like a photo in real life it'd be like a stack of photos so it would be slightly rotated so I'm going to start working backwards just like in our pose to pose Straight Ahead example I'm going to add a rotation here we're going to say minus 120. it's a bit too far let's say minus 35. and I'm going to give this a filter of invert and invert's not enough I also want it to be black and white so I'm going to change this to saturation and lower that down so this is going to be our default State we hover nothing happens right now I'm going to give this a hover and basically I'm just going to set this to the complete opposite so it's going to be 100 saturation just second the default it's going to be invert zero percent and with the transform I'm going to set this back to its default position of zero now when we hover it automatically flips to the correct one but we're missing that transition state so I'm going to transition and I'm going to say all properties otherwise I'm going to have to select each individual property just for this sample I'm going to set this to 600 milliseconds which is the equivalent to .06 I mean I'm going to set this to 600 milliseconds which is the equivalent to 0.6 seconds and I'm going to set this ease to ease out cubic we'll go for a new one this time so now when we preview the page the photograph rotates it inverts and it becomes full color just like exposing a real photograph in real life now one other way we can really improve this just one more time is maybe setting the transform settings so rather than rotating from the center maybe I want it to rotate from the bottom almost like holding it I know it's a bit off the page but you can play with the setting on your own time so now when I click sort of rotates up like a hinge so those are just a few examples of exaggeration it's important to take a few ideas from the page and imagine them in real life how can I take individual small properties of that particular element and make them a little wilder than they currently are really push them and exaggerate the individual elements number 11 solid shapes taking into account forms in three-dimensional space or giving them volume and weight the principle is about understanding 3D space that 2D forms occupy in webflow this can be represented by using shadows in perspective to provide a sense of depth and volume to otherwise flat elements in this example I have a set of three cards all in the same vicinity each one are 16 round by 24 REM and they are all position absolute so they're all one on top of each other and that's exactly what we're talking about when they say that they occupy the same volume in this example I have one single card container and there's actually three different cards in there but with the idea of solid shapes in mind what we want to do is convey that there are three cards in there still using the 2D space but making it appear 3D so what I'm going to do here is add a solid drawing hover in and I want these cards to separate when I hover on this so I'm going to select each individual card and I'm going to give it a move we're going to say that this one will kind of move as well I'm going to maybe start moving this see 10 20 30 percent maybe I'll move the other one minus 30 percent I actually selected the top card I'm gonna move this one minus 30 percent there we go so we can see all three cards now and I also want them to rotate because cards in 3D space are going to rotate if you held them in your hand for example so it's a really great way of thinking about it how would I do this if this was actually in my my real life I'm gonna say that this is negative 20. then for the other one can I add a rotate of 20. do the opposite so if we click play what should happen is these cards fan out and even though they're all solid shapes 2D shapes on a flat plane adding this animation of Fanning really helps but we can go a little further with this again I want you to keep thinking about these like real 3D elements how can we use exaggeration to help with the solid shapes let's say we have a filter on here blur maybe this thing blurs slightly when you hover on it almost like they're a little further back in space and we'll do that with the other one as well but maybe the blur will be less intense so we'll deal about one pixel for that one and two pixels for the other one and we'll give them the same timing we'll just select all of them and say 0.6 and we'll say bounce past maybe it'll have like a really cartoonish effect to it click play they Bounce Down and we can go one more step further right now they currently just fan outwards it has a blur but there's really no volume scale to it so maybe we can take this and add a scale element to the front card of 1.1 so this one grows upward towards the camera and again giving it the same timing as the others will say bounce past because we want to have that same effect and suddenly three totally 2D elements feel like they're in a 3D space just by adding scale rotation move and a little bit of blur number 12 appeal and this is by far one of the hardest ones characters real or imagined should be appealing and command the audience's attention appeal can be created with the design Simplicity magnetism Charisma or uniqueness of a character in webflow appeal can be achieved through the use of pleasing color schemes the use of typography graphic design engaging animations and interactive elements that have respond to the user inputs can also add appeal so this one's really hard to demonstrate because it really just relies simply on being a good designer making things look really nice in this example I've created a heading 1 and a heading 2 with a button this is what you'd find in a normal landing page and I've added some things that make it look more appealing so rather than adding a flat color to the text I've added a nice linear gradient and rather than doing the same thing with the button it also gets a gradient and when you hover I've added a light glow to it so these are things that you would normally find in a flat environment but I've added just a few small tweaks to give it a peel to make it look like you want to click it in addition in the background there are these giant scrim circles and if I delete the scrim as a background blur you can see that there's nothing special about them they're just red blue and yellow and all they do is have a background blur over the top I've created this really nice effect on the actual right panel called appeal Mouse over and again there's nothing special about this all I've done is set the scrim circles in the background to move so for example this one moves negative 20 percent and then 20 on the X so when I actually hover over it you can see that these things move up and down left and right depending on where you're hovering over your mouse and I've increased the smoothing to 100 because I want it to be almost imperceptibly animated so I've previewed the page and I hover we let it sit for a little bit you can see that those circles slightly move and this adds peel to the page it makes you want to click around things it makes you want to explore and that's the entire point it makes you want to explore the page I believe that you should design a page first to be structurally sound have proper headings proper syntax and then animate afterwards but the animation shouldn't just make it look nice it should enhance the entire thing it should make you want to interact with the entire page the entire point is to stay on the page and keep the user there not just solving problems but bringing them real genuine delight and you can do that through appeal and applying all the other principles that we've gone through so far what I want you to do is download this free clonable and give it a shot start with principle number one and apply that to your current designs and watch it transform from something amateur to professional with little to no effort and then start applying them day by day each principle adding to the last and watch how you grow exponentially and become better than all of your peers but hopefully using these principles will earn you more money more respect and maybe get you on an award side or two if you found these principles helpful at all let us know leave a comment like the video and subscribe and good luck applying these principles to your own designs

Channel: Flux Academy

Views: 23,477

Keywords: become a web designer 2022, freelance web designer, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy, become a web designer 2023, Learn to build websites, how to make money building websites, how to build a design agency, webflow, framr, figma

Id: 8QfVLNvojSs

Length: 53min 9sec (3189 seconds)

Published: Thu Jul 27 2023