Create Stunning Animations With Webflow (Crash Course)

creating cool unique animations in webflow is one of the key appeals of actually learning to use this tool and in this video we're going to learn some of the most common animations and interactions things like loading animation text masking and horizontal scrolling now we'll be using this very cool Architecture Firm website to learn how to do these things and if you want to follow along with me you can clone this project below this video and then build alongside with me now one note before we dive into the video this video assumes that you already know how to build so we're not going to really cover layout and actually building and structuring the whole website if you're not comfortable about that yet then I think a good place to start is our free one hour Workshop that you can sign up below that would cover doing the layout and structuring things right now we're just going to dive into the animation part of things it's going to be super fun let's dive into it okay so let's cover what we're going to be building first of all we have this loading animation the logo Fades doors open and then we have this heading that is coming out from behind some kind of a mask we have this button animation which is basically a variation on the concept that we're going to do here with the heading and then we have here this hover animation you might be familiar with this it's now super trendy and popular in portfolio websites and here we have a bunch of interesting things happening at the same time so first of all the images showing up it's also following my cursor we have the arrow here that is being filled and this stuff here that moves the text that actually moves and then finally we have this here we're moving from the normal scroll into a horizontal scroll and not only that the images are also kind of scaling and fading out as they're getting to the edge of the screen so before we go on and Tackle how to create these very cool animations I want to make sure that we are all on the same page and you understand the basic concepts of animation and how they work within webflow so I've got this demo file opening here super basic with two divs just so that we can play around with them so what is animation basically it's you know some property is changing over time right it can be the caller it can be the position it can be the scale but it starts at some place and then it changes over time so let's see how we can create this let's say that when we click this we want this to move around or something is going to happen so to create an interaction we go here into the interactions panel and we add a trigger so in this case we want to make sure that something happens when we click this element and so I have here we can Define two clicks so the first click is let's say I want this to move somewhere now we have a bunch of presets here but let's create our own animation with start and animation and then let's call this uh animate box so now that we have the box selected from the add button here we can actually choose what kind of property is going to be animating so in this case let's try to move this around so now we have this move and we have this warning sign here because we haven't defined anything right so let's play around with the move so we have a few axes here let's move it around you know the x axis and maybe the y-axis as well so now it's going to move from its original position into this new position which is minus 210 and minus 218. let's play this around and you can see that it's animating now it's animating in kind of an ugly way because the form in which it's animating the speed in which it's moving is called linear and what does that mean this whole thing here that's called easing super super important now here's the idea nothing in real life just moves at a steady speed think about this you're getting into a car you want to you know drive very fast you don't move from the car standing into moving very fast immediately and then you stop back to zero back again no you Accelerate from zero to a very high speed and then when you want to stop you decelerate back to zero otherwise it's going to be quite weird which is what's going on here it's moving from a speed of zero into very fast and then immediately stops this is not natural so we have a bunch of ways to describe this acceleration and deceleration and this is basically what we call easing now you see you have a bunch of stuff here how do you know what to choose now here's an example that basically shows you how each of these things actually look right so all of these are examples of the circle moving 500 pixels over three seconds but you can see that sometimes it start off slow and accelerates and each of them is actually moving differently right so you can by the way Google or we will link this easing in webflow and then you can understand basically how each of these easings work so let's try something like you know easing is out is in is out which means it will accelerate and decelerate let's preview this now you can see that it's accelerating and decelerating it's very kind of like fast it's happening very fast let's try this in out cubic so now you can see it it moves a little bit more natural okay of course we can animate other properties besides the move right we can you know rotate this as well now let's say that we're rotating a little bit let me undo that and rotate this way now note that we have two elements the first one is the move and then the rotate if I'm going to hit play you're going to see that it first moving happen and then rotation happens so we have one two so this is a sequence if I want them to happen together I just drag this to put them all together and now you'll see they'll actually be animating together this is really important and we'll be doing a lot of that throughout the video okay so now that you've got the basic you understand how to animate how to create a trigger that will cause the animation and how to set the easing right and the properties now basically you know everything you need and now it's just about applying these very simple Concepts um creatively to create all the effects that we're seeing here now let's break down what's happening in the loading animation so first I have the figma file here that I would use to build this and I just put this here just so that we can see basically what we want to happen so imagine that we have the website here and on top of it we have a layer that has these two separate kind of like blocks right and the logo so first I'm going to decrease the opacity of the logo so this is the first thing that we want to do and after the logo has been disappeared basically I want to kind of like open up these doors so basically what's going to happen is we want to scale the size of these elements from taking half the screen this is going to animate back to zero and this one from Annie taking half the screen it's going to animate into Zoom so basically we have two steps here right Fade Out the logo and then open up the doors by First Property will animate is opacity and then we'll animate the size of blocks so I've got the project here without any animation and let's see how this is structured so you can see here that we have the page and everything on top of it and then we have another div that's currently hidden that is the overlay for the page load now it's currently hidden so that we can actually see the page but let's turn this on so that we can see what's in here right so I change the display into flexbox and again I'm not talking about how we build this and why it's built out this way if you want to understand more about the structure and layout do the introductionary workshop but basically what we have here are three elements so we have elements for the left side and then an element for the right side each of them is 50 in width and then on top of them we have the logo now the logo is on top of them that happens because it is positioned absolute and that means that it is on top of what's going on you know in the Vive itself also this page load overlay is also so positioned fixed and has the Z index of 2000 so that it's above everything else on the page right so the page wrapper so the page load overlay is on top everything that's on the page and the logo is above everything that's on this overlay thing here okay so we have these three elements let's try to animate them now first of all we're going to hide this back again because basically we don't want to see this otherwise it's going to if we always have this visible it's going to vary be very hard to kind of work with the website that's why we always keep these uh loading animations hidden display hidden so that you know we can keep working on the website and this loading animation is here so how do we create a loading animation we go into either interaction panel and what we want to add is a page trigger that's page load so this means that this animation is going to trigger immediately either when the page starts loading or after the page finishes loading so in this case we want this to trigger immediately so let's create an action when the page starts loading let's create an animation and I'm going to create a new one I'm going to call this load animation okay so what do we want to happen now first of all we need to make sure that we are actually seeing this element because we can't see it right now right so what we're going to do is I'm going to make sure that this one is selected and what I want to do is I want to change the hide show and this is basically animating the display property right so I want to move this back into Flex so that we can see this and I also want to make sure that I click this set as an initial State this means that when the website is loaded it's going to ignore the fact that we've hidden it right just so that we can keep working in webflow and it's going to address it as if it was visible to begin with so this is how the website actually going to load so immediately people are actually going to see this okay so first thing that we wanted to do was to animate the logo so I'm going to click on the logo and then I'm going to add an opacity animation right so we're going to change the opacity to zero and I'm actually going to put here a delay of 0.1 because if I don't add this immediately as you know people the website is going to load immediately the logo will disappear we want to have a slight tenths of a second that people can actually see the logo read the name of the company and then we're going to animate it down and let's set the duration to 0.8 of a second so let's preview this so you can see people can see very shortly the logo and then it's kind of like fading out after it's fading out now we actually need to change you know to animate the doors okay so I'm going to make sure that I one of the doors is selected and I'm going to edit I'm actually going to animate the scale of it right so after this happens we're going to animate this and let's change this to zero okay so it animates into zero and we can do this over 0.8 seconds let's see what happens when we're animating this now note it's animating and it's scaling both the X and the Y and I don't actually want this I only want it to slide so let's break down this lock and let's actually reset this so it's only animating the x-axis into zero and let's do this and it looks good but again linear is we're probably always going to avoid linear so let's do the in Quint which is just going to start accelerating we don't care we want it to finish very go out very fast so we just want an initial Fade Out so this looks great now we need to do the same for the other Dar and here we can just duplicate this make sure that they happen together and we're going to change the target from this door to the second one so just clicked on it and it should basically be working let's play this anime doors opening fantastic now we're almost done and this is one part where a lot of people can just forget about it we also need to hide because if we're not hiding this page overlay we still have something that's invisible but on top of everything else and people won't be able to click buttons or select text or actually even scroll so we must actually hide the overlay after this happens so let's pick that up select the page overlay wrapper again and let's make sure that we hide it this actually needs to happen at the end so display set back to uh hidden nobody is going to see this and so we need to make sure and this happens immediately right so duration zero so what happens is first we're seeing this and then the opacity goes down doors opening and then the whole element is hidden and people don't even know that it ever existed and we can continue into the next element so now we have the loading animation now it's it's a good place to actually continue in doing the next animation which is the text going up um from this interaction again because it happens immediately after it so let's talk about how this happens what do we want to animate right here so again let's jump into the figma uh just so that we can basically explain what we're trying to do here so we have a bunch of text and we want to find a way to mask it so basically what do we need we need a mask around this text and then we need to make sure that you know they are masked so that when we move the text around you see that the The Mask will basically cut off the text right so this is it's going to be below and then it's going to animate up so this is basically what we're trying to create in webflow now how do we create masks in webflow I hope you know this by now it's by wrapping up the text so let's see what we have here um let's let's basically just go here because I want to show you how it's structured so here in the actually the text you can see that we have the heading text but it's wrapped inside a header link mask it's basically just a div and the only thing that's happening on this div is that its overflow is set to Hidden this basically means that if something specifically the text is outside of the size of this div it's not going to be visible right everything that's overflows outside of this div is going to be hidden so if I'm going to pick just a text here and I'm going to go here below to transform and just move things around so let me just move this around you can see what happens as it goes outside of the div it's being kind of like masked and this is actually exactly what we want to do so let's go ahead and do this and let's go back into our animation so load animation and so that happened this is great now we want to animate the text so I'm going to select just the header text not the mask itself but the header text that's inside the mask and first of all I want to make sure that when it happens you we don't see the text so we need to set an initial position where it is kind of like down below so let me go ahead and add a move movement and I'm going to move it something like 120 percent below right so a hundred and twenty percent it moved it down below right and I'm going to set this as an initial State okay so now this happens and now I can animate it going up so let me duplicate this and take it after everything happens and let's see how we are going to animate it let's say that now we're animating back to zero over maybe 0.6 second um and let's do out cubic um let's see out cubic because now we want it to arrive fast and then kind of like slow down so let's preview this whole thing and oh you saw that now it came up right so this is great it's animating we need to do the same for the second line and it's going to be very easy to just duplicate what we have here so let's duplicate this one also as an initial state but let's change the Target and pick the second heading move that down as well and let's take this and duplicate that one and change its Target to the second line now what you can see here is that this is going to happen and then this is going to happen now this is actually too long of a gap right we want this to start happening while this is happening so I'm going to put them together but now they're actually just going to go up together so for the second one I'm going to add a little bit of delay maybe 0.2 second let's see how that would look so moving now you saw that it's happening a little bit afterwards right let's trigger that again and they're going so basically we have it you saw it was very simple but there's one more thing that I want to add here which I think can be pretty cool I think that we sometimes there is this effect where it kind of comes up letter by letter right and we can do this but it will take so long but we can kind of fake this if we kind of like skew the text and then bring it up right let me just go back here um outside of the animation and let's try this if we go here into the text itself and we're going to go here into the transform and we're going to skew um maybe skew over the y-axis so something like this so if we skew this first the left side is going to come up and only then the right side if we're going to animate it back the right side is going to come so I think this will make the animation look a little bit more cooler so let's go back and see how we add that it's actually very simple and we need to basically do the same thing that we did for the move we need to set an initial position and then animate it back to zero so from a little bit skewed into not skewed so let's see that we're picking the first sentence let's go ahead and add a skew and let's say that we want to skew this um maybe four four degrees something like that and uh and then let's duplicate this and when it's animating back let's say that we want to skew it back into zero same thing that we had the other in the other animation 0.6 no delay on this one because they happen together with the first heading and let's do out cubic let's preview this so now note it was happening very fast I think maybe let's let's make the animation longer just so that you can see it let's make it 1.2 seconds I'm going to make everything slower in reality you don't want your animation to take so long because people will get bored and we don't want to board them with animation but just so that you can see what's happening you can see that it's coming up skewed and then it's animating back into position and it's really really nice so let's do the same thing for the second headline let's duplicate this let's start from let's change the target to the second heading so this is starting from a skew of four and then skewing back let's duplicate the end position and then change the Target and add a tiny bit of DeLay So it happens along with the second heading and let's see that it happens and now it's great now it's a little bit slow but I just wanted to demo this to you all right so with that we've got the loading animation done and we've got the mask text animation done let's see what happens here on this basically on this button so in the button basically you can see that we have the same principles that we had before right the letters themselves are broken down into basically it's the text and then each letter is wrapped in a span so you can wrap it in a span like this so that you can give it a separate class I'm not going to redo this because you basically you should be able to understand what happened right so this each letter has its own class you can see here cc2 uh cc3 so that basically and they are all within the main CTA tax mask so now you can start animating letters up when you do the hover animation now actually here we have something interesting we have the text two times so these letters going up and we have a duplicate of the letters that are hidden below and they're going up so that looks like the letters are kind of like rotating and create this very nice effect so basically using the same method that we have created above quick break to say that if you're feeling like you're overwhelmed you've got questions you're not sure why things are not working out properly please consider joining the webflow math class which is our full-on course taking you from the beginning all the way to somebody who can build full-on website like you're seeing right now and has our coaches supporting you and answering all of your questions so check that out let's go back to the video okay so let's go ahead and now create this hover animation that we have here let's break down what's actually happening here so first of all something very simple happens this whole element gets a background right and the these texts are being kind of like pushed to the side so this is really really simple and we don't actually even need an interaction for this this is very very basic so I'm going to choose one of them it's called expertise item and I'm just going to change here from the selector into the hover State all right so this basically defines what happens when you know I'm going going over this element with my cursor so the first thing I want to do is I want to change the background color and let me copy the the color that I want to change here which is basically you know some kind of a very very transparent gray all right with a very low opacity so this is what I want now if I go back here and I just go over you can see now it's getting a background now it's not animating yet we'll fix this in a second but the background for this element is changing now the other thing is we want to we want the text to be pushed around a little bit so what we're going to do is going back to the hover State we're going to add a little bit of padding so let's add you know a little bit of padding like this to the whole element and now going back into it I can hover now you can see that it's changing the background color and because we have padding it's being pushed around now how are we going to animate this let's go down here when we're back in the normal State the non-state we can scroll down below here into the transitions right so in the transitions now we can pick what is animating so in this case what's animating is the padding and let's do 300 milliseconds of transition so we want to animate this over 300 milliseconds the other thing that's fading is the background color so let's choose the background color also over 300 milliseconds and let's preview this and now you can see it's just fading and transitioning smoothly so this is very very cool okay so let's dive into the next thing that we have here which is basically the images showing and the text is changing its colors alright so let's start with the image and then take care of the arrow so the image how is the image structured so you can see here that for each one of these expertise items from going to open it up we have the text of course but we also have this image in this image currently it's hidden right I can put it as display now you can see all of these images but they're hidden and they are set to be positioned as absolute so that they are outside of the normal uh you know state of things they're not taking up space inside of this whole expertise item they're just on top of it okay so again if you want to learn more about absolute positioning and how it works check our intro Workshop but basically this is how we position it on top of the navigation itself or the the item itself and now it's just hidden so basically what we need to do we need to add an hover animation and just make sure that it's shown so let's get let's go ahead and do this I'm going to select this expertise item I'm going to go here and I'm going to create oh my God I already have this mouse hover created let me delete this and recreate this right so I've already created it let's recreate this so now that it's I'm going to add a mouse hover interaction now for Mouse over we actually need to Define two different animations what's going to happen when I'm hovering on top of it and what's going to happen when I hover out which is usually just a reverse kind of Animation so if it's it's now showing the image the opacity is going from 0 to 100 when I'm going to you know hover out the opacity is going to go from 100 to zeros something like this so it's going to be easy to do the hover out let's start with the hover in so let's call this hover in and what do we need to do so first of all the images is not here so we need to make sure that we see the image because right now it's hidden right so I'm going to select the image and I'm going to go hide show we've already done this before in the loading animation I'm going to make sure that it's set to display immediately however now that it happens I don't want it to just show up on my screen I want this to fade nicely so let's make sure that before we're showing this the initial state of this element is that it has an opacity of zero so let's make sure that the element is chosen and going to go into opacity and going to put it down to zero and make sure that I trigger the set as initial state so now before the animation even starting the opacity is zero and once I'm hovering immediately it's being shown but I can't see it so now we need to fade it in so let's do let's duplicate this and put this after the hide show and animate it back into a hundred and we can do this over let's see how long should we do this transition maybe 0.3 I don't know let's play this okay so now the image is Trend animating from opacity 0 to opacity 100 over 0.3 second so this is great this is what we wanted Okay so that's great before I'm going to do the hover out let's talk about this arrow and how to animate this now you may have noticed that this arrow is actually not an icon it's actually a text it's actually an embedded code right um and it's actually a code for an SVG icon so why didn't I just brought in an image of the arrow and edit it here why did I edit as code now here's the thing because currently webflow does not allow us to natively change the properties of svgs um so it would just be a static icon and then maybe I need to fade out between two elements but if it is code then I can do something very cool which is defined that the feel of it is the current color which basically means that you know it's going to pull its color from the color that we have here so right now the color of this expertise icon is white but if I would choose it to be blue for example you can see that the code basically pulls the color from here right so I'm going to keep it this way and by the way you don't need to know code basically you can go into figma right and you can just go here select this and maybe export it as an SVG right so let's call this Arrow SV on my desktop and then basically just open this up in some text editor let's do text edit and now basically I have this code so now you know I can just copy this and add it into an embed element that we have here embedded code now the only thing that I did was if you go ahead and read the code that we have here you can see that the stroke is black and that's everything that we have here we don't have fill right [Music] um so the only thing that we changed here in the code is basically put in fill equals current color so this is the level of code you need writing field equals current color with a Capital C and then basically we'll pull it from this typography color which now we can animate so let's go back here into our animation hover in and let's select this icon and let's change the text color so the text color is going to change into black right and I want this to happen actually together with the image showing also 0.3 0.3 in terms of the duration so now you can see that it's animating Fading Into black now this is great let me save this and now we need to duplicate this as the hover out so let's go ahead and select an animation but instead of just choosing the hover and I'm going to duplicate this hover in two let's actually call this hover out and what we need to happen here is just the other way around right so first we need to animate from back to zero right the opacity of the image needs to transition back to 0 over 0.3 and then the text color needs to fade back into this white smoke white smoke that we have here over 0.3 and then we don't need this the 100 we can delete this and then the high show at the end so after we have faded the image out we also want to hide it so people you know will not be able to click it so let's just bring it back to display none so now it's fading out now we can't preview this because we can't see this right now but let's see the logic here so opacity is fading to zero text color fading back into white smoke and then the image is being hidden let's test this out see if it works so now it works and it's really great so this interaction works but the one thing that we do want to add here is the fact that it's going to follow my cursor around so let's go ahead and add that to add an animation that basically follows my mouse I'm going to choose the expertise item and I'm going to add a new um kind of interaction trigger that is called Mouse over element and you'll be able to see this new icon which means continuous interaction this means that we're not just picking point a and point B and animating between them but webflow is basically going to interpolate the animation all the time as our mouth moves let's see how that works I'm going to add a new animation and you can see let's call this mouse animation you can see that basically we can animate over the x-axis of the mouse which is basically left and right and over the y-axis which is up and down in this case we just want to animate the left and right of the image so actually to be able to see the image let's make the image visible so let's go back here choose the expertise image and make it visible at least temporarily so that we can see what we're doing here let's go back into the hover animation and let's pick the image and animate it so let me select the move and as you can see webflow automatically added basically two points so what happens the position where the x is equals zero which means all the way to the left and 100 which means all the way to the right so let's start by you know defining these two positions so it's all the way to the left we want the image to move a little bit to the left so I'm going to drag the x-axis to the left and here on the right I'm just going to drag it a little bit to the right and I can't see anything looks like nothing happened and to see this we actually need to turn the live preview on and now you can see as I am moving my mouse you can see this right this uh green thing here which basically indicates where my mouth is in the animation and the animation goes moves you know as this my cursor moves over this element not when it's moving outside of this element just when it's on top of this element so basically that is it it's very very simple the on the last thing that we want to do here is just rotate maybe a little bit so let's add a rotation as well just a tiny bit of rotation maybe just like a few degrees like minus three or something and then duplicate it also to the other side where it's going to be like seven or I'm just randomly picking numbers and let's see how that looks yeah so now it's rotating to this side rotating to dating to that side that looks fun all right so this now works now here's something that's really important that we didn't talk about before so actually two things that I want to talk about number one this the hover animation that we did here we need this thing to happen on all of these elements and I don't want to apply it four times so I want to make sure that the hover animation is happening not just for this element but for the whole class so every expertise item is going to get this interaction this is really important okay and the same thing I want for the mouse over element I want this to happen for all the classes let's go back and um hide the image because we can't see what's going on and let's try this right now so now it's working for all of them and it's also animating and moving as we're moving now there's one tiny little thing that I do want to do here and that is note that as I'm moving outside it kind of jumps back into the original position because the hover interaction only happens on this element so when I'm outside of this element it basically goes back to its original position and it jumps very fast right now so we can change this by if we go to this expertise item and go here into the mouse over element we have this smoothing thing and if I'm going to take it all the way here to almost the top and I'm going to preview this now now you'll notice that as I'm taking this outside it kind of slides back to position much more smoothly and slowly so it feels much more premium and nice when things are kind of like slow and steady this way I might have overdone the rotation a little bit on this example but anyway it's pretty cool okay with that said we're ready to move into our last example here which is the horizontal scroll so first let's talk about how we are even thinking about horizontal Scrolls because you know people only scroll down right we don't have the function of scrolling horizontally so how is that even working so let me jump back into figma just to explain this again so what really happens is that this whole section is actually very very long okay it's very very long and as as people scroll around what we want to happen is two things number one we need this whole section that we have here all of the content to scroll around together with it and we can do this by using the sticky position and again if you're not familiar with the sticky position and all of those go go into the introductory introductory course but what we want to do is we want to make sure that this is sticky all the way until the end of the section and then we can continue into the next section and then basically what we'll do is we will add an animation that does something while we are scrolling so a continuous animation just like the one that we did for hover we have another one for a while scrolling interview in View and basically what we'll do is as we're as you know the people are scrolling undo scrolling we want this to start moving as they're scrolling more it will move more and basically move that around so this is basically the logic of what we'll try to build right now so let me go into webflow and show you how this is structured so in here in this section basically we have this wrapper which is called projects content wrapper and if I'm going to go here you can see that its height is set to 400 vertical height so 100 vertical height means the full you know length of the screen so 400 basically means four four times of scrolling four screens of scrolling and now the thing that we have inside the this element here right the the projects list is set into position sticky okay and you can see that here position sticky what that will do is as I'm starting to scroll you will see it's it's going to stick here to the top now I'm scrolling note here the scroll bar I'm scrolling scrolling it looks like nothing's happening but actually the background is scrolling there's a bunch of very very long background and it's scrolling scrolling scrolling scrolling until we get to the end of it and then the sticky position is being released and then we move on to the next section okay so this is what's happening right now without any interaction now let's see how we're going to add an interaction so the element that we want to add an interaction to is the projects content wrapper this is the very long wrapper this is like the the thing that holds this whole thing here because that's the thing that's scrolling in the view while all the other things are just stuck in the view so let's add an interaction to this let's add while scrolling in View and add a scroll let's call this scroll interaction and you will see that it looks very much like the uh what we had with the mouse where zero where it's just starting to scroll and then when we get to the bottom of it things will move so let's pick the first image and I'm going to choose this image wrapper here and move that around so let's define that at the beginning it's going to be in this exact position so let's do zero I'm going to use vertical width here just to define the position so I'm going to start from 0 and by the end of it it's going to be at minus let's say 79 vertical width so it just moved let's preview this and see if that works and I don't want to affect all the class just this single element right so let's see this now it's as I'm scrolling in it starts moving the reason that I'm animating them separately is because I want to Define exactly when this starts to you know fade out and it's going to be different for these people so um it's working but it's kind of weird because it's you know as this starts scrolling you can see that we're already scrolling it we're already animating in and I actually want this to only start happening when we're at this position so I can save this and I can go back here and you can see that the animating animation boundaries is zero is with the element starts entering and actually what I want to do is I want to make sure that it starts animating only when it's fully visible okay so let's go back to the scroll interaction and let's preview this right now and see now I'm starting to scroll nothing happens and now that I'm getting only getting here to the fully visible this is the zero and now it will start moving so this is great so now it's animating out and uh yeah this is great so the other thing I want to do is I want this to scale a little bit right so let's add another scale um to this image wrapper so let's put scale at the beginning scale is you know one and one that's great one means a hundred percent basically original size zero means you know zero two means double the size right so let's start from one let's duplicate this and at the end of it let's say that it's scrolled into maybe I don't know 0.9 or something like this let's preview this right now so now you can see it's going down maybe it's two let's do 0.8 or something so we can see it more prominently getting smaller note there are all getting smaller because this is being applied to the scale is being applied to everything effect interaction just a selected element right not everything else so just want to make sure that only this is starting again these are why are they scaling I don't want them to scale just this thing needs the skill oh because I chose the the content wrapper at the scale let's change the target to the just the first item and this one change Target to just the first item okay so I was targeting the wrong thing I just want this single element to start scaling let's preview this now you can see it's scaling it's the only thing that's scaling that's great so we're getting here this starts moving and fading out how did it make it fade out also let's add the opacity so opacity going from 100 to duplicate this to when we get to the end maybe like 30 or something like that let's preview that so it doesn't completely disappear just Fades out a little bit now you can actually see that you know by the time that we get to 36 percent or maybe like 50 we can't even see this anymore so it actually doesn't make sense I mean we should probably bring the opacity to maybe 50 and maybe the scale as well to 50. if we want all of this to actually happens you know by the time that we get we can still see it okay so now this makes sense okay so now this this is a good animation now we can start doing the same thing with the second element so let's pick the second element here which is second Element no this one second element second item actually oh no I've made a mistake look I've I'm only moving the image and not moving the the name of the hotel and all of that kind of stuff so I actually need to animate project item instead of the Project image let's change the target to everything here to item scale change Target to item not project item opacity change Target project item this as well change Target so as you're animating you will make these types of mistakes as well but it's fairly easy that webflow gave us the option to change Target so no this one not project list nope just item okay so now let's see what happens now it's animating what happened now there I've selected the class no justice element okay preview this again okay now it's animating together with the text now it's working properly okay so now we need to start doing the same thing for these things and let's try the duplicating things so let's duplicate the move duplicate this change Target let's pick the second item let's take this one and let's duplicate this let's change the target to this one and see how that looks so now they're moving together okay so now no now we want to add this scaling and fading out but we only want that to start triggering when it gets to about here about the 50 percent so now so these things the opacity and scale let's duplicate these things duplicate and change Target to I'd a second item we only want them to start here so at the 50 almost 50 percent there's still a hundred right and um let's do the scale duplicate the scale change Target to the second item and then move that one here and then let's duplicate to the end and in the end it's going to be maybe 0.8 and duplicate whoa whoa what did I do duplicate again with maybe 30 percent so the first the first element is basically fading out from 0 to 50. the second element is basically fading out from 50 to 100. let's see if this actually works one thing that you want to make sure before you test this out to see that it actually works is because we're animating them separately you always want to make sure that what you're animating affecting is the selected element and not the class because otherwise they will start reacting all together so in this case everything that we're doing affecting just this element and not the class because by default it's class and it can mess things up so let's test this so right now first one scaling second one starts to scale when we reach 50 and that's great all we have to do now is do the third one so let's go ahead and actually I'm not sure if it's going to be just simpler if we just do animate instead of duplicate so we want to move this not class as you can see by default Justice element from zero vertical width to duplicate around here to minus 79 vertical with width not weight I'm not sure why I said this so now this moves alongside with them and this needs to start scaling this actually does not scale at all it just gets here and uh that's it so it just gets here so the only thing here that needs to change is you can see that the text here is actually black so once we get around here maybe around 25 this text should be changing to White so that we can actually see it so let's go ahead and actually pick this one the client name let's add text color and let's change it from if it's down at zero so at zero should be you know white or should be actually black and then when it gets duplicate when it gets to not 45 I want to manually change this to someone like 25 so when it gets to 25 let's change this to this smoky white and let's see if this actually works so now it's black it's actually it's actually starting to fade in 21 right so it's actually what we will do is only start triggering the animation at 26 and then animate it very quickly to this so let me see how we're going to do this I'm going to duplicate this and then the first one I want to make it at let's say 23 so it's 23 it's still going to be black and then it's 25 so this happens very quickly it's going to change to white smoke let's see if this works yep so now this works okay so now we need to just duplicate this to this element as well so let's duplicate change the target to this one and then duplicate this one where it's white duplicate that and change Target to this one this one let's preview this nope it's not fading again maybe it's the class thing that's happening here we only want to affect this element so this is from Black to White let's do this maybe it's not fading because I have not defined oh first of all this is not the same element this one needs to be this one I was just project and this is text text and this one is not class element all right so now I'm affecting both of them okay and now they're happening together so as you can see selecting the right element and making sure that you're affecting the right element is key and a lot of kind of like weird things can happen when you're doing them okay and with that we've basically concluded this interaction and uh yeah everything that we wanted to cover in this crash course on webflow animation I hope you had a great time and you've learned a lot with us let me know in the comments below if this was helpful what other webflow videos you want to see on our Channel and I'll see you on the next video peace out [Music] foreign

Channel: Flux Academy

Views: 104,116

Keywords: webflow, webflow tutorial, webflow animation, animation tutorial, webflow course, website animation, web design animations, web design, web designer career

Id: mU0h6PG3j8Y

Length: 52min 19sec (3139 seconds)

Published: Fri Sep 23 2022