Top Five Interactions Designers Struggle to Create in Webflow

[Music] hey there welcome back to the channel for webflow pros if you're new here hit that subscribe button below so you don't miss out on future tutorials i actually have a pretty special announcement today and that's that we've officially launched the tricks patreon page so if you're part of the tricks patreon group you'll basically receive exclusive tutorials that are just for patreons i have my complete entire code collection that i'm continually adding to available for patreons exclusively and then you'll also receive the opportunity to vote on some future tutorial topics so the tutorial for today was actually voted on by our patreons and this tutorial is the five most common interactions that designers tend to struggle with in webflow now i put together this list based on the questions that i receive through direct messages and different things and these are the interactions that designers tend to seem to have a little trouble with sometimes and these can all be done natively in webflow all right so let's jump right into interaction number one basically for this first interaction we want to change a different image out every time we hover over one of these links so i basically have a um container with a little bit of padding inside that i have another div that's going to hold our links and our images and inside that is another div that will just hold the links so basically this div can have a width of 50 percent and we want to anchor it towards the right so we'll use a left margin of auto and then that is placed right there so for each one of these links we will want to hover over and have a different image appear on this side um so this is where it gets a little tricky sometimes is we don't want to have to have a bunch of different interactions so the best way to do this is actually to drag the image directly inside the link and then we can give it a class maybe it's links image and then we want to position it absolute to the top left corner of the screen we don't want it to go all the way to the top left of the screen though so we'll grab this container and set its position to relative so that way it stays inside the container and then we'll go ahead and give it a width of 50 percent of the container a height of 100 we'll pull that image from the collection and then we want to right now it's being stretched a little so we'll give it a fit of cover so it just crops off that excess and that is working fine there so basically we can go ahead and set up the interaction for each one of these right now there's an image inside each one of these links and they're all overlapping each other right here um so we're going to go ahead and create an interaction and whenever we hover over one of these links we want each one of the siblings to kind of gray out or fade a little bit and these links aren't really siblings right now they're all inside a collection item so all the items are the actual things that are next to each other so for this interaction to work we need to apply this to the item so we'll go ahead and create an element trigger it will be mouse hover and we'll apply this to the class so it affects every single item and we'll on the on hover we'll create an interaction and this will be called links hover in basically we want to grab the item which we have selected take its opacity and then we'll affect the class here so interaction trigger is the one we're hovering over but if we change this to class and say only siblings with this class now if we hover over theater it's only going to gray out all the other ones um so we can go ahead set the opacity to a 100 by default set this as an initial state by using this right here and then we can go ahead and set the opacity on the siblings to sort of gray them out to maybe like 20 percent or something whenever we hover over one of the links another thing we'll want to do is actually grab the image and then we'll set an opacity here this time we want it to be only children with this class whenever we hover over one of these items we only want it to turn up the opacity of the image inside this item not all the other items um so that's why we need to put that image in here and just position it absolute there so by default the opacity of all of them should be zero whenever we hover into an item the child inside we should turn up the opacity um to a hundred percent so that is seems to be working there um it's not previewing quite the way we would expect but once we test it out it should work fine in webflow um so we're gonna also scale this down and this one should be only siblings as well we'll scale it down to zero by default i'm sorry only children with this class and we'll scale it up to one whenever we hover in and we also might want to just move the image down so we can set a move and move it down a little bit by default and whenever we hover in should move it up and let's apply an easing to all these and maybe out sign should be good for now and then from there we want to create our hover out the easiest way to do this really is just to duplicate the hover in and then we can change some things so we'll rename this to hover out and then for our second interaction we need to delete our initial states because those could cause some bugs we want to remove those change everything back to the way it was before so the sibling links would be 100 opacity the link image would be moved down a little bit by default that arrow would be scaled to zero and the opacity on the images would all be zero opacity now by duplicating that interaction we have our easing set and we have our duration set so we don't have to rebuild from scratch so now if we preview this it should be working correctly if we hover over any one of these links the image fades up the arrow scales up and all the siblings gray out so i can use that for any one of these and the corresponding image is fading up correctly all seems to be working there so this can be used for a lot of different stuff the most common use is a full page menu but really this concept can be used for different things even if you wanted the links to be on this side or maybe you had a bunch of tabs things that looks like tabs up at the top and whenever you hover over one of those it maybe shows some content underneath it you can position that content to the bottom absolute there's a lot of different ways to use this same concept but basically it involves having some hoverboard elements with some other elements outside of it positioned absolute wherever you want them you may have noticed one bug and that's whenever i hover over here it's always highlighting the last link camping that's because even though this image is positioned absolute it's still inside this link over here so by hovering over this image i'm also hovering over the link um so if you wanted to fix that that can be adjusted with just a little bit of custom code basically we would want to grab the link of that class uh that class name and then i have an embed on the page inside there i have some style tags for css and basically in here we want to um go ahead and have a period for our class name then paste our class name open up the brackets and then in here we'll do pointer dash events colon none semicolon basically this just means that the image is no longer clickable a user can't hover over the image it's like it's almost not even there so that just will make the cursor ignore the image so now if we preview hover in here nothing happens but we can still hover over each one of these links and it works just fine so that's the first interaction the second interaction we really want to test out a pop-up modal so basically in here i'll have a collection list and really all these interactions you don't need to use collections for i'm just using them because it makes it a little bit faster so i have a grid card which has the image and the text inside it and right next to that i have a sibling which is the pop-up and if i'll show that for a second you can see how that looks basically it's set to position fixed so if i scroll up or down the page it's always there at the top and it's a hundred percent width and then 100 vh so it just spans the whole width and height of the browser um and that is working fine there so we can go ahead and set up our interaction basically whenever we click on this card we want to show the pop-up so to do that i'll go ahead and create an interaction on um this would be mouse click or tap we'll apply this to the class so it affects every single grid card and then basically one first click i'm going to set up an interaction called open pop-up and from here we want to set the pop-up right here would be display none by default so we're setting our initial state again and then whenever we click we'll change it to display flex and then maybe we also want to change the opacity so we can set the opacity to zero and then change the opacity to 100 and maybe even move it down a little bit by default and then whenever we click it'll just slide up into place right here um so it's important to note that this interaction is affecting only siblings with this class because whenever we click on the grid card we don't want to change every pop-up to display we want to only fade up the pop-up that's next to the card we clicked on so only siblings and if we preview that it's sliding up just fine seems to be working let's also add some sort of easing maybe out port this time and that's working just fine so we want this to happen on both clicks so one second click we'll just use the same interaction of open pop-up every time we click on this card we want it to show the pop-up now we also need a way to close the pop-up out so i'll show this for just a second we have this x here we can use and i'll go ahead and create an one-click mouse click or tap apply this to the class and we'll duplicate our open pop-up again and we'll just name this one close pop-up a couple things we won't need we won't need initial states and then right now it's affecting the pop-up um and it's saying only siblings with this class the only problem is this x is not a sibling to the whole pop-up if we look at the structure the pop-up is actually the parent the x is inside of the pop-up so if we tried this out right now it wouldn't work we need to actually change this from only siblings to only parents with this class um and then also we don't want to just uh hide the pop-up instantly we want to fade out the opacity first then hide the pop-up so we also need to change this we would move it back down to where it started so 2em the opacity would change back to zero and instead of display flex we would hide it at the very end display none so we can click again and that should work fine we have our same timings we have our same easings that all seems to be set up so same thing on second click we want to do the exact same thing anytime we close this out we want it to work so now i'll just go ahead and grab the pop-up set it to display none so we can test this all out any links i click on say click on tennis see it only shows the tennis pop-up model now if i click on this x it closes that out i could click on maybe sailing and it shows that one click on this x and it closes it out so really the biggest takeaway uh is to basically understand your document structure understand if it you're trying to affect a sibling or a parent and use that knowledge to your advantage when creating these different interactions um the next one i really want to try is sort of a parallax image move so whenever we're scrolling up or down the image will be moving inside this container i have this sort of gray box so if the image doesn't load in instantly we'll see a placeholder of where the image is going to be and basically i'll just drag in a div this is 2 column and this will be the actual photo um so we can go ahead and set a background image here and we'll set it to cover position center no tile and this is sailing so let's just pull one of the sailing photos here like this one is pretty nice um we want it to be a hundred percent width of its parent but the height we want it to be larger than this um container here and instead of setting a pixel value or a hard set size i'm going to use percent so maybe 120 of the parents so you'll see it's larger than the parent the reason why i'm using percent here is i want this to still work on mobile say on mobile i were to change the size of this container i don't want to have to change the size of the image inside of it too so i'm using percentage so this is more responsive now we have the image container set to overflow hidden if there was display overflow visible we would still see that image it's not being cropped so the container itself needs overflow hidden so we crop off that image from there we really just need to set up our scroll interactions so instead of applying this to the entire container we only want to apply it to this image container here the reason being is say on mobile mobile we were to stack this image under this text we don't want it to trigger as soon as this container comes into view we want it to trigger whenever the image comes into view itself so we're using the image as our trigger and i'll go ahead and delete these for just a second and we'll create a while scroll into view trigger so while scrolling is affected based on the user scroll speed the faster or slower the user scrolls the faster or slower this interaction is going to happen i'll apply this to the class so anytime i reuse this module it'll work and we'll create an interaction and we'll just call this move image we want to grab the image inside that image container and set its move so we can move this percentage again since the image is set to a percentage maybe negative 16 percent that's pretty close to the edge right here um and then we'll move this back to zero percent where it started so if i were to switch this and make this first one zero in the second one 16 it would the image would move in the opposite direction so it's all depends if you want the image to move up or down with the page see as i'm scrolling um down you'll see the direction the image is moving and that appears to be working there um so i can go ahead that seems to be working fine um maybe i don't want this because you'll see my the image is almost completely out of view when i'm only at 47 of the screen with through so i may make this move maybe around 60. let's preview it should move a little bit faster it should be a little bit more obvious yeah that image is moving a lot nicer um honestly it's still moving even here but i could back this down even just a little bit more let's see how that's looking yeah that looks really good so another thing we can do is add some smoothing so if you take your smoothing all the way out the image is going to be a lot more choppy like there's no delay but if we add a lot more smoothing in it's going to kind of lag so if i stop if scrolling the image doesn't stop moving instantly it keeps moving a little bit after i stop scrolling and that's just a little bit of smoothing at it there so from there i can really just reuse this interaction since it's all tied to the class i can copy this photo and maybe paste it in this one down here i can add a combo class out to change the image so maybe this is is uh camping and we'll just change that image out to the camping image which i think we could use um let me see maybe we used this image here and then now if we preview this should work for all of them yep it's working just perfectly awesome so um another type of interaction there's a lot of different interactions you can do by sort of masking out images um another interaction that i get asked commonly is just like maybe if this whole image was covered by a color and then whenever we scroll into view that color block just fades out or moves out the way to do that we can actually just drag inside the image container and we want this to fall on top of the photo so this will just call it maybe two column color and then we'll position it absolute to cover the whole width and height of the container which means this container needs to be set to relative and we'll give it a high enough z index so that way it falls on top of this image and then we can give it sort of a background color whatever we'd like so now it's just completely covering up the image whenever we scroll into view here we just want that color to move out the way what i can do for that is grab the image container again and this time we're going to use a scroll interview sort of interaction so with this type of interaction we can set a hard time like two seconds five seconds however long and it's just gonna respect that time it's not dependent on how fast the user scrolls so if i use that one apply this to the class whenever we scroll into view we want an interaction to happen and we'll call this move color and then basically we're going to grab this color block and move it we'll use percentage so it'll be zero percent of move by default so this is an initial state again and then we want to move it out of the way so a hundred percent um down and then basically that should just move it completely um completely down out of the way let me preview that and see i may also need to fix this image to the top instead and give it a 100 width and 100 height of its parent that way i can actually have the ability to move it um let's see let's preview that move color see if we can move that it should go from zero um down to 100 we're only affecting children with this class let's just test it out because sometimes your previews in the interaction panel don't actually the work the way they will when you actually preview um we'll give this a little bit of a delay though because i don't want it to happen instantly so maybe like point six and then we'll give it a duration of maybe one second and some sort of easing like outport again is fine um and i'll just scroll up and let's preview this interaction so when we scroll down yep that uh that move just that box just slid out the way now whenever i scroll back into view it's not working so to get it to trigger every time if we wanted that to happen we're gonna have to create a scroll out of view interaction and i'll duplicate this move color and this one will be called move color um out because it's the out interaction we don't need an initial state and basically all we want to do here is move this back to zero percent where it started if we move this color block back to zero where it started then we can loop this interaction back the second time we come into view and honestly this doesn't need any delay or duration because we're not going to see it the image will be completely out of view when this happens the only point of this interaction is to make our um whole start interaction repeatable so now if i preview this again come into view it triggers i go out of view and come back into view it triggers again so it's triggering every time and because this is applied to the class it should work in both instances we just need to put it inside this image as well and then let's preview both of these yep they're both working and they'll both trigger for each section and they're still working with our parallax too which is really nice so there's a bunch of different effects you can create with this you can move the whole image container itself you could slide the image up inside the container like say the image went from zero percent height to 100 height that would create a different effect because the image is set to cover so the cropping would be different as that image grows up there's a lot of different effects you can create with these just combining scroll into view and while scroll into view can create some really cool interactions um so the next thing i want to cover is sort of the um like changing a background color so this is our fourth interaction we'll change the background color um when we scroll into view of any one of these sections for that to work we need to give the body a class because that's the color we'll be changing and say whenever we scroll into view of this second section here we want to change a color all we have to do is use a wow scroll into view interaction and we don't want to apply this to the class because all these containers have the same class and this second section will have its unique interaction so we'll create an interaction um we'll call it um second section and basically we want to grab the body and we're going to change the color of the body so we use a background color here we'll change it from maybe this black which is how it starts um to maybe like a purple and let's just go ahead and preview that so by default we're in this first section nothing happens as soon as this second section starts entering it starts changing to purple very slowly by that time that second section is completely in view it's a solid purple but that really it kind of takes a long time it's kind of slow so if we wanted to speed that up a bit we could move the starter endpoint um throughout the div so maybe we move this a little bit closer maybe 20 or something or 18 percent now if we preview and scroll down you'll notice that that color change happened a lot quicker um so that is working pretty well now whenever we go ahead and preview um it should be working good there let's say whenever we scroll back into this second section we want to change the color black back to black because with that purple colored block it's just kind of looking weird with the same color as the background so we can apply this container here we'll create a while scroll into view again affect the element uh trigger an interaction this will be the third section basically we're going to grab the body again but we'll go ahead and set its background color and then this time it's going to be fading from purple because that's where we left off in the second section it'll fade back to this black and again we'll want this to happen kind of quicker and let's go ahead and test that out so it should go from purple to black um right there that seems to be working now whenever we preview in webflow let's say we scroll up to the top in preview you'll notice this top section is purple and we really don't want it to be that purple color um that's because it's picking up on that third section interaction and changing that first one in purple so really we had to add a interaction to the first section as well and this one would be while scrolling into view um and this we'll call this one first section and all we really want to do is force this first section um let me see um we want to force this first section to just stay black so all we have to do is select our background color um actually this needs to be applied to the body and with the body selected we'll select background color change this to black and then the second one we also just want to change the black now because this is the first section on the page if we preview you'll notice that it's actually starting somewhere around this 50 mark so we want the start point to be somewhere after the 50 mark and this end point should also be pretty high up so it doesn't interfere with the next section so now it should stay black let's go ahead and preview we load this up it's black we scroll down into the next section and it should change purple yep right there and then it should fade back to black so that appears to be working it is a little bit quick and i think like maybe where these interactions fall may be interfering with each other a little bit so if we wanted to fine-tune the sum i mean back this down to exactly 50 maybe back this down to 51 and then maybe we can back down this second section so basically you don't want these points to kind of like overlap each other because that's where you start to get some different glitches and stuff so maybe this is 10 maybe this could be uh 28 um and that should give us a little bit more breathing room between the first and second section um so now if we scroll in it's a little bit smoother definitely could fine-tune it some more but that appears to be working for those um so this last interaction we really want to try is a light mode dark mode toggle so this is interaction number five um what i'm going to do is delete this background color change we applied to these containers because i don't want that to interfere with our light mode dark mode um and then basically from here we can just create our toggle so i have a toggle in here and on mouse click or tap we wanted to on first click create an interaction and this will just be called uh light mode and basically we want to move this so i'll move it here it would start at i believe zero and then maybe we move it a little bit and that appears to be working there so let's preview yep and then i may make this give this some sort of easing and this has a time so let's set this as an initial state so there's no time there much better um so now whenever this happens we want to change the body background color again so grab the body which has a class and you'll notice because this is in a symbol whenever i clicked on something outside the symbol it closed out my interaction to solve that i'm just going to copy this element for now just paste it outside the symbol so i can work with this a little better um so then from here i can select the body and then we want to basically change the background color this time so it's black by default we want to change it to white right here and we can preview that so that's working um we also want to be able to change all of our text to black as well so what i can do is grab the body because most of the font colors are being inherited from the body font color um so that's another good reason not to set your font colors on each of your headings individually if you can avoid it because it just makes things a little easier so here text color i know that it's white by default and i can set text color again and this time it will change the text color to black so now it just inverts my text colors changing to black while my background color is changing to white now these uh text that are inside of links aren't changing that's because links are blue by default and you have to set a color on links to be able to override that blue color but i don't want to have to over like select each one of these link classes one by one this one doesn't even have a class so that could be a little tricky because that's just going to be very time consuming to select all the links on my site one by one and create an interaction for them instead i'll just drag in an empty div and create a global class here called all links and basically i know that all the links are going to have a color of white by default i can go ahead and add that class to any link on my site so these links i can add that global class of all links on this whole card is a link so any text inside it would be a color i can add that class all links and you'll notice if you ever want to check where this is coming from this color is being inherited from all the links the link color is hard set but the other text right here if i click on this it's being inherited from the body that's why this one works and the links don't um but yeah so we have this class of all links is supplied to any link on our site we also probably want to do that for like border colors because i don't want to have to select each one of these borders one by one and change their colors so we can duplicate this one and create a new class by duplicating the class call this all borders and then from there i may also want to so i know the border color would be this black by default or actually sorry it would be this white and then the all links color we'd set the text color to white by default um so that appears to be working also any fills like these two lines in the in here have a background color or white we're going to want to invert those as well so anything that has a fill color that we'd want to change we create a class for that so i'll duplicate this one create a new class and call this one all fills and then that by default wouldn't actually have a text color that doesn't matter but it would mean a background color of white by default and then i'll just apply that all fills class to these so we'll do all fills apply it to any element with a fill so this is just a combo class that's global and then this element that has a border we'll add that all borders class same with this element all borders and anything else on the site that may have a border um which i think this does or a fill um which i think that covers everything so now this is going to make our job a lot easier when creating this interaction so if we head back over to our light mode interaction we can grab this all links class we just know we want to change every link on the site the text color is white by default and then we just want to change it to black and then also the all fills you know the fill color which is a background color is white by default and we just want to change that background color on every fill item to black and then the last piece is really just the borders the same thing we know that border color again white by default and we'll just select the border color change it back to black and now that should really everything on the site should invert and that's looking really clean um that sort of yellow is kind of washed out so i may want to also take this yellow and change its color um because there's only really two elements with that color i don't think i'll need to create a new class but i can use background color was yellow and background color will be changed to maybe pink um and then i'll need to do the same for this element which again because it's in the symbol it's kind of annoying but i'm gonna have to paste a copy in down here um so this light mode we're gonna grab this logo element and then the logo color is based on the text color so the text color is yellow by default and we'll just change that text color back to pink um and that is working fine so i'll go ahead and add some sort of easing maybe out court to every single one of these and that sets up our interaction just nicely so from here let's make our job a lot easier by just duplicating this and then we'll change this light mode to dark mode and then you probably know the drill by now we delete the initial states and we just switch everything back to the way it was before so this move of the circle would be moved back to zero the logo color would be changed back to yellow um the switch color would be changed back to yellow as well all borders would be changed back to white all our fill colors on the site would be changed back to white our link colors again back to white body text color um would actually be back to white as well and the last piece is the background color would be changed back to black um and then from there which should be good so all we have to do really is delete all these elements we don't need anymore our links fills and borders um this nav switch and also this nav logo let's go ahead and test this out so if we preview and uh hit the toggle you'll notice that the text color actually changed which is perfect the border colors changed the fill color changed the link colors change throughout the whole site without us having to create like a ton of new interactions or a ton of new interaction triggers so that's one way to just keep this really really seamless and kind of easier to use throughout your site so that's everything for the five most common interactions that can be a little challenging in web flow hopefully this cleared it up a little bit and i'll catch you in the next tutorial goodbye

Channel: Timothy Ricks

Views: 30,578

Rating: 4.9813228 out of 5

Keywords: webflow, how to, tutorial, lesson, tricky, struggle, hard, difficult, interactions, interaction, animations, popup, model, dark mode light mode toggle, link hover, image change, image move, photo animation, background color change, while scrolling, trigger, scroll trigger

Id: E-4xLVyGw4Q

Length: 35min 6sec (2106 seconds)

Published: Thu Nov 26 2020

Reddit Comments

[u/bumbaclotdumptruck]

Recommendation: start the video quickly showing the 5 interactions you will go over. Most people won’t watch more than minute just to find out if the video is covering an interaction they need help with

[u/-protonsandneutrons-]

This is gold. Loved to see it.