Advanced Menu & Slider Interactions in Webflow

what's up youtube in today's video i'm going to show how to build some pretty advanced interactions inside of webflow we're going to add in these different menu interactions slider interactions to your actual webflow projects so let's go ahead and get started all right so i have our basic sections set up for our project um one thing that you are probably noticing is that all the links on our site have a text color of blue and that's one thing that i've always had trouble with in webflow is that you have to apply a color to your links to make them not blue but then you'll have to be adding extra classes whenever you have a dark section on the page you need to reverse it so i actually found this code pretty recently that really makes things a lot easier all we have to do is type a which represents link and then open up our brackets and set the color to inherit just like this what that basically does is make the text color of the link inherit from its parent but we can still override that color at any point we want by using a class so we'll basically use that setup since we'll have a darker menu but lighter page body and we'll use that for our links the next thing we want to do is basically have some sort of slider so i have this section with control for a slider but i also need to have a container inside of that section because if we look at our basic design we have these three card sliders and we want them to fall within our actual container borders right there so i'm going to give this div a class of container and it has a little bit of padding using ems i'm using the wizardry method which you're more than welcome to look that up on my channel if you'd like to learn more about that i'm going to add a combo class of slider to this and zero out the top and bottom padding so that way our slider basically just doesn't have any padding in this section now this slider is going to be dynamic and i'll be using something called slide slide is a really nice slider that works with em's viewport whiffs and max with containers so all the scalable units that we've been using i'm basically going to drag a div inside my container and give this a class it needs a very specific class of spline just like that and then inside that i'm going to drag my collection list since this will be a dynamic slider and i'm going to pull that collection list from the case studies collection so the wrapper needs a class of splied underscore underscore track just like this the list needs the class of splied underscore underscore list and then finally the item needs a class of slide underscore underscore slide just like that and then we can go ahead and set the list to flexbox and then it can be the same height and justify left we want there to be three items inside our container so we'll set their width to a hundred divided by three uh and then add a percent sign to the end of this so each item should be exactly a third of the container width um you'll see they're all being squished because they're in a flex box so we need to basically set their sizing to don't shrink so that way they're exactly a third and we'll set their height using ems for now actually i can probably pull that from my design their height is 804 pixels high we're on a 1920 wide frame so our frame is 1920 i'm using the wizardry calculator here we said the height of our item is 804 and that means that their height in the ems is this size right here which it copied for me i can just paste that in there um and then we'll drag an image inside here as well so i'll just drag an image tag and this one can give any class but i'll call it splide uh image and then we'll set its width to 100 of the parent height 100 percent uh we'll set its fit to cover and then we'll get the image from our cms right here and let's go ahead and set the order of our collection list i'm just going to sort it alphabetically by name and then we need a little bit of space in between our actual slides so if i look in figma right now it's 20 pixels i'll have padding in each item so i need half of this gap right here so 10 pixels i'll set right there and then i can set that as the padding inside my collection item left and right and then that 10 and 10 on both sides will give me the full 20 gap that i need there and we're getting some horizontal scrolls so in every one of my projects i like to drag in a div that contains the whole page and give it a class of overflow and basically that has a width of 100 overflow of hidden and position of relative and then every section on the page goes inside that to disable um horizontal scrolling so when i have this circle that's positioned or some of these elements hanging off the edge it's totally okay like that um and that's looking pretty good there so the next thing i'll do is i'll leave the code in the description of this video but basically we just want to copy all this code and we want to paste it in the closing body tag section of our page setting so right here and you'll notice it's also gives us our own controls to click next in previous so this control right now is just a link block with flexbox and i have this svg inside i'm using this variable of current color so that way when i change the color or the text color of the parent right here it's also changing the color of the arrow inside what i'm going to do is set up an interaction where i want a control fill color inside here so i'll say control fill is the name of this class and we'll basically give it a position of absolute to the top right corner of the entire link block and let's give it a width of a hundred percent a height of a hundred percent and let's go ahead and set its background color to this navy right here um we'll give it a z index of one and so that the arrow is on top let's give the arrow as the index of 2. so we have this basic fill color here what we can do with that is basically use some negative margin so like negative 100 we'll pull it off the side right here and let me also give it a radius of 50 percent so it rounds it like a perfect circle so i'm basically going to have this sort of slide in and fill up the circle just like that which means the overflow of this parent control needs to be set to hidden so that way we're cropping off the circle inside it um so i'm actually going to set this to negative 100 and then this one will be negative 100 as well so it's right off the corner and we'll slide it in from the center just like that and that should be what we need to set up our webflow interaction um on the press state right here i'm just going to go ahead and scale it down 0.9 with a little bit of a transition when this that way when i press and hold it just shrinks down a little bit and we'll do the rest with webflow interactions so let's come over here create an element trigger of mouse hover apply this to the class so we can have more than one start an animation and we'll call this control hover in and let's basically grab the fill color right here that circle that we have off to the side set up in a move set this as an initial state and we'll move it zero percent and zero percent we want it to stay right where it is right now our second action though we'll move it over um i want to say negative 100 here yep and then down 100 here so that way it slides into view you'll see it's sliding in on that angle there then we want the arrow to be light so we can see it so we'll grab the link block and remember it's effective based off the text color which is originally purple for our initial state and we'll change it to pink for the second state so now that slides in the arrow changes to pink well you might notice it might be hard to see there's a little bit of a outline around this because the fill color isn't completely covering up the circle that contains it so what we can do is set the entire link block to a purple background color just to sort of hide that so it'll be transparent at first and then we'll change the background color right here um to purple and then we don't want this to happen right away though so we'll delay it 0.4 so that way it doesn't happen until this thing is almost completely slid into view and we'll make it take point two it can be really quick something like that that way the background color fills in after the circle is slid into view and let's give it a little bit of easing out chord is fine and that's super smooth looking great let's set our hover out we'll just duplicate our hover in right here and we'll rename it hover out and we'll delete our initial states and the first thing we want to happen is the background to change back to transparent so that way we can see the circle sliding out so this will have a delay a zero second delay and these will have a 0.1 delay so they start to happen after the background is changed to transparent this text color of the arrow needs to change back to purple and this move right here needs to go back to zero and zero so where it started um and then let's just go ahead and preview that in webflow and check it out we hover in hover out that's working perfect um so let's go ahead and duplicate this control to make one more of it and then let's add a class to this arrow of is we'll call it flipped like this and we can basically use that to set a transform that rotates it and flips it back over that way perfect and then these need specific classes if you remember from our custom code in here it has a class of next slide and previous slide that way it knows that these are clickable for the slider so add a combo class of next slide to this one and to this one i'll add a combo class right here of prv supplied and that appears to be working now inside our figma design we do have this sort of svg wave and we want that to cover the entire width of the screen meaning that even when we get past our max width container we still want the actual um wave to span the full width of the entire section not just of our actual container so if we look in here our container is going to be right there what we could do is drag some waves outside of the container but inside the section so we can do that by dragging an embed i'm actually going to use an embed for these svg waves outside of the container and i need to get the code right here of the svg wave and just opened up an svg file in a text editor to get this so now i have that wave and actually it needs to go in this section here i can give it a class of slider wave and what i want to do because it's right here you can't see it it's the same color as the background we need to position it absolute to the top of the section which means the section needs to be positioned relative and that way we can set the wave absolute to the top like that and give it a z index of two so it's on top of the other stuff and then what we can do is actually just duplicate this wave i'm gonna go back into normal view for a second and let's add a combo class to the second one of is bottom and let's drag it underneath our container and let's basically position it to the bottom of this like that and we're going to need to do a transform again and rotate it and just flip it upside down like that and then we're going to need our controls see it's not lining up because our controls are positioned relative so it's not lining up with the bottom of the container let's start controls to position absolute as well and there are three so they're on top of that um and that appears to be working right there i think we have that basically set up let's just publish this and test it out so on the live site we have all our items we can click and it's going next it's going previous we can also click and drag and it's an infinite loop either way i'm getting a little bit of offset on this uh you can see a little bit of the image peeking out underneath this wave so what i can try and do is a little bit of negative margin yeah and that would do just fine um negative zero point uh maybe six viewport width and the reason why i'm using viewport width for this instead of ems is because on larger screen sizes this wave keeps scaling up infinitely with the viewport width which means i need to do the same for this top one negative 0.6 viewport width give it a little bit of negative margin there and there um and that is looking pretty good i mean that's our basic setup what i may do because at certain sizes on larger screens this is getting really tiny these images um what i could do actually is give the slider a min height of our em value so it always stays that value but the height could be based on viewport width so uh 40 viewport width and i mean that way on most screen sizes it's still maintaining a reasonable size and then once it gets down here our min height is the thing defining the value right there so that way they don't get shrink and get too small they stay pretty much like our design and that appears to be working looks good here and then we can zoom out and looks good here as well all right so the next thing we want to do is set up our basically custom cursor so i'm going to drag in a div here and give it a class of cursor and i want this to be on top of my nav so my nav has a z index of 900 i'll give this a position fixed to cover and give it a z index of a thousand uh width of a hundred percent height 100 vh and then flex will be to center it and then we'll drag a dot inside that cursor so inside the cursor right here we have cursor dot one i guess we'll call it and in our figma design it's basically this tiny little thing right here it is six pixels because it's so small i'm going to use pixels for this to make sure it doesn't get too small and then for the radius it's 50 to make it a perfect circle and then the background color is this purple and then we need the second dot so i'll duplicate this one and then i'll duplicate the class and make this dot two and then for this one where we're basically going to have let's see is 52 pixels wide um so we can go ahead and change the width here 52 and 52 we won't have a background color on this one we will have a border though of 2 pixels purple just like that we want it to be on top of that circle so we'll switch its position to absolute and that's working pretty well i can't click on anything underneath this cursor because the cursor is overlapping everything so whenever i try and click on the slide it's just clicking on this cursor so i'm going to have to copy the class of that and head over to my embed and i'm going to have to make this not clickable so i can add it to my pointer events none code right here that just basically makes the cursor not clickable and now i can click on everything underneath it which is working pretty well so let's go ahead and create our page triggers we want one circle to lag behind the other one so we'll create a mouse move and viewport and this will be for our first one so we'll call it a circle or we'll call it uh cursor1 and what we want to do is select the first dot and we'll set up our basic interaction so this is going to be applied to the class it'll be negative 50 viewport width for this one positive 50 viewport width here and then we'll set another move on this one which would be negative 50 vh and this is positive 50 vh and let's apply this to the class so now if we preview you'll see it's directly following my cursor and i'll make it lag behind by giving it a smoothing of 82 percent um and then we need to create one more page trigger mouse movement viewport um and this one will be for cursor two and then this time we're going to select the second tie and we'll set up a move interaction this will be negative 50 viewport width to 50 viewport width and then here we'll do negative 50 vh again to 50vh and let's just apply all these to the class let's just select them one by one perfect and then let's make this one lag behind we'll do 90 and let's preview so now the smaller dot is moving faster and closer towards the cursor so the next thing we need to do is basically whenever we hover over one of these slides we want to change our two cursors from this style to these styles here so we can reuse our exact same webflow interaction that we built and we're going to do this using classes uh we're seeing the size of this cursor is 158 so if we just put 158 into wizardry that'll give us the em value it needs to be and we're going to be adding combo classes to this so like this dot for instance would have a class of is larger and then we could use that to define its width right here and its height and then we'd also change maybe its background color like this now it's also going to have text inside of it so we can drag in a bit of paragraph text and maybe make this say drag and then we can copy that text and it needs to get pasted inside of cursor.2 which means cursor.2 needs flexbox to center it up and we can give the text a class of cursor text would be fine for that um so we don't want to see the text at first we can set the overflow to hidden and maybe the text color to transparent that way we don't see it and whenever we add the class of is larger we'll just set the text color to pink that way we can see it again and we're using the css transitions applied to width height background color and text color so that way it fades when we add and remove the class instead of just snapping to that we can do the same for dot one we're basically going to add a class of is larger and then what we're doing for this is changing the width using ems so we need to get the am value we copied here and paste that in and then we'll do the same for the height and then we'll change the background color to this light pink this time 1.1 and then this one is dot 2 is larger okay so we have those two basically we want to add those classes of is larger whenever we hover over let's say the entire collection list so we can actually use the wizardry jquery builder here and we can say one hover so this works for hover in and out if we use the hover option and then we're targeting the class of our collection list so whenever we hover over the collection list we want to find an element the element we want to find is this cursor.1 and we're going to paste that in as our target class all we want to do to it is toggle a class on it and the class we're toggling is the one we created in webflow called is larger so the first time when we hover on it'll add this class then when we hover off it'll remove the class since we're toggling it we also want to do that 2.2 so i can add another action down here and say dot 2 and we're adding that same class of is larger then we can just copy all this code to generate it for us and it needs to go in the closing body tag section of our webflow project right there so we can go ahead and save and publish this and let's just test it out on the live site so on our live site we hover over and that is working just how we would expect one dot is trailing behind the other it changed the style of the two and they're like growing into that size we found us having to create a brand new set of elements one thing that i did notice is see right here when i'm on the slide is not showing me to drag until i go down a little bit further the reason for that is this embed is covering up a little bit of the image underneath so what we really want is only the svg path inside this embed to be clickable and then we want all this empty space right here to not be clickable that way it accounts for that so i can copy the class of this uh entire embed we don't want the svg inside we only want this path the actual shape of the wave to be clickable so we can basically use our html embed down here and we're going to target our class and then we're targeting the svg inside that embed and then we're targeting the path inside the svg and all we want to do is set the path to pointer events auto which means it is clickable but then we'll just add the actual class of the entire embed to be not clickable pointer events none so we can see this is working because whenever i hover over this piece of the wave it highlights the actual embed whenever i hover over this part it highlights the image so it's switching between the embed and the image and that is working just fine so now if we test it out on the live site and refresh we should notice is our cursor is highlighting over the right part hitting the edge of the wave and it works even down here because the both the waves use the same class and then we can still drag and we can still click we're also going to want whenever we hover off of the page we want the cursor to basically just disappear so zero percent opacity um so what we can do is set its initial state in css like this to an opacity of zero and then just show it whenever we hover over the body or the page of the site let's also add a transition to the opacity that way it fades instead of just snapping and we'll open up our embed and then what we're basically going to target is the body so the whole page and we'll add a colon and do hover so anytime we hover over the body we want to find the class of cursor which is our div that holds both the dots and we want to set its opacity to 1.0 which is full opacity so now notice in webflow when i hover off the page no cursor and then when i hover on it fades into view so it's fading in and out right there um so now whenever i hover off of the body on the live site the cursor is just going to completely disappear so hover on and then i hover out and it goes away and that is working just fine so whenever we hover over this trigger element too we basically want the same cursor to show up this larger one just so we know it's clickable so what we could do is open up our code embed and then in here where we said anytime you hover over the collection list basically show the two larger cursors we can add another class to this by hitting a comma a space a period and then pasting the class name of our hamburger icon or the trigger so now this same interaction will work for both of these the collection list and the trigger so let's go over to the live site and test it out and we'll refresh um so now when i hover over this it says drag i hover over this it says drag as well now whenever we hover over this one instead of saying drag we actually just want it to say open so we're going to have to change the words of this a little bit so what we could do we can actually use the jquery builder for this as well so we'll copy the class of our trigger we'll come back over to our jquery builder and we're going to say this time on hover in instead of regular hover one hover in of our trigger we want to get an element and the element we're going to get is actually the text that's inside of our cursor so this cursor text right here and then we're going to replace the text inside of it so by default it said um i believe it said drag so this time we can change it to say open so we can copy all this code and we can basically just paste it down here and let's indent that middle line just so it's easier for us to read and keep track of and then let's go ahead and save this and publish and test it out on the live site so this is the first step of what we need so when i refresh here it says drag and then here it says open if i come back over here it still says open though because we never change the text back to say drag so we're also going to have to create a hover out and this is why we did them as separate interactions of the trigger will replace the text back to say drag whenever we hover off and then we can copy all this bit of code and then come back over here and then we'll just uh paste that in right there and indent that middle line and then we should be good to go so we should have our two uh cursors working whenever we hover over here over here and back here the text is changing for us just the way we would expect and that is looking great all right so our last step is really to add some nice interactions to the menu and whenever we open the menu we want this big sort of wave to come down fill up the screen and then come back up so i actually created somewhat of a lottie animation that i'm planning to use for that and it just fills up and then fills back out so what i'll probably do is we have the menu i'll set it to display block so we can see it it doesn't have any background color for now i'll just give it um a background so we can see what's in here and then we have the container since we want this wave to span the full width of the entire screen not just the container i'm going to keep it outside the container um and basically i'll just drag it inside the menu and we'll give it a class of background and we'll position it absolute to the menu itself to the top it can be a width of a hundred percent um a height i'll do a hundred and one percent for the height and i'll show why in just a second um and then let's drag our actual lottie in here and this is going to be background uh let's call it background lottie um and then let's give it a width of a hundred percent of its parent so this lottie needs to be at the bottom because if we preview it you'll see it fills up and then fills out but our menu is going to be different heights depending on the browser height so we need another div above this lobby to fill up some of that empty space that the lottie doesn't fill up so to do that we'll drag another div inside the background we'll call it background fill and then we'll give it a width of a hundred percent and a height of a hundred percent of its parent in a background color of this purple so right now it's filling up the entire parent but if we apply flex box to the parent like this and do vertical and stretch and top now it's filling up the remaining space of the parent minus the space of the lottie which is at the bottom so if i preview that lottie you'll see it's filling up and then it'll fill out just like that returns to flat line so then all i really want to do when my menu opens up is basically just uh move this up maybe like negative 100 so it's out of the way and then we'll slide it the whole thing back into view and then we'll have the lottie playing at the same time so it gives it that illusion that it's moving down um so let's also make sure let's see what our container has a z index of two so let's give this as the index of one to make sure it's underneath the container um and then our entire menu interaction happens whenever we click on this trigger so if i click open nav this interaction right here what i'm basically going to want to do is set the initial state of the menu actually that needs to happen instead of to the menu we need to make that happen um let's delete that from the menu we need to make it happen to the background itself so just the background piece is going to move so we'll do the same thing negative 100 um and that will be our initial state and then we'll move it again uh this time to zero percent uh move and then again outside and then we'll do 0.7 um and then we'll grab the lottie that's inside here and we want that to play so we're going to start the lottie at zero percent and then over here we'll play the lottie um probably to about 50 so it's like halfway and then we'll basically set a duration of 0.8 so it's a little bit longer and outside so we have this nice move right there you'll see the lottie isn't completely touching the fill like there's a little bit of a gap right there so let's do a negative margin of 1 percent that'll make it overlap it just a little bit um and that should do it for us so if we preview open the menu you'll see the lottie falls down and then we need to set up the close interaction as well so whenever we close the nav what do we want to happen uh we basically want to grab the background again and then this time we're going to move it back up so negative 100 um duration will be 0.7 and then the ease will be outsign and then the lottie will just basically take the lottie and we'll play it till almost the very end 99 um and then that's going to happen over 0.8 again and then we'll do outsign and then we need to end the lottery where it started so right here this can have a duration of zero but we just got to bring it back to zero where it started so that way this whole interaction can repeat and then we can remove that background color that we applied to the menu we don't need that anymore and we can set the menu to display none for a second and let's test it out so we open and then when we close it slides back up perfect all right so the next thing i want to happen is for each one of these links to stagger in whenever we open up the menu and if i open it right now what you'll see is each one of these are wrapped in a link block that has overflow set to hidden and inside that link block is a container so i'm guess i'll have to move it down with transforms um let's try this so see it's just being cropped off because of the overflow hidden so i can just have it start out of view and then just slide it up into view and i can do the exact same thing for these links because they have a container right here that's inside of a link block that's being cropped off so i can just move them out of view and slide them into view now if we were to do this with webflow interactions it would take a long time because we got to do the same thing for each one of these links one by one we'd have to add a bunch of combo classes and if we ever had a new link we would have to edit our webflow interaction so i'm actually just going to use anime.js because it's going to be a little bit cleaner way to do this so i'll leave this code in the description of this video but let's just copy it and we're going to paste it basically inside our closing body tag section and what it's doing is it's looking for a class that we want to push down and then fade up and in that case my class is this nav link contain so it will basically stagger these one after the other so i'll just paste that class name in here and i'm also going to pass in these sub link contains as well so that way we can loop them all into one i'll just separate it by a comma space period and then the next class name um this is going to happen on click of the trigger which the trigger is this piece right here and it looks like it also has a bit of a delay uh so 3000 milliseconds um so i'll make sure that i basically fade these in with a webflow interaction first before queuing up that stagger um and then let's go ahead we're gonna have to check it out on the live site to see but we can set this to display none and publish and then we can test it out here we go we open up the menu and each link staggers out one by one i can close it open it again and it just keeps repeating the process of each link just staggering in one after the other and that's perfect now if we were a little further down and we open the menu we'll see a little bit of space down here we don't want that to happen so what we're going to need to do is whenever we click on this menu we want to scroll the user back up to the top of the page so we're going to give this embed since it's at the top of our page an id of top and then we'll make our trigger link to the top section right there um and that will basically if we were down a little bit and we click it'll scroll this up so that's perfect but we can still scroll up and down and we don't want that to happen so we're going to have to add a class to the body and the class we can add is overflow hidden if you've ever had it overflow hidden to your body before and then checked it out on the live site you'll notice that you can't scroll at all whenever overflow hidden is set to the body on the live page so we can just add this class to the body whenever the menu is open all we have to do is use the jquery builder and we're going to say one click of this trigger which is our hamburger icon get the body and then toggle a class in the class we're going to toggle is the one we created of overflow hidden so the first time we click on this trigger it'll add this class the second time we click on the trigger it'll remove the class and that's exactly what we want so we can copy all this code and it needs to go in the closing body tag section with our other code down here and instead of targeting the class of body we'll remove that period and just target the actual body element that way we don't have to add a class to it so now if we come back over here and publish we can check it out on the live site so let's refresh now if we're scroll down a little bit and we click it scrolls this up and disables the scroll i can't scroll up and down anymore but if i close this now i can scroll up and down again so that is working just fine um let's also go ahead and set just a couple little hover states once in our menu right here so open this back up the first thing i'm going to do is set this on the nav links so whenever we hover over a link we want to show an image like a 3d uh gif that i exported from spline um so i basically have this image inside each one of our nav links right here if i set it to display block you can see there's a bunch of them animated back there so what i'm going to want to do is basically create an interaction anytime i hover over this nav link we'll do mouse hover and we'll apply this to the class and we want to target every nav link not just the first one and we're going to say nav link hover in will be our link right here and the first thing i'm going to do is get this line and i'm going to set its width so if i do size right now i can basically set its width to 0 em as an initial state right here and then i'll increase the size to maybe 5 am so that way this line just sort of slides out um just like that and then we'll also get the image and we'll set it under initial state to display none and then we'll do display block this image is inside the link block and position absolute it's only going to do the children with this so only the one that pertains to the link we hovered over and i may even add a bit of scale so by default i'm going to make it scale down 0.7 or something like that and then whenever we show it it can scale up to one um something like that maybe that could be our hover state and i'm trying to think if we want to do opacity with this we'll just do the scale for now and we'll set it to outsign um and then for the link block let's set that to actually let's just set them both out like to outport um and let's see how that looks so it slides out pops up yeah that looks great so then we're going to basically duplicate this for hover out we'll duplicate this and rename it upper out and what we want to do here is delete all our initial states and we'll set the size back to zero em uh we'll set the scale back to i believe 0.7 is what we had and then after all that's over so i'm going to pull this one out we'll set the image to display none and now we can go ahead and preview this so it will open the menu we hover over a link that scales up perfect that one scales up we're probably going to need to change the opacity of it though um so that way it fades out um yeah we're going to need to add opacity in here with this one so we'll do opacity of zero and we'll do out court on that one as well and then for this one we'll grab the image and we'll add opacity to this of 100 and then right here we'll do opacity of zero and do out quart or actually we need to reverse this one so this is opacity 100 and the initial is opacity zero all right let's try that now okay we hover in perfect all right so we can see these and that appears to be working just fine we got these 3d sort of things rotating in the background and our line is writing out last thing we can do is basically make an underline appear under these sub-links so there should be an underline in here already it's right here and it's basically being moved over negative 100 so it's just being slid out the way because the parent has overflow hidden we're not actually seeing it what we can do is grab the sub link and we basically want to do a mouse hover and apply this to the class and we can call this one sub hover in and we want to get the line that's inside of this and we'll set its move and use an initial state here by default it's going to be negative 100 and then we're going to move it like this to zero percent so it's completely in view so we'll just leave this part for now so it's just going to slide in we'll set this to out court for that one let's preview how that looks that looks good um let's set our hover out so let's go ahead and duplicate this and let's name this one hover out and basically what we want to do is move this over a hundred percent so it's over that way and then let's move it back um negative 100 to where it started and let's set the duration on that to zero afterwards um so now let's go ahead and preview this we open this up hover over a link hover out and then it just keeps doing that endlessly sliding from one to the other all right and that is looking great we have that set up and it's looking great uh for those links if you've enjoyed this tutorial feel free to subscribe so you never miss out on another video also feel free to check out my patreon page usually around the beginning of the month is a great time to sign up and join in the patreon community at more advanced tutorials on that page so feel free to check that out i'll catch you in the next video goodbye

Channel: Timothy Ricks

Views: 16,782

Rating: 4.9656162 out of 5

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive, anime.js, jquery, wizardry, menu, bugs, fixes, creating, figma, xd, adobe, svg, stagger, full screen, slider, webgl, 3d, spline, professional, responsive, drag, draggable, custom, cursor, trailing, lottie, vector, smooth, hover, micro

Id: Wq5mJIHCDFo

Length: 41min 30sec (2490 seconds)

Published: Sat Apr 03 2021