Creating a Lottie menu button using After Effects and Webflow - Live Stream 9/01/2021

hello hello we'll get started in just one minute i have some really interesting things for today thanks for everyone for joining what's up trucker ready to to do some web flow i don't know if that's the way to say it do some workflow do we do webflow no we we work in webflow i don't know this is off to a great start all right so the stream health looks good that's what i like to see all right so it is 12 on the dot i'll go ahead and get started um just a few things today we're going to [Music] i guess there's a little warning in the back there i don't know if you can hear that but we're going to create this animated um button so it's kind of a cool like after effects button uh we're going to create it in after effects and then we're going to drop it into webflow and this can make like a nice uh menu button there that's kind of loud in the background yeah hopefully that passes there all right yeah so okay so apologies for the background noise um cool so yeah this is what what we will be making today after we make this and create like a cool little menu um we're gonna start building out an actual website and i wanna hear from you uh the community the the you know everyone watching you know what type of website do you want me to build so this is a onepagelove.com and they just have a bunch of free templates and i can go through and build any of these in webflow so yeah let's get started with this button and we'll quickly create it so first when i'm building something like this hold on one second let me see if my windows are closed because that's super loud in the background all right cool uh so yeah hopefully that goes away there in the background um but yeah i see we have two viewers feel free to post in the chat but yeah let's go ahead and get started with building this button um when i'm first building a button like this i like to go into illustrator and as you can see i've built whoops i've built this cross in illustrator so i'm just going to create a new document 200 by 200 pixels click create it is an rgb yeah it's great with live videos um never know what's going to be in the background so yeah i'll just quickly create that cross i'll select the rectangle tool just draw a rectangle i'm going to set the width to 25 pixels and the height to 100 and i'm going to change the fill so the fill becomes black and i'm going to remove the stroke so for the stroke i'll just select this here and select none for the swatch and cool so we have a 25 by 100 rectangle i'll go ahead and center this in the artboard and then i'm going to go to object transform actually let me duplicate this hit command c command v so i have these two rectangles then i'm going to go to object transform rotate rotate it 45 degrees and then i'm going to select this one object transform rotate and i'm going to say negative 45 degrees then i'll grab both of these and i'll center them within the artboard and i'll select just move it here i'll select both of these and with the pathfinder i'm going to say merge or click to unite paths i'm going to unite these paths so it just creates one x so i'll go ahead and select it hey thanks for sharing today again for sure manuel uh hopefully you saw what we're currently building we're just going to build out like this menu button that turns into an x when we hover over or click on it so yeah so i'm just building out the x here in illustrator so yeah i merged the path so let me just undo that so i selected both rectangles and in the pathfinder if you don't see the pathfinder just go to window and select pathfinder here and then click the first one to unite the paths and awesome so now we have this x nice and simple i'll go ahead and center it within the artboard hey what's up omar glad you can make it what's up noel um cool so there we have the x uh it doesn't really matter that the artboard is much bigger we're not going to worry about that for now um so i'll go ahead and save this file so file save and i'll save it to my computer to the desktop i'm going to call this cross2 because i've already created one click ok and what's great about after effects took me a moment is that you can drag and drop illustrator files into after effects i'm going to go into after effects i'm going to create a new composition and i'm going to call this menu button yeah i'm doing good omar uh how are you um i'll set the menu button to 120 by 120 uh click ok two seconds is fine we're gonna work on that in after effects and now we have this artboard so i'll go ahead and drag this cross 2 into after effects and i'll say choose layer layer 1 click ok and now we have this cross in after effects let me just make sure it's centered and that looks good so let's see here and i actually think yeah something like that okay i see what i did all right so we have the x in there and this is just going to be like a reference because we're going to use the path tool in after effects to to create the cross so i'm just going to use it as a reference and make it you see we have these grids here so it's a 120 by 120 so there's 12 grid cells and the way i did that i went into after effects preferences and i went to grids and guides and here i put a grid line every 10 pixels and a subdivision of one so there's just 10 every 10 pixels there's a grid line so we can see it here so we have 12 grids hey from new zealand hey what's up john we're gonna we're gonna create a site today so i have something in store for uh after i finish building this uh we're gonna build this menu button here so we're just creating a lot of animation so i built this cross in in illustrator and then dragged and dropped it into after effects and now that i have it in here i want the these lines to kind of line up with the grid so i'm just going to hold down shift on my keyboard and just drag out this cross until it's like lined up with the intersections of these grids and this is going to make it really easy to recreate this in illustrator because we can go to window or view and say snap to guides or snap to grid right here and when i do that i can just use the path tool and just outline this x because i need i need this x to be a path uh very excited to see the final result for sure so now we have the x and i'll select the path tool and i'll just go ahead and outline it so when i have the path tool and i have it snapped to grid whenever i click on an intersection it snaps the path to that intersection i can just go and click click click click click click and create this perfect x all right and that's it cool so i'll hide this here and now we have that x and it looks good so [Music] now this x is a path i went ahead and hid the illustrator file and we have this nice x that we can transform in after effects so the way we transform it we have this layer here shape layer i'll go ahead and rename it to cross and i'll open up the layers panel go to contents open up the the shape and then here we have the path so for this path i want to i couldn't could it not take the vector path directly from illustrator um yeah i could i think i was trying that uh manuel yeah actually let me try that real quick i think the reason i did it this way is because i was able to resize it first in after effects so that it lined up perfectly with the grid i didn't necessarily need to make it in illustrator i guess that's an extra step because i could have just like literally made a cross like it's not that hard to find you know the points where you know the cross where the it intersects to to draw a path so i might have made an extra step there so you're probably right like and and and in after effects you can right click and say um create shapes from vector layer and i think that's it yeah that's the same thing right so let me yeah that's i think that's what you were referring to um manuel so we have this group and we have the path yeah that would have been yeah i didn't need to outline it so let's go with what manuel just mentioned um it's a really good point so all i did is right click and into this uh illustrator file clicked on create create shapes from vector layer but if you notice i first resized it in in the composition and then um sorry about that hopefully that's not visible there um yeah okay so let me go back into yeah give me one second i'm just gonna close some windows here cool all right so so yeah yeah okay makes total sense all right cool cool so let me go back in here and let's see we have this layer uh group oh i'm in the yeah so let's go back in here all right so yeah we have the path that looks good and i'm not sure if in lottie you can group that's going to be interesting to see if this works out all right so let's just go ahead and convert this to a rectangle we're spending a lot of time here just on the x so i'll click on the path on this little stopwatch to add a keyframe at the beginning and then we'll fast forward to like 15 frames and i'll just grab i'll just grab the path and just hold down shift and just convert it into a rectangle so these different points i'm just dragging and it's snapping to the grid which is awesome okay so that looks more like a larger rectangle so i want it to be a little bit smaller and something like this okay so it goes from an x to a rectangle and i'm just gonna flip these so i'm going to put this keyframe ahead so we start off with a rectangle excuse me so initially we have a rectangle and it turns into an x and that's basically it um so it's just creating paths yeah uh took a big breath there so the easiest way i mean you could just create this grid create a rectangle and then just you know make an x i kind of needed the x for a reference because i'm not you know i don't have it by memory like how an x where an x starts and where it begins and stuff like that um or you could just yeah create an illustrator and then convert it to a a path all right so i'm just going to add some easing to this i'm going to select the keyframes right click and i'm going to say keyframe assistant uh easy ease and that's fine i don't want any other easing than that and that's it so we have this rectangle to an x um i also want to change the color uh for the button initially so i want the color of this button so i'll go to fill add a keyframe for color and go to 15 frames um actually initially i want this to be more of a gray color so i'm going to say 1 e1 e1 e1 for gray go to the end and change this to black all right so that's it and because this is a vector we can resize it in web flow and not lose any quality which is super awesome and i'll apply the same easing to this i'll say easy ease and and that's it so we have our animation i'll just shorten this uh timeline here to one frame past the ending so 16 frames so it's good to add one frame at the end for some reason when adding lottie to webflow sometimes if you don't have an extra frame at the end it gets cut off so just add that extra frame when creating the animation okay so the animation is done i'm going to go to window extensions body moving and i'm going to go ahead and render the menu button here so i'll select it and say let me select the folder i'll just save it to the desktop call this menu button and render click done and awesome so now i'll go into web flow and i'll add a new page and i'll just call this menu button cool and let's just go ahead and add a section let's set the section we'll just give it the class name section min height or actually let me remove that call this section two min height of 100 vh to fill the entire viewport then i'll add a div block for the section i'll set it to flex center center we have this div block i'll go to my desktop and we'll add the menu button.json file do you maybe so we have a few questions is webflow still your favorite website development tool absolutely i don't think there's anything that really compares with webflow with the functionality and the ease of use and how directly correlated it is with actual website code so webflow by by far is my favorite web design tool so i'll go ahead and drag and drop this into this div block and let's go ahead and make this lottie animation um larger so i'm going to say 300 by 300 and boom so there we have it it's in webflow and i'll go ahead and create a click animation so when we click or actually let me add some text in the center so i'm going to select this div block i'm going to call it menu button wrapper set it to flex center center then i'm going to add a text block i'm going to say menu button text we always want to label our class our elements or give our elements class names someone will ask do you know do you maybe know a good effective after effects learning source course which you can recommend absolutely i'll get to that in a sec let me just finish this animation and then i'll recommend something for you so i'll set this text absolute so it fits within the center of the button and i'll call this menu and let's change the text say montserrat we'll say bold and just make it a little bit larger and let's make it all uppercase and add some letter spacing okay i'll change the line height to unitless and say one so we have the button and yeah you could do something like this and there's a lot of creative ways you can approach this button changing for now i'm just going to scale in this text scale scale it in and out so i'm going to select the menu button wrapper so when we click on the menu button wrapper we want this animation to occur so i'm going to select the menu button wrapper go to interactions element trigger select mouse click on first click we're going to start an animation and i'm going to click the plus to start a new timed animation and i'm going to call this lottie menu button first click your description links are all not working yeah i'm updating um oh can you can you let me know which one's not working naldo i'll look into that for sure yeah let me know if you know something's not working um so yeah we'll when when we click on the menu button wrapper we're going to select the lottie animation click the plus and select for integration select lottie and i'm going to play it to 100 so it plays fully i'm going to change it to 3 seconds to 0.3 seconds to make it a bit quicker so when i click we have it converting into an x click save and on second click we're going to start an animation i'll duplicate this one that we just created and i'm going to call this lottie menu button second click okay and then for this we're going to change it back to zero percent back to the menu button so when i click it turns into an x click again it goes back into a rectangle all right so as you can see you can make a lot of cool things in webflow with after effects lottie and the lottie feature in webflow all right so let me go to the first click and i'm also going to scale out this menu text so i'm going to say select the menu button text and say scale i'm going to set the scale to 0 duration 0.3 seconds and the easing i'm going to say ease and i'm going to click hold and drag to start it with the lottie animation so i click the text scales in alright save then i'll go to the second click select the text again say scale right up here and set it to 0.3 seconds and ease and i'm going to set it back to a scale of 1. so it comes back in click hold and drag to start it with the lottie animation so i click text scales out click again text scales in all right and that's how we created the button uh pretty straightforward um you know the last thing we want to do is select the menu button wrapper and go down to the cursor and make it a pointer so that the user so when we get over this menu button the user knows to click all right so the last thing we're going to do is let's create a menu like let's let's see how this would look on an actual website so first we want to make it a lot smaller this um this lottie animation we're gonna set it to maybe a hundred by a hundred and this menu text we're gonna make it a lot smaller probably 16 or maybe 14 and that might be too small actually so let's say 150 by 150 [Music] and that's better so i click no that x is too large yeah so depending on uh you know your site and what you know how you you want it to to look this button is a little bit large but that could be that could work it actually looks nice with the smaller text inside let me change the spacing here for the text thank you omar appreciate it so we have this nice x and i'll go ahead and position position this button in the upper right so i'll select the menu button wrapper i'll say position absolute and position it in the top right and then give it some margin like 40 from the right 40 from the left again this is working with like a full viewport layout if you're working with like a container you definitely want to put your menu button in a good location where it's easy easily accessible but i place it in the top right and i can go ahead and now in the body i can add actually in the section i can add the menu wrapper and i can set it to [Music] let me try again div block and i'll say call this menu wrapper and i'll set it to a position of fixed and full and let's give it a background color so let's make it let's make it the same color as the button so one way e1 e1 e1 okay so we have the menu wrapper it's fixed that looks good um so when we click on the button and let me put the menu wrapper behind the button and actually let's change the color the menu oh okay let's see one e one e one e something like this oh we'll make it we'll make it blue so it's easily visible actually i don't like that e1 e1 all right so it's just gray cool so let's bring in the menu in and out when we and let's add some some links to this menu so i'll just set it to flex enter center and we'll add some text links and we'll say vertical and add some margin from the top and the bottom nav link copy and paste and you have some nav links in there and let's remove the underline change the color to black and change the font make it bold say something like home about services and contact okay let's make it all uppercase and a lot larger set this to unitless and one and that looks pretty good then we'll add some more hold down option add some more spacing there something like 30. and that looks good let me add some letter spacing here to make it look cool all right that looks cool all right so we have our menu so all we have to do is go into you know select the menu button wrapper go into the interaction go into the first click i'll select the first click then we'll select the menu wrapper and we'll say move and i'll move it i'll move it up so it comes from the top to the bottom i'll move it up negative 100 percent and i'll set it as the initial state so i'll just click it here and then we'll move it back down to zero percent and i'll change this to three seconds and an easing of ease and i'll start it with the lottie animation click save and on menu button second click we'll select the menu wrapper and we'll move it back up to negative 100 and using of ease duration of 0.3 seconds and i'll start it with the other ones alright so let's take a look so we open the menu and that's it so we have this full screen menu that comes in from the top to the bottom with this animated um menu button uh yeah so it's very cool depends on the design you're going for like this button obviously wouldn't work for all websites it's really bold um you know you can make the these lines much thinner in after effects um but yeah it all depends what you're going for so again this button was inspired from code drops which was this button here and their proportions and dimensions are are pretty similar or actually i i see what they did with this one or no it's it's actually the same no it's that's what we did yeah that's exactly what we did pretty similar i think their ex has different um different sizing um cool so yeah onto the website build so i know jonathan mentioned yesterday if we could you know like build a website and yeah let's go ahead and start that so i'm on this website called onepagelove.com and they just have have a bunch of free template templates that you can download and and yeah and so there's a few that i liked that i feel we can start recreating there's this one called figma land and let me preview it um demo okay well i guess they don't have a demo here but it's just a really nice and simple site kind of like this one um that one could take a while to build it's kind of a longer build and let's go back there's there's this one this one's actually quite nice demo let's see if we can get a demo of it nice so were there any questions on that button i created oh this one would be a really great one to build for sure uh quick question how do you style the mobile menu on a site that has a normal menu i always struggle trying to select the mobile version of the menu in the designer okay good question how do you style the mobile menu on a site that has a normal menu yeah i think you might be referring to the nav bar here so let me create a new page um so navbar and then you might be referring to this icon or this menu button possibly yeah i would say that this navbar does need a little bit of work as far as how how users use it i know can be a little bit confusing so if you add a nav bar on mobile it automatically converts into a mobile menu so you can select the menu button and then in element settings select open menu and then you can you can add more menu items in here and it should add it here too so like if you add menu items in the mobile menu it'll add it to the navbar as well so if i copy the contact or if i copy it here and i go into the mobile and open it we now have multiple nav items there if for instance in this example with this menu button um if we go to mobile i wouldn't use the nav bar here i would just you know i have a custom menu so as we go down to mobile like i would just resize this basically so like on mobile landscape i would make this i'd make the lottie animation like 75 by 75 and resize these text items like 28 pixels so everything just gets a little bit smaller and i would change the margin here so it's a little closer to the edges something like that uh can you build youtube using webflow uh yeah you could build the youtube layout using webflow but youtube is i mean yeah i mean you could all the features and functionality of youtube would that's i mean that's tons of engineers working on making sure youtube works well uh yeah yeah you can open it in the designer yeah just select it and element settings and open menu very cool all right so let's go back in here i think we're going to go ahead and try to build this site here i mean it has everything drop downs icons buttons you name it sections you know this could be a really good site to showcase the power of webflow it is kind of a cookie cutter template like there's nothing really special about it but yeah it looks like a fun website build all right let's look at the responsiveness nice yeah cool so let's just start this we'll see how far we get um in about 30 minutes and as i'm building if you have any questions just feel free to let me know and let me download it go download free free download perfect let me show this in the finder avax do you think besides webflow what tech stack do you use um besides well flow i mean yeah that's a good question yeah so like i mean if you want to integrate with other other things you could use like zapier um i don't really have a large tech stack just because webflow offers pretty much everything with their hosting and um and yeah i'm not really integrating a lot of third-party applications for my personal website i don't need many things because i'm literally just offering tutorials on how to use webflow this is hype first live web full build if always wanted to watch this oh appreciate it appreciate it um i know those are crypto uh coins um so i'm not sure your real name but that's that's fine um sorry that was kind of awkward but uh yeah so for my personal website um i don't need a large tech stack i just use webflow to build it and then i link out to my templates my interactions my tutorials you know i have different resources learn ui design is a great resource that i highly recommend to anyone wanting to build a website um it goes over like the design uh principles and or yeah how to how to build a site or how to build a good ui for your site and then in bottle elements that's has design elements my tutorials on youtube and then my super chat like i have these super chats every day monday through thursday 12 to 1 pm can you tell me how to make customized sticky navbar with change color while scrolling between the section um that would be a super chat feature povish if you wanted me to go over that i would need a super chat because that's like a very specified request very specific request so if you want to drop a super chat i'd be happy to cover that and super chat is just kind of like a donation or like a little payment for like you know if you want me to review your site if you want me to um help with like a something you're have you're struggling with in webflow or a very specific um design uh feature that you're looking for if you want me to cover how to do it all that requires a super chat but you know while i'm here and building like showcasing how to use webflow and and stuff like that like that's that's just me wanting to share with the community all right so i follow you since uh adobe muse was live lol yeah globber we go way back yeah that's uh you know i'm not mad at how things turned out because it led me to web flow and honestly i wish muse would have became something like webflow but muse just yeah they were lacking with the updates with you know creating new features and um yeah webflow is like eons ahead of of adobe muse so yeah it all happened i think well you know the the end of muse led me to webflow and once i opened webflow i was like where have you been all my life because everything that i wanted adobe muse to do webflow was already doing it especially flex flexbox muse didn't have flexbox it was just all absolute positioning which was not easy um yeah so so yeah and yeah if you want to support these these youtube videos that i'm doing uh pretty much every day monday through thursday feel free to send a super chat or you can buy me a coffee and there should be a link in the description um with with buy me a coffee i might add it to the website but i have a link where you can um buy me a coffee so they're in my interactions i'm actually updating all my my interactions here i have over 151 they're free they're cloneable but i'm adding yeah this is a cool one that people like uh i'm adding why does my voice keep cracking i'm adding a buy me a coffee link where you can send me you know just pro help help support my youtube channel and and the content that i'm creating uh because it does take time and uh energy to create these uh demos hey 474 what's up i think you had a request yesterday i'm not sure if i covered it but um yeah for anyone who's coming in a little bit later this is what i went over and this tutorial just creating this animated menu button yo i'm avax brisbane australia almost 4 am at the moment still keen to watch you awesome thanks darren that is early that is super early um nice so yeah let's go on with the build i appreciate the interaction um this is one thing that i like way more than when i was just making you know videos and uploading them just the live interaction is uh is super helpful and and fun so okay let me go back into the pavo um website and let's go to the images so here are all the images to recreate we're going to go ahead and recreate this website here you know actually looking at it now i don't really like it it's too i don't really like the design of it let's uh let's rebuild this one here work at the speed of thought this one this dark theme i like and let's go download it for free it's a figma figma file let's duplicate it and i already have my figma opened so let's go ahead and into figma and go into yeah here it is so i'm in figma and awesome so let's take a look let's see what font there we're using here and if you haven't worked with figma before don't worry um it's all good you can just watch me using it and that would work what's the text for this okay here we go oh it's graphic ah i don't have graphic and it's not a google font a hundred wow thank you um pavish can you tell me how to make customized sticky navbar with changing color while scrolling thank you great work all right everyone so i just got a super chat so i definitely have to honor that and show pavish how to create a sticky navbar with changing color while scrolling thank you cool so let's go ahead and do that um this is the the fun thing about live chat so uh yeah this can be pretty straightforward i'll start from scratch pavo uh povish excuse me um so we have a blank site and we want to create a nav that changes color as we scroll through the site so the first thing i'm going to do is add multiple sections to the site so as we scroll we have some scroll height so i'll just go ahead click the plus add a section and i'll just call this a section section one and i'll set the min height to 100 vh and we'll change the color here so i'll just say change the background color so we can see it i'll make it a darker background color and i'll just i'll just use variations of black actually so we have this one this section and i'll just copy and paste this section uh three five times i'll go ahead and give a combo class to each section so i can change the background and we can distinguish each section give it a combo class of three adding combo classes lets us add unique styling to each section and combo class of four and feel free to ask questions as i'm going through if i go too fast let me know section combo class of five and zero okay so we have our different sections and we're scrolling through okay so now we can add the fixed nav bar so i'm going to click and add a nav bar we see it places it here let me place it in the body and at the top so it's up here and to have it sticky let's just set it to i'll give it the class name navbar to have it fixed at the top i'm going to say position fixed and i'm going to select the top option here so it spans the the top of the viewport so i'll preview and as you can see we have these different sections and we're scrolling and yeah and that looks good so we want to change the color of the nav bar as we scroll so what we can do is we'll select the first section or let's select the second section here and go to interactions and we'll add an element trigger and then we can say scroll into view when this section scrolls into view we want to do something on the website um so is this is the stream still looking good because i'm getting a a kind of a message from youtube saying the stream isn't smooth or something like that but it has sent me that before so um so hopefully it's still good so i'll select scroll into view and we'll start an animation i'll click the plus and i'll say section 2 scroll into view and i just name it so i know as i'm working on the site what pertains to what and now i'll select the nav bar click the plus go to background color and i'll select the color here and we'll just change the hue here so i'll say uh yeah all good cool thank you thank you i'll say 90 or let's change it to yeah uh my color palette is not going to be great so just bear with me with that so yeah when we get to this section we're going to change the the color here and that red is just obnoxious there it's two okay let's try something like that all right we'll change it to this color and we can adjust the easing and things like that i'll just change it to ease and say save so yeah so we have it there um so we have section two and let's go to this next section and we're going to do the same thing we're going to click plus scroll into view start an animation i'll duplicate this scroll into view i'll say duplicate select it here and we'll affect the nav bar again and let me just rename it to section three scroll into view and we'll just change the background color something like that click save so let's scroll to the top and i'll fix this so initially it doesn't change color there but as you can see we're we're changing the color there for the background um yeah so one thing i'm noticing is is that when we when we get out of the scroll or out of that section it's not changing color again um so it changes when we scroll into the section but if we scroll out of the section it doesn't change it just stays that color so let me think about the best way to do this so we want to add let's see scroll into view yeah just thinking for a second so scroll into view scroll out of view it might be easier to add a while page scrolling animation let me let me test something so when scrolled out of view so let me select this section and let's select when scrolled out of view i'll start an animation and section two let me duplicate this and for the background color yeah that wouldn't that wouldn't quite work so what we're gonna do is we're gonna do a page scroll animation so scrap what i just did sorry about that um if you have any any suggestions on the scroll interview scroll out of you let me know but we're gonna do a while page scrolling animation so let me delete these and we'll just do a page trigger and we'll do [Music] while page or let me see page scrolled no while page is scrolling we're going to start we're going to play scroll animation i'll click the plus and at zero [Music] so right here that's fine so when we get here so at zero let me select the nav bar click the plus select background color and we'll just change this to to yellow okay and at the end we'll change this to to blue okay so save all right so yeah that that works there do do scroll into view i'm just trying to think while the scroll into view didn't work as intended okay all right so yeah so we have the navbar and let's do live preview so when we get to about 25 let's add another animation and we'll change the color here to let's say red and these are good questions they make me think for sure um then i'll duplicate it let me see here so do something like this okay so let's see 25 bg color okay that's not working either this the scroll interview is the way to do it scroll into view and scroll out of view sorry for all this uh dead air i'm just uh thinking on the best way to do this this isn't the way to do it here so yeah um pavish if i don't get this today it's just gonna require me a little bit more thinking uh while in view option for exactly these things um yeah that would be cool wouldn't it i'm just thinking like why is this so difficult um so elements let's see scroll into view when page is scrolled into view start an animation and plus i'm going to call this one select the nav bar oh wait a second let me did i add it to the nav bar okay now section one okay cool it's okay take your time appreciate it omar sometimes it's not easy doing live streams when you're kind of put on the spot a little bit but um i appreciate that so let me select the nav bar and i'm going to select background color change the background color cool so i'll click save okay and then when we scroll and this into view let me add a new one i'll call this two select the nav background color and i'll change this to blue save and then this one say three three background color oops select the nav bar save section 4 scroll into view start animation duplicate for save and then this last one scroll into view start an animation duplicate works well with webflow 3d elements with animations and set it to five and make that red okay save so let me let me just copy this and initially we're going to change the color to this nav bar to that first color all right so let's see so scroll okay all right so the way to do this um yeah no fin suite extension installed um i i started messing with it a few days ago but i haven't gotten fully into it so um i'm going to work with it a bit more and then and then and then i'll report or like have more more of a review on the finn suite plugin um yeah if you were there for my first kind of live chat i kind of went into detail my thoughts on it but i definitely want to check it out um so manoa wrote yeah you should work with scroll into view on the section it's just important that also the first section also has an interaction to switch it back to the original color if you scroll to the top yes exactly so i just figured out the way to do it um it's yeah it's a bit it's a bit weird um what you have to do is so the order in which the colors change from bottom to top so right now we can see the colors changing as we scroll into each section we just want to reverse that color order as we're scrolling up um yeah so for example um and this is going to take a bit of kind of thinking so or finessing so when we scroll out of this last section so when we scroll back up we want to change the nav bar color to to this cut to the section four color um so i'll select section five and we'll go to the interaction and let me go to section four and copy this color here and then i'll go back to section five and then when scrolled out of view we're going to start an animation and i'll duplicate 5 and i'll call this 5 out and then i'll change the color to this color the color of section four so let's start so i scroll down when scrolled out of view five you think the same trigger would work though you you did still scroll into view yeah i was thinking that for sure as you can see i've never made a navbar change color on scroll um so so yeah uh we have this color changes and is that the color of the last section do we have to add some more scroll space what's the color yeah no that's the color let me change this color here i don't can't quite distinguish it from the last one okay keep up the live streams i gotta go but really like your previous content while watch this on replay later would also be cool if you share your thoughts on client first by fun suite or even do a okay yeah that works all right so section so out of view scrolled out of view 5 out um i have an idea i don't know if this is gonna work let me try it let me try it with this section scroll into view so offset let's set the offset to 50 percent see what that does no that's that's no good so zero percent scrolled into view let me see something like this nope okay there probably is a super simple way to do this but this is a good challenge i like it um so let's see so five go it turns blue and then on the out we go back to the pink color so i'm scrolling actually that works that does work um one thing i noticed okay so this is the way to do it it's it's a way to do it let me just change the timing to zero so we can see it much better so i'm gonna set the duration to zero for all of these all right i think we're gonna get there um so manual that's a good point but i think i think we can get there i feel like i've got the idea here for how we can do this all right so i changed the duration to zero so we can see the snappiness of the color change um so this is section one and i'm gonna change this to one all right so we scroll green pink blue wait a sec why is that blue what's four did we get that color wait so green purple blue why did we skip all right well let me just make sure sure all these colors are correct here we already have a blue color i'll change this to like yellow green four is okay let me change this purple color to okay save and five is blue okay okay so one two three four okay this should be four and five okay i think i got it so green green oh what is that about all right let me just i'm gonna try something so five out i'm just gonna go in reverse now so five out change the duration to zero i'm gonna go [Music] into four and just copy this color so the color is going to be here save okay and i think we have to the offset we have to make it a hundred percent for the scrolled out of view yeah so the offset we have to change to a hundred percent so that's the way to do it so zero percent for when scrolled interview the offset and a hundred percent for the offset when scrolled out of view and basically we just need to we just need to know what color we want to change the section or the navbar when we scroll out of a specific section so when we scroll out of section 5 we're going to change it to the section 4 color and so for section 4 we're going to start an animation and we're going to duplicate section four wait no no no no when we scroll out of section four we want to change it to section three color okay so delete so i'm gonna duplicate section three and i'm calling i'm gonna call this uh for out and so we have that color and save and then change the offset to a hundred okay so let's see if this works i think that works so section okay section five is this color is blue five out is green and is that the color of four four is green yep and then so the color of three is now the color of three is this color so we need to copy this color and go into section four and change it to this color click save okay let's start from the beginning um so let's see color changes change color yeah it's not quite working either yeah maybe the only way to do is while paige is scrolling in or i might have messed up some colors here but hopefully this help helping uh pavish um so let me let me just try a little bit more here so section four and section four in is this color and then section four out should be okay yeah that's where i messed up so section three in oh why are those the same color and section four yeah these shouldn't be the same color that's probably where i got confused okay one more time so scroll color changes changes changes color goes back and i'll just try section four out i was probably like watching paint dry right now me trying to figure out this uh this interaction but if i don't get it down today we're gonna we're gonna come back to this for sure this is match the color great thinking great thinking pavish so let me just grab a color palette this will this will be the last uh attempt here just so we don't get confused um pavis just had a great suggestion i'm gonna go to coolers.com just grab a color palette and we're going to try to get a bit more organized here just to see if we can get some good stuff going um explore let me get a color palette let's go um i'll do another 10 minutes here but wow this i don't know why this isn't this is so difficult in a way um open view palette let's view the palette all right so we have a color palette and i'm just going to use it to color the sections so section one section two section three and four and this last section all right that's more colorful that's better okay so the navbar initially um we'll just do it in reverse reverse color so we can there's some contrast so we'll start with orange and we'll go to this lighter orange all right yeah so when we scroll into section two so let's go into section two let's yeah i mean i could match the navbar with the color but that would be counter intuitive we wouldn't know i mean you could just set the background to transparent in that case for the nav bar we want to change the color so so save then section three pick this blue color and this was three section four section three is gonna have the same color but that's okay okay and then section five okay so boom and i'm going to um yummy okay so we just have a scroll into view for each one so we start with that color put it up with two was that the color for two start with orange so two yeah two should be yellow we're starting with red oh section one has yeah we need to change this color okay so section one why is that blue oh oh my god okay so section two right here scroll into view nav bar it's yellow three four five and one two offset okay so section two this should turn yellow but it doesn't that's fun all right we might have to get back to this tomorrow polish when i've had a moment to to think about it but definitely a good challenge trying to think there's our page trigger while page is scrolling mouse movement viewport we're approaching this the wrong way while scrolling in view animate animate while element scrolls through viewport maybe this is it while scrolling into view offset 75 on both in and out of view works pretty good ah that's an idea uh let me try this while scrolling in view to see if we can get there so let me i'm going to start from scratch oh okay wait delete that delete this delete this delete this okay cool so while section one is scrolling into view and you we might have to go with what manuel says here 75 offset on both in and out of view works pretty good that's an idea play scroll animation when element starts entering when when it starts entering yeah let's start when section 2 comes into play let's change the color to to yellow this yellow of the nav bar let's change it back on color excuse me to yellow okay and yellow okay so the same color for both the you might have to give it an offset while scrolling into view to give it 10 offset okay and duplicate this just orange did i do it this could be it so two save okay i'm gonna i'm gonna remove the offset no offset so let me go to section one wait no that's oh no this is two this is two nope never mind yeah that's two and this is one so one no offset okay and then two no offset okay i guess we do need an offset maybe by like one percent me go into two oh okay oh that's it i think we did it yay okay pavish thanks for your patience that was quite something let's add five percent offset to two so it starts a little bit quicker yeah five percent off it offset works well all right let me just finish through to make sure everything works correctly and then i'll explain how i did this um so let's go to section three and we'll pick we'll just make it white for section three so we can see it better so while scrolling into view we're going to play scroll animation i'll go ahead and duplicate number two and just call it three and then we'll change this to white so we want the zero percent to be white and 100 to be white sweet thanks everyone thanks omar um click save and you'll send an offset of five percent so offset is just uh it'll make it start sooner i believe and it just looks better so yeah so we scroll changes yellow and let's see three okay so three and so many different things here so one two three okay let's see so we're at section one section section one two whoa oh my god ah thanks for starting confirms we're not alone figure out those things for hours sometimes yeah yeah no i get it i get it somebody probably has a super quick solution to this so we might have to change the offset for each of them to like 50 maybe 50 for two 50 all right well that's fun why let me let me try zero for the offset this is so fun uh yeah sure once you know the solution it's always easy yeah okay so when when section two comes into view it should start immediately so maybe i did something wrong here two yellow so yellow yellow yeah remember it was here let's see white white okay and then this first section uh-huh let's see so let me just think about this for a sec so when element starts entering it becomes this color oh wait oh element starts exiting maybe that's it oh i think i did it oh [Music] well this this was in depth you you definitely picked a good one uh povish so let's see let's change when element starts exiting on all of these when element starts exiting okay so i guess when element starts entering when element starts entering starts exiting an element starts entering so maybe this should be is fully visible when element is fully visible yeah change the color element is fully visible we want the color to change and when the element starts exiting it's fully visible no no no it should be when it's when it starts entering same thing here starts entering starts entering okay yellow white okay so that's that works let me let me go into this section here number four and we'll add another color so let's go back in here we'll add this color so while scrolling into view start an animation let's duplicate number three we'll call this four and we'll change the color to this color to this and save okay so start at the top yellow [Music] white okay white all right so let's see if we got it to work except this first section this first section isn't quite working and i think it's just because it's the first one and we might need to add an offset but we'll figure out this first section so we start we have orange then yellow then white then blue so now let's go back white yellow okay i'm definitely three four yellow white blue is that right yeah i'm off by one somehow so section one two three four because it should be blue when we get here and right now right now it turns blue when we get here everything is great on desktop view until i hit the first break point for sure manual yeah you know the solution is always easy cool um this one is going on longer than i expected so i'm off by one and i wonder why that is so while scrolling into view it should turn blue here but it's turning blue here so let's see yeah so i'm gonna end it for now um i'll come back to this tomorrow and probably showcase how to do it in five minutes but uh hopefully you learned something you can see the possibilities with webflow like having things scroll into view scroll out of view thanks for watching me troubleshoot i don't know how exciting it was but you know hopefully some of my next uh troubleshooting or my next super chats can be a little bit quicker than this one this one was just like a very interesting one for some reason um but i'll look up you know there's there's definitely a lot of great resources online on how to do this uh but i just wanted the challenge of trying to figure it out personally and kind of showcase it to pavish but hopefully you got something from what i was working on and maybe you can try figuring out your figuring it out yourself as well i might just be off by one section or have to apply the color to the previous section or something like that or like you know create an offset with the sections somehow um but yeah hopefully that helped i'm gonna end the live stream um so again what we worked on in this live stream was trying to change the color of a navbar uh on scroll and we worked on this menu button we built it in after effects and added it to webflow so i think tomorrow we're gonna we're gonna go on the theme of buttons again um just because i'm so inspired by these buttons here from code drops i want to create uh this button here because it has a nice easing to it nice animation so i want to make it like a little bit bouncy like it is here and uh something like this is relatively easy just how we change the shape of the uh the x the rectangle to an x it's the same thing here so you just draw you just take a path and just move it basically like you draw like a this kind of shaped oval and then just move it up so you could have two crop two ovals like crossing like it is here and then just move animate the paths so that they animate like this and then we can just add a really cool easing um to like a bounce easing to make it look cool um yeah so could you still share a good learning source for oh yeah uh for sure meanwhile so the one that i used and that i studied is motion design school um so it's motiondesign.school and they have a ton of courses that i highly recommend and um yeah so you know there's there's just tons of courses for whatever you're looking for um i took i started the ui animation essentials um i started off with this fundamentals on after effects i think it used to be free but maybe one of their classes they have a class that's free that goes over like the fundamentals of after effects i took motion beast i finished most of it actually it got super intense motion beast got near the end it was like you know creating like a video game it was it was wild um so motion beast if you want to learn everything about after effects i would recommend this one motion beast and then they just have tons of other courses they have 3d animation and just a lot of a lot of cool stuff so yeah that's the one i would recommend thanks everyone for watching uh and bearing with me uh maybe in the next one we'll start building uh this website which one is it yeah uh this one here do i have it in my figma yeah so yeah let's start building this tomorrow i'll download all the assets from the sigma file and we can just start building it it is using graphic for the font um so i'm just going to use like a a google font alternative to graphic that we'll find all right so yeah um well thanks pavish uh i'm i'm a little bit drained after that uh not drained but like that was a good challenge but that's what we're here for right we're here to level up our web flow skills and learn something new every day and for those of you who are watching and want to learn how to build an actual site from scratch we're gonna definitely get into that and you know definitely feel free to ask questions as i'm going through things and uh yeah it's a lot of fun so yeah that's it for today's tutorial or today's live chat i'll see you tomorrow so monday through thursday then we take friday off or i take friday off and we start monday again all right awesome thanks everyone have a great rest of the day and i'll see you tomorrow thank you peace awesome awesome all right uh any last questions i'll just open it up for any quick last questions i'll give like a minute or so cool cool thanks omar appreciate you joining all right everyone yeah see you tomorrow bye

Channel: WebDev For You

Views: 345

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, after effects, after effects and webflow, after effects and lottie, lottie and webflow, lottie animation, lottie menu button animation, animated menu button, animation on scroll, webflow interactions

Id: 91jZsXF716s

Length: 95min 0sec (5700 seconds)

Published: Wed Sep 01 2021