Webflow beginner interactions - Stream clip

so let's break this down he had three pieces of text so three lines that faded in we're gonna learn this right now okay let's break this down super simple so let's make the body I'm just gonna make the body black and simply just type in black there we go we have a black background and now he has his content centered vertically and horizontally on the page so what we can do is drag in a section and make this the height a hundred vh o kvh meaning viewport height so it's gonna take up however tall this the browser height is okay not that not the height of the actual page like the whole page just the browser window height and now within this section we can click on this and we'll change the name to hero and then we'll go ahead and click on flex box and we want to align this Center vertically and align this Center horizontally okay so this means as you can see it says flex layout settings effect and elements children so children meaning any elements within this element all right so let's make some children no no okay now we have three lines of text so let's go ahead and put three lines of text we'll take this text block and there we go and let's go ahead and make this color white and we can do that by you don't have to set the color white for each text block you put in you can tell the parent of the elements hey anything within within this element anything within me will have a white font color so I can click on hero scroll down to typography and type in white I can even change around the typography like let's do something like that we'll make it bold we'll do something like something big there we go and the line height of 1.3 - all right cool so text block and so if I just copy and paste and paste again these are already white so I don't have to change the color because the color is being dictated by its parent right here at the here oh okay also notice how everything is horizontal that's because I forgot right here in the direction it should be vertical okay now that we have it vertical what did he put he put his name his position and where he's from and in the year so let's say the name is I'm gonna pick a random name here we'll use Andra and then webflow visual designer or no visual developer I think that's what we call one of our people in our team and then I don't know where you're from Andra so I'm gonna put earth 2021 because this year yeah this year is kind of weird alright hundreds already living in the future so now that we have this set up we need to make these fade in after the page is done loading so how do we do that we go into this lightning bolt right here okay so this lightning bolt is our interactions panel and we have different triggers now we're gonna go to page sugar because this is the trigger that we want to happen so if you can see here if I hover over these we get a little information at the bottom so this one says animate when the page starts or finishes loading so this is what we want so we press the plus sign and then we're gonna click on page load and now we have two extra settings now I know when going into interactions it's kind of crazy because you have all of these settings whenever you click on something you get more settings you click on something else in even more settings and it's all packed into this one small panel on the right alright so hopefully this tutorial will help you go through these interactions a little bit easier and you don't get lost when clicking around ok so we want to do when the page finishes loading because what is happening is when the when the browser is loading the page it's loading every single line of code it's loading every single image every single animation every JavaScript it's loading everything from top to bottom right if you use the wind' page starts loading that means is while the browser is loading you want your animation to happen at the same time so this is this could be bad because what if your image isn't loaded yet right so you want to make sure that everything's loaded first and then you go ahead and start all of your animations so this is the one we're gonna choose when page finishes loading start animation okay and I'm going to press plus because I want to create a new timeline okay and we're gonna call this page load actually hero text fade in and you can name it whatever you want but this is just to help you understand what you're creating alright now what we need to do is always before you set a timed interaction before you press + you want to select the element that you're that you're going to affect okay so I clicked on this text I'm going to click on plus and because I'm going to do a fade in effect it's actually just opacity from zero percent to a hundred percent so I'm going to click on opacity and I'm going to set at as initial state so what this means set as initial state means when the page is starting to load do this effect so before anyone sees anything do this effect so I'm gonna set this opacity to zero so this is my initial state this is what the element is gonna look like before anything happens okay now I'm gonna press + on the end meaning this is what I want the element to look like when the animation is done and I'm gonna click on opacity again and we're gonna keep that opacity to a hundred a hundred percent and for press play there we go we have that animation we have that fade in effect all right now let's do the same thing with the other ones I'm gonna click on that text block press plus at this at the first step opacity set it to zero I'm gonna press plus at the end step and opacity 100 same thing one more time plus opacity on the first step set it to zero and then at the end step opacity 100 then when you press play there you go all right so if we preview there you go is the video blurry for anyone okay cool so does that make sense now everything from here on out is now just small little tweaks okay so let's go ahead and make a little tweak let's let's fix this so if I go here linear everything is just vary from A to B there is no type of easing all right let's let me see here using CSS let me see here there we go so this is what this means this whole huge drop-down menu right you have all these different types of eases and so you can see which one does what and see how it has different speeds what I usually like to do is like using Quint ease out Quint which one is it he's a court so you can like just see how these play out like some of them bounce like that so what I like to use is ease out Quint mmm who are you there you go so if I press play you'll notice that this one kind of kind of animates different than the other front to see how that came in a little bit faster yeah it's these subtle small design changes and so if you want to change them all you can just hold command or control and click the end steps of your elements and change them all we can change it to you know Quint press play there we go or we can change it something else there we go so it's up to you but if I go back and close this interaction everything is showing okay so when I go into my animation that's when I'm previewing what things look like but when I go back and close the timeline of the animation I can see everything because it's easier to see the the end State so I can edit whatever I need to edit all right hopefully this this helps okay cool any questions any questions okay so that's how he did that it's just a simple fade in come on internet while that's loading bents thank you so much for the coffee you rock Scott thank you okay so that's page load okay all right hover effect now I was confused at first when looking at this I was like how is he putting his image his headshot in on top of the content on hover that doesn't make sense and so I right click inspect like I always do and I notice that he has an image if you can see here he has his headshot but when you hover over it his headshot this one is just a second image with the background cut out and I was like oh that makes so much sense how it tricky so again it's like being a magician so I'm gonna show you behind the scenes how he did this so let's go ahead and let's reform at how we're doing these elements let me put in a div block and put everyone in a div block and we'll call this hero content I'm just setting up the elements okay and we're gonna Center everything okay and the reason why I'm putting them all in a div block is because I want this div block to have a position of relative I'm doing this because I know that the images that I'm going to put here are going to have position:absolute meaning they're going to float either behind or on top of other content let's go ahead and take these text blocks and we're going to give them names I'm gonna call this hero text and we'll just call it hero text and make sure that this is position relative and set the z-index to 1 because or actually Z and theta 2 because the first image the image with the background so I uploaded it so the image my headshot with the background is gonna go below these three hero texts so I'm setting them up give them a class oops give the class name of hero text hero text okay so all three of these are set up to go on top of my head shot the one with the background now let's go ahead and put that image in right here and we're going to put that right here Wolfe is huge hero image and let's go ahead and give it a different height hmm yeah okay and now we're going to do position absolute and now we're going to do a trick where we center it using CSS okay so we're going to do position position:absolute with the top being 50% and the left being 50% and then we're gonna go down to transforms and add one and again if this is over your head don't worry just this is just me setting up what he's done and so my X&Y I'm doing it negative 50 negative 50 now you might be asking Nelson how come you just didn't you didn't how come you just didn't use flexbox so you don't have to do all this stuff well flexbox you can't do that with things that are position:absolute okay and now I'm gonna do the same thing I'm gonna get another image of me and let's call this hero actually yeah let's call this hero image as well but I'm gonna give it a combo class of overlay that way I can set the absolute to be three okay so this is three Z and X 3 these hero texts are Z and X 2 and this hero image the one with my background is just Z and X zero or Auto all right and so now if I take this one and set this opacity to zero I can just go to my hover and set the opacity to 100 and then click out and there you go see the content is the the text is still behind me so there we go and also with this image I can give it a transition of opacity and so that way tricky tricky Steven what's up welcome back see here oops oops there we go okay all right makes sense so I didn't even have to use interactions for that part this is just a CSS hover and it's just trickery the only interaction is the loading of these three text boxes and my name is not Andrea or Andra but I couldn't get a photo of it because because she's in the life Jen but yeah hopefully that makes sense all right next thing I want to show is let's do a while scrolling so as I scroll down those three pieces of text go away all right Oh in sorry one more thing how I cut out the background if you haven't used this free tool yet it's so amazing please do it remove dot BG Coleen or Stephen if you can put this link in the live chat please remove that BG bookmark it memorize it keep it in your head cuz you can just upload an image and it removes the background for free in like five seconds it's amazing if ya you just drag it in and then that's it it's done amazing so it's free and that's how I was able to do this alright some great magic happening there alright so while I'm scrolling down three these three pieces of text fade away let's go ahead and do that so what I'm going to do is I'm going to drag a section a new section in and I'm going to call this Row two and I'll give this a height of a hundred VH as well and just so we know that were scrolling away I'm gonna give it a different background color so yeah right there alright so as I scroll down those three pieces of text should fade away the output of remove dot BG it's free but it's a it's a low quality but if you want the high quality version of your cutout then you have to pay for credits so that's how they make money hello marine from Texas who is in Florida right now I think you think that's what you said you're in Florida well welcome back nice to see you in the live chat room as far also gaps thank you so much for being here yeah I'll take questions towards the end of the stream but let's keep going with this no we're gonna go back here and we're gonna select hero we're gonna select this one because the reason why we're selecting this one is because as we're scrolling down we want to see how far down we are away from the hero section okay we don't want to use a pic we don't want to use page scroll because this takes on account the whole page no we don't need to know where we are down the whole page we just need to know how far down we are from the hero section so we're going to effect not the page but just this element so this is when we use element trigger so we're going to do while scrolling in view I think that's what he used yeah yeah while scrolling in interview so we're gonna click on while scrolling in view and now we get even more even more options oh sorry for anyone who's wearing headphones it was just my keyboard choice you click on up selecting action and press play scroll animation and so we're setting up a new timeline a new timeline for scroll animation so we're gonna press + and let's go ahead and call this hero scrolling ya hero scrolling now this one if you notice that these were based on time this is based on percentage so this is percentage based on how far up or down from the element okay so let's go ahead and click on hero text + and I'm gonna set the opacity okay and just to make sure we know how far down we are from the page we can click on live preview and start scrolling so notice we're already at 50% down okay so we'll need to drag this down to something like we'll say 75 that's a simple number so if I scroll down once I get to 75 start to do something okay well actually if you see here that piece of text is already gone so it should be earlier than 75 so we can do something like right here 63 so I'm gonna drag this up to 63 you can drag it or just type it here on the keyframe and then when I get down to say here so we'll be 68 yeah so when you get down to 68 that's when I want the opacity to be zero so we can call this 68 and set the opacity to zero and notice it's affecting all three that's because I'm setting it to affect children with this class I don't want to affect the last name I want to effect just that piece of text so I'm going to choose under the change class to select an element and there we go now it's just that one element if I preview scroll down watch the name goes away go back up comes up alright that's it so interactions is all about what happens at point a and then what happens when I get to point B that's it yeah so let's do it again studium I'm gonna take this hero text and let's go ahead and find where we want the animation to start so we can start at let's start at 66 all right so we'll start at 66 and we'll press plus and opacity and set this to affect the selected element and if you see a caution sign that means hey I need a number so oh no actually a cautions right means hey I have point a but what's my point B so you just tell web flow hold on I'll get there all right so opacity is going to be zero the keyframe didn't we say oh yeah okay 67 all right 67 and then let's just do the same math so 63 to 68 is 5 so 67 to 72 press + opacity and set this to 0 oops this first one's supposed to be 100 yeah okay so we have 100 on the first line 100 on the first line and then second and then the first line fades away to 0% and the second one phase weight to 0% live preview first one second one all right let's do it one more time we're gonna get the hero text and let's just do the math the first one the second one is away by four so we'll do 60 you know 71 yeah we'll do 71 on the opacity set this to effect select an element will keep the opacity at 100 and then plus 5 so 70 1 plus 5 is 76 set the opacity to zero and we're done one two three all right look at that super simple and again if I click on this if I click on any of my elements notice how this one is highlighted a little bit blue that's because this is my point a and in webflow is showing where my point B is where my end state is if I click on this this one is connected to this if I click on this but if I click on this this one is connected to this all right so there you go but something feels funny right now did I do my math right I don't know but yeah so there you go now again what Toma did was he just added some some flare some some subtle animations and so what I think he did was add some smoothing ok so notice as I scroll up and down it's just very linear it's not really super smooth so what you can do is leave your leave your timeline your your scroll animation and play around with smoothing so the more smoothing the more smooth effect you get like so if I scroll down I think that's what's happening I didn't even actually go into his read-only link so I'm just riffing right now all right yeah so that's while scrolling in view does this make sense let me check my okay cool and so far inside note the stream is smooth right now knock on wood no dropped frames let's go I'm learning okay another thing I want to show you is yeah this part right here this again is just while element is scrolling okay so all it is is just text and then elements that are pushing away and it's I again I'm gonna say simple but simple is relative so let's go ahead and do that from scratch here we go so Row 2 let's go ahead and set that to flex box so we can Center everything vertically and horizontally let's put in a div walk straight in the middle right here and let's put some text it's like a paragraph and we want to make that skinnier so let's go ahead and take this div block and call this Row two column Row two content max width will say 550 give all the elements a font color of white make this a little bit bigger set the font and give this some room no oops yeah something like that and we can Center it alright so we have this and we also want to set the position to two relative yeah set this position to relative because all of these all of these right here they're on top of this piece of content so we need to have position relative in the parent element so we can do position absolute for the other ones okay so this right here row two content will have position relative meaning hey things inside are going to be position absolute so let's go ahead and do our first one I'm going to drag in a basic div block and we're gonna call this um blue pill because that's that's the shape and so let's go ahead and make that shape we're gonna get a color set it to blue something like that we're gonna give a border radius let's do 40 cool something like that and we're going to put a piece of Texans there and in there so we're gonna drag in a text inside of a blue pill and there you go let's go ahead and play around with the padding real quick the font size should be smaller yeah and we'll go ahead and make this position display:inline so why did I do display inline vs display:block wait hold on did I actually did I even have to do it with display:inline let me see oh no I didn't okay so position absolute will shrink the element as far as it can because that's what happens to elements that are floating alright let's give this more space on the sides something like that okay so we can say hello someone from the chat room hope you're doing well smiley alright so let's go ahead and we have a position:absolute so let's put it on top of the content boom done right so now you might be thinking if you're used to web flow already you might be thinking okay this is when I start to set my transform so I can rotate it and move it around no do not do any of that inside of the Styles panel because if you're going to do interactions and do rotation and moving of the X and y axis or me moving the translation moving the position of the element on the X and y-axis web flows interaction is going to erase or overwrite all the transforms you've made in the Styles panel so just leave it as is okay okay so let's go ahead and do our interaction we have everything set up as far as elements and styles let's go ahead and do interactions press plus some interactions and now we're going to go to let's say row two oh actually now we're not done we need another element below this so that way I can scroll past it see I can't go down any further so let me add another section real quick so I'm going to add another section put this above put this above I'm gonna call this section row 3 give it a height of 100 VH so that way now I can scroll past it and above it okay there we go let's go back to Row 2 open that up so we can see everything Press interaction and we're gonna do an element trigger not page element and we're gonna do the same thing scroll while scrolling in view start a new action now we're not gonna do hero scrolling we want to do a new one so we press + and we'll call this row - scrolling hold on is my it's my bitrate to low are we good oh yeah I think we're good on the stream okay oh thank you Marine from Texas you're awesome yeah you're doing well javi glad you are alright so now that we have this setup which element do we want to affect so Row 2 is the trigger the element trigger but now we we we want to affect a different element so let's go to blue pill and press the plus at 0 and rotate okay and I only want to affect this certain class I mean sorry this selected element and now I can just rotate it however I want oh not on the X on the Z there we go so we'll start here and we'll start here and then when we get to a hundred percent we'll go ahead and just make it crazy like that and so there we go if I live preview watch what happens so yeah it's rotating okay but now we want it to rotate so it rotates like this but let's go ahead and make it or it moves away as well so we need the Move transform the move option so I'm going to go back to 0% press + and instead of rotate I'm going to use move and so we're going to leave both of these at zero it's because my point a is zero and my point B where I want it to end we can go ahead and press + move and now we get to move it where every one so I'm going to move it this way and I'm gonna move up well what's that oh that was my zoom call did I okay so there we go so I moved it away and if I preview there we go two things are happening the move of the rotate and the move and you know what let's let's make this happen I'm gonna hold shift and select both and I can move them down the anywhere I want in the timeline or I mean in the animation will do something like this so there we go now it's happening faster all right that makes sense let's do it one more time all right we're gonna do it from down here on this corner all right so he did this five times he's rotating it and moving the X&Y okay so let's do it one more time let's go to the Styles panel so we're out of interactions mode we're out of animation mode copy this blue pill paste it now we have two of them and I'm gonna set this blue pill to have a combo class of two so this is my second blue pill and I want to keep all the styles of the first pill but I want to move this somewhere else so I'm gonna do position bottom right and there we go so notice how this one didn't move because this is just the main class but this one moves because it's a combo class and the only thing I've changed is the position on the absolute being the bottom right let's go ahead and go into the interaction and add to the timeline so I'm gonna click on row 2 and you can tell if something has an interaction if you see a lightning bolt so this lightning bolts if you hover over it element has an interaction cool so let's go ahead and click on Row 2 we have our interaction right here let's go back inside of it let's go back inside of row 2 scrolling and now we want to affect this blue pill so let's go ahead and anywhere in the timeline we can just press + and we'll set the rotate and again we want to affect just this element not all elements with that same class name ok so we set the rotate let's go and rotate it the opposite way it's going it's cool like this and then actually opposite way like this ok and right here anywhere excuse me anywhere we'll set the rotate - I don't know even further this way okay and then if I press preview it's kind of moving but you know what let's move this somewhere there just play around with it there we go now you see it moving okay so that's the rotate now let's go ahead and play with around with the move so I'm gonna press + and move and whenever you're pressing + make sure that your selected still on the element that you want to affect okay set the move to 0 on the x and y and then at the endpoint 72 I'm going to set the X&Y somewhere else let's just move it far and then down so there we go so that's the basics of scrolling while scrolling animation alright so we did three things well technically two types of interact no we did three interactions cool yeah and we're staying on time sweet Oh see here all right all right okay will you be leaving this up for yes this will be okay thank you Colleen all right are you from Gangnam style what no I am NOT cool cool so those are the three things so let's recap what did we learn we learned page low the page loaded isn't working oh it's it's being affected by the hero what just happened I didn't press that button I press nothing there we go we're back I'll learn as with life I will learn why did that happen okay so I need to figure out why that page load isn't working but let me delete that so we've learned page load we've learned the tricky way to do Mouse hover and pretend that your headshot is going on top of the content and then we also learned scrolling interactions okay and I know just like Tomas said he's going to create more videos on how he did other things on his website but again in this is beautiful you know just and and taking the time to make these interactions nutty nutty I love it and also if you if you scroll all the way down he has this Easter Egg for a 404 oh look at this look at this he's wearing a suit now and now it's new post and then it's him as an anime character that's amazing and then he has this 404 error if you click on it yes accidental test topics which I don't know what's going on something's wrong with my stream deck okay here we go so if you click on it yes that's him as a kid 404 and then you can play around and here let me show you real quick because I love teaching you all but let me show you how to do a mouse effect with this we're just gonna use a blue box so let's go ahead and do that real quick let me okay Row three last thing bonus here we go Row three let's go ahead and put a div block doesn't matter where but it has to be in Row three and we'll call this blue box and we'll just make a simple box 150 by 150 round out the corners give it a background color of blue and there we go so this is the thing that's going to follow my mouse alright and here's how simple Mouse follows our let's go ahead and click on Row 3 so Row 3 is going to be our element trigger so plus plus press plus and then mouse move over element so when my mouse is moving over Row 3 do something that's our element if I click on play mouse animation and press + so now we get even more even more options so x-axis is the horizontal y-axis is the vertical so when my mouse is that zero percent meaning all the way to the left do something so I want to affect the blue box press + and set the move of this to be on the x-axis 0% meaning all the way to the left however if my mouse is a hundred percent meaning all the way to the right I want this to be Oh am I using the wrong okay yeah I'm using the wrong thing it should be VW and this one should be 0 VW okay the reason why I'm using VW is viewport width meaning if I'm all the way to the left of the page if my mouse is all the way to the left the position of this blue box should be at 0 VW meaning the very left and then same thing with ooh that's too far okay it should be 90 because of the width of the 89.5 okay there we go something like that so it should be all the way to the right okay and then same thing here for the why for the move on the y-axis if my if my mouse is up here zero percent then I'm gonna set this to 0 VH meaning the height when my mouse is on the very bottom or a hundred percent I want this to be in getting I'm guessing 89.5 VH no 89 88 okay cool 88 all right and so now if I preview there we go and so you can replace this blue box with an image of yourself writing a Nimbus 3000 is it 3000 I don't I didn't watch all the Harry Potter's sorry I'm not that type of geek don't be bad if you're gonna unsubscribe totally understand but anyways moving on it can follow you around like r2d2 ha alright and that's mouse move and so if you want some you know some smoothness happening you can by closing out the animation and setting the smoothing will do like 90 in preview and there we go so that's 90 and I think that's what he's doing yeah there we go okay cool so we learned four things yeah bonus all right

Channel: pixelgeek

Views: 1,336

Keywords: webflow, web design tutorial, webflow tutorial, graphic design, web development, pixelgeek, pixel geek, web design, responsive web design, webflow animation, webflow interactions, webflow tutorial 2020, how to, how to webflow, tutorial 2020, webflow scroll animation

Id: TmvzX0Pgbnw

Length: 49min 6sec (2946 seconds)

Published: Tue May 05 2020