Webflow Scroll Animation Tutorial (Fundamentals, Reveal on Scroll & Parallax)

hi fellow web flowers so you're quite new to webflow and want to enhance your website with some fancy scroll animations in this video I show you all the basics you need to know and how to apply different animation types to your website after understanding the basic concepts of scroll animations we will dive into the following examples how to animate text like this and how to make cool parallx image effects like this so let's get into it so here's the fundamentals and they are actually pretty easy each scroll animation has a trigger an action and a Target this is the element to which the action is assigned to or in easy words the element you are animating the trigger can be an element that Scrolls into view or through the viewport this this is an example for scroll into view animation each of the images you see is a trigger for the animation and at the same time also the Target and here you can see a while scrolling in view animation the trigger is the parent the action the growing of the video and the target the video so the big difference between both is that scroll inter view animations have a certain scroll position where where the animation starts and while scrolling in the view animations happen while you are scrolling up and down the website oh and by the way if you want to become a top-notch webflow developer then you should subscribe to my channel um I share frequently new videos like how to structure your project or improve your workflow and serve your clients uh a better way than the average so let's have a look at the interaction panel before we dive into uh the animations itself for this I have prepared a little example we are going to animate this Square here so to create an animation at first you need to select your trigger in the designer depending on the kind of Animation this is either the element itself or any other element so let's select the square and then click here on interactions now you have two categories of triggers to choose from element triggers and Page triggers element triggers are stuff like Mouse clicks on elements Mouse hover over elements Mouse move over an element to animate something on the um X and Y AIS or uh when an element is scrolling into the view or while it is scrolling through the view and Page triggers are Mouse moves in the viewport to animate an element on the X and Y AIS or while the entire uh page is scrolling or to start an animation when the page is loading or when the page is scrolled up or down for my example I choose Mouse click on elements so the next you will see is you can choose an action on the first click and another action on the second click this option with the second click you would choose if you have an hamburger icon that becomes a cross on the first click and becomes an hamburger icon on the second click when you open and close a menu um if you select an action you can choose between readymade standard animations and creating a custom animation let's choose one of these readymade ones and see what is happening when you click on this button you can see the preview of the fade animation and here you can choose either a fade in or a fade out on this slider you can set the delay for the animation so if I choose fade out and turn on this preview mode here you can shake your animation now when I click on the Square it will fade out furthermore you can find here some trigger settings you can Define on which break points you want the animation to happen and you can decide either the animation is attached to an specific element or to a class the class option is very handy if you had a lot of identical elements on your page and you want them all to have the same animation an example of this is for example an AQ layout uh with these accordians you click on one and it opens and you click on another one this opens and the other one from before closes this can be done um with something like this so when I choose class and duplicate my Square the animation is automatically applied to each new Square that's the magic uh with the class option and check how beautiful this is lovely let's delete one square again and give the other one another color and adapt the shadow so the problem with readymade animations is that they are pretty limited you can't apply more than one at a time to an element or class and on the fade animation for example I can't change any variables like the duration or the easing and here custom animation come into play with custom animations you can do almost everything in this box you will see all your existing custom animations but we haven't create one yet so that's why it's uh empty I click on the plus icon to create one and name it something like crazy Square animation okay next I can Define actions and here you need to know that at first you have to choose the element in the designer you want want to create an action for uh so if you want to animate the green square I need to select it um now I can choose something like move from the actions drop down most animations have two statuses a start and a final status so this is my start status and here I want nothing to happen that's why I can choose zero delay zero duration and here 0% on the x-axis I could also check this to set it as an initial State uh with a right click on the action I can duplicate it and this is my final status here I can move it by something like 400% on the x-axis I can set a duration like 2 seconds and now I can preview the animation by clicking this button ah wonderful but you will notice the animation doesn't look natural um normally objects accelerate and slow down down and here easing comes into play you can set your custom easings here but I use 99% of the time uh the presets so for example I can choose ease out and if we have a look at the preview you will see that there's uh no acceleration but at the end the square slows down you can choose something like ease in out if you want the square to accelerate and slow down um or you can choose something more Dynamic like inout core and if we now want to preview our entire animation we save it choose here element and turn on the preview mode remember that our trigger is the Violet square and that we applied the animation to the green one that means when I now click the first Square the green one will move ah what a beautiful animation let's get back to our animation because there's a couple of more things to discover so down here we have a lot of options in the first first drop down you can choose if the animation affects the class or the selected element interaction trigger here is only available when the trigger and the action are applied to the same element so in our case if I wouldn't animate the green square um but the Violet Square most of the time I choose class over selected element because each time you copy the element the animation gets also duplicated in the background and this will just blow up your Javascript file uh for your website and here you can choose between different options to understand them you need to know that the options are about the hierarchy in the HTML document all elements with this class means if I click on the Violet Square all green squares will animate at the same time or I can choose only children with this class what means that the green square would need to be in the Violet Square to have an effect only siblings means that the Violet square and remember the Violet one is the trigger we need to click and the green one are siblings that share one parenti uh only parent would have an effect if the Violet Square would be within the green square okay was that um clear enough maybe next time I should draw something like this um but I think you will get it I hope so um yeah but anyway and now let's pimp our animation a little bit um let's select the green square click on the plus icon and choose rotate I'm dragging the rotate action and drop it on the initial uh move action so it also becomes an initial State now I duplicate the action and drag it on the final State here I give it a rotation of 360° on the Z axis this time and notice this little warning sign here uh this means the action has no value applied we need to give it a0 degree on the X on the Z axis and the final State I give a duration of 2 seconds and easing of um let's choose in out quart as well um but what if we want to Loop this animation for this I'm selecting both final states by holding shift while I click on it it with a right click I can duplicate them and now I can adapt their values we Mo move it back to 0% and also rotate it back to 0 degrees and what we see when we click the play button is one iteration of the animation to Loop it we have to click save and then check here the loop option now when we turn on the preview mode and click our wet Square the green square will move and rotate until all eternity so now you've learned the basic concepts let us make some real life animations and we will start with this text animation here so let's have a look at our HTML build um actually it's pretty easy the only thing uh the only trick is that these lines are separated um and both are in a parent diff and this paren of has this class overflow hidden and um yeah it just has overflow hidden and um the same thing is applied to the second line and the pro tip here uh these headlines they have the class H2 but actually they are just text blocks because um I guess for SEO reasons it wouldn't be that good to have um multiply H2S here um the real H2 uh is this one as you can see this is an H2 um something you maybe should consider if you are building an animation like this in webflow exactly so and that's it actually so now let's select our H2 and you can see there's already an trigger set up let's go to interactions and let's delete it and start from you and what I want to choose here is an scroll into view animation and we want an um custom animation so we start one there's nothing yet so let's um create one and let's call it something like text animation so um let's apply an action uh we use a move and this is our initial state so we are going to check this and we are moving it down on the y- axis so that's why I'm choosing here 1 5m like this now you can see it disappeared because of this um over flow hidden parent and I'm duplicating this one and this time we are moving it back to 0 a.m here here we go uh we use a duration of 1 second and maybe an animation of out quart and if you preview it here you can see um how it gets into view like this um next thing I'm going to apply is an opacity so I take it and drop it here so also automatically gets an initial State let's um turn down the opacity to zero duplicate it um drag the duplicate here and yeah I think it's always good if the opacity is a little bit longer than the other animation so that's why I choose 1.4 seconds and let's choose also out quart and opacity 100% so if I preview this you can see we have this nice animation let's save it and now let's um change the trigger settings to class so this is automatically applied to all H2S and you can see now here it's also applied here um now let's scroll up a little bit and press play you can see it already happened to this one and also to this one and there's now one thing you can change it's this offset here so when the offset is is on 0% this means the animation will get triggered as soon as the element enters the viewport like this one and if it's something like 20% it will get triggered uh once it's like uh 20 20% scrolled through the viewport already so in this case I would always choose an offset uh because otherwise the animation can start too quick and happen too quick and uh it's not really visible to the user so let's turn on preview mode again and you can see I can scroll scroll scroll and now it comes maybe that was a little bit too much uh so let's turn it down to something like 10% and yeah you can see like this looks great so our next animation will be this image parallx um watch it while I'm scrolling over the page I can never get tired of this I I love this um effect and it's so easy to achieve so um let's have a look at the HTML build at first you can see um yeah the all images are packed in a grid it's a grid with uh something like six columns and six rows and um I placed all the images like manually in here like yeah um I defined a start column and the end column and the start row and the end Row for each of them and each image is in an image wrap I gave it a ratio um overflow hidden and position relative I think position relative is actually not necessary so let's get rid of it and within there there's the image itself um yes it's set to Max width of 100% And I have an scale here um this is actually necessary while the animation you will see later um and the scale is to something like 1.2 if I turn it down to one you can see it fits directly into um uh the parent but when we are scrolling on the page we want the image to move up and down and that's that means that we need some more of the image on the top and also on the bottom and that's why we I need a scale here so let's get into the animation select an image uh go to interactions and this time we choose while scrolling in view so that's an continuous animation while we're scrolling and um yeah play a new animation and let's start a new one uh Parallax image I call it this time so first thing we do is I'm going to apply the scale here as well because otherwise the animation will reset the scale uh we have set before and you can see this little little um warning sign here again that means I have um I've set a value here but no value here so I have to do the same here um so next thing is we want to animate it on the y axis um so that's why we choose a move and we start here with a value from Min - 10% you can see what was happening it was moved here to the edge and I'm going to duplicate it like this and here we will um move it to 10% so the opposite direction or maybe let's choose something like nine so it's not totally at the edge we have a little bit more spacing here um actually that's it only thing uh we can also apply is some smoothing um I think everybody knows what that is it just makes the um animation feel a little bit more uh natural so and we also um apply it to class so it automatically gets applied to all other images as well and now if I turn on the preview mode uh and scroll down you can see this nice parallx effect and yeah actually that's it so if you've enjoyed the video and you also want to learn the fundamentals of the webflow CMS you can watch this video now otherwise thanks for watching and as always stay in the flow

Channel: Designbase

Views: 10,643

Keywords: webflow, webflow tutorial, webflow for beginners, how to use webflow, webflow course, webflow design, webflow design tutorial, webflow tutorial for beginners, webflow scroll, webflow scroll animation, webflow animation, webflow scroll interactions, webflow animation tutorial, Webflow Scroll Animation, webflow scroll animation tutorial, learn webflow animations, learn webflow interactions, webflow interaction basics, webflow animation basics, webflow lernen

Id: dJOvZ3LxHq8

Length: 19min 13sec (1153 seconds)

Published: Wed Nov 22 2023