Creating an animated button on hover using interactions in Webflow - Live Stream 9/16/2021

hello hey everyone john here with web dev for you here to help you build beautiful websites without code in webflow uh for anyone who's just joining the live stream or or is new to the live stream um i run these live streams every monday through thursday from 12 p.m central to to 1 p.m central time and within the live streams i cover pretty much everything webflow how to build in webflow how to create interactions and animations in webflow i also provide a bit of support within the live stream as well so if you have a question you can ask it in the chat and if it's a personal question or if it's a question relating to your personal project i do ask for a super chat so that we can the super chats just help support the channel and it also allows me to help you write right here live on youtube all right hey alex and bass what's up um so yeah today we're gonna keep it pretty light uh because yesterday we we really went in the weeds as far as the the website build so we're going to take a little bit of a break from layout building because there's just so much that goes into building a layout and a website so today i'm going to keep it light we're going to focus on building just some simple animated buttons and just have fun with interactions and webflow today so that should be fun so just as a recap let me let me open up the site that we worked on yesterday and i'll just pull it up really quick yeah so yesterday yesterday we worked on this site and we just built this layout below here so this was a pretty good build there was just so many different concepts that i was trying to cover within the span of one hour that it got a little bit overwhelming especially if you if you were new to webflow um what i talked about yesterday might have been like a different language or just too many too many different things to cover in in one session but yeah basically i just created like one one section here like one wrapper and we added you know different div blocks and text inside of different wrappers and and things like that and it made it easy for us to make the web to then make the website responsive using the specific layout i created because we just had to use flexbox to change some of the horizontal elements to vertical and then i could change the ordering of the image and the text using the flexbox property and webflow which made it really easy to make the website responsive across all devices so so yeah i'll probably rename this project to mountains project or something like that and then post it in uh in chat so everyone can see it and take a look i can post i can post the read only only link actually yeah i'll do that let me just rename the project to something more more related to the project so i'm going to call this web dev for you live stream build mountains build our live build mountains all right so save changes and i'll post uh the read-only link to this project in the chat hopefully everyone can see it just let me know once i post it oh and the link is too long alright so i can't share that in chat okay i'll just share the the the actual webflow.io url and i might find a link shortener so i can actually share it with everyone in chat is that something you would like to see like the builds that i have would you like to see the read-only links or just let me know and chat hey what's up graphic design pod how's it going hello cxc agent what's up welcome to my live streams so i i do these every monday through thursday from 12 p.m to 1 p.m central and we just go over everything webflow how to build websites in webflow creating different layouts creating animations and interactions and i also provide support within the live stream so this is what we built yesterday you know it's just a quick quick simple site and we made it responsive so yeah we added like this parallax effect with the mountains alright so i won't go over this too much more in today's session today we're going to keep it light and just create some animated buttons and if you have questions during the live stream just feel free to write them in chat and i'll be reading everything in chat so today this is codedrops.com um yeah i believe it's code drops yeah codedrops.com and we're just going to create some of these buttons in webflow so [Music] i've already created this button no wait this one right here so this one if we go to let's go to webdev4you.com yeah hello hello globber how's it going um welcome to the live stream and um yeah so in my interactions here i've created one of these buttons so this button here something similar this this gets triggered on hover so let's see what button i want to create in this live chat so let's create this add button this this seems like a fun one where it's like a circle and this in another circle like goes down and the text changes so that'll be what we build uh today yeah yep for sure uh nice glad to be here for sure um so yeah let's go ahead and get started we'll just keep it light and breezy feel free to write anything in chat anything you're curious about you know with webflow just feel free to to write and chat alright so we'll start with a section so in the body we'll just add a section and i'm holding down command k to add a new element or you can go to the elements panel click the plus and then add different elements here and i'm just going to call this section i'm going to set the min height to 100 vh so we're working with a full viewport section i'll set the flux setting to center center so we're working in the center of the canvas here all right and for the button i'm going to make it really large initially so we can all see it as i'm working on it so this button is probably like 100 by 100 pixels in width and height so we'll do something like so i'll add a div block and we'll do like a 300 by 300 pixel button um and we'll make it smaller later but this is just kind of to you know make it big so everyone can see it as an example all right um cool so yeah we have the gray color initially so i'm gonna give this to block i'm gonna call this um button or circular button wrapper okay i'm going to give it a background color of gray so let's just see if i can grab the gray color used here we don't have to use these colors but why not so let's see so it's e7 e7 e7 for the background and i'll make the border radius 50 to make it a perfect circle and looks good so then we have this uh black circle that just kind of goes down so the way to achieve this effect is that we'll just hit copy yeah we'll just copy the circular button wrapper and paste and i'm actually going to paste the second one inside of the first one just like that so they're overlapping but we can't really see it so i'm gonna duplicate the class of the second one and call this inner circle and we'll change the background color to not black but something close to black i never like using black exactly so maybe yeah two four two four looks good um so then we have the inner circle so that looks good so then for the circular button wrapper uh hello excellence how's it going uh yeah it's going it's going good how are you um yeah i don't think i finished that sentence well but uh yeah how's it going um yeah i'm keeping it light and breezy today we're just gonna work on a few animations and you know work on a few buttons if you were here yesterday you saw that we kind of went into the weeds as far as building a site we worked a lot on layouts and different font concepts and everything like that i did use rem and ms um what i might do in that case because i know you brought up rems and you made a really good point um i might just make one live stream or do one live stream around rems and m so we can all really grasp the concepts behind it but in the meantime i might stick to pixels just because once i start talking about rems and m's it does overcomplicate the specific other thing that i'm trying to showcase because if i start using rems and m's then i feel like i have to explain it more in detail so i might just do one live stream where we just spend the whole hour learning about rems and m's and different examples on how to use that font style uh for the site but yeah you brought up a great point the other day on on uh how it's beneficial to use uh rems and ms uh you're way too underrated you deserve to have hundreds of you oh thank you jurgen appreciate it yeah hopefully at some point um the goal is to stay consistent with these live streams and hopefully the word spreads and more users start coming to the live stream and it just becomes a place where we all learn you know webflow together and i'm able to answer questions for for new users and users wanting to cover different topics and maybe even some more advanced topics maybe even some custom code things as well so alan wrote um hey would you be able to do a stream where you do a page build using the fence suite client first system i'd be really interested to see how you use it um yeah i have gotten that request uh i think it was last week or a couple weeks ago so i'll play around with the client first system i did take a look at the fin suite chrome extension and i'm yet to really work with it i did see that it added like new tabs in the designer but i'm a little initially i was a little bit hesitant to use it because i don't know it wasn't native to webflow so i don't want to add different things that webflow didn't create into the site but i haven't given it a fair chance so that will be coming soon so just stay tuned to the live streams i will cover that in one of these live streams maybe this weekend i'll spend a good good time with it one thing i did see that i liked i think it had something to do with um global colors like you could pick more global colors or something like that or create a specific style guide i really like that part of it uh we're good over here and it's too true we need to run your viewership up yo yeah appreciate that for sure i would uh be super grateful like are like super appreciate appreciative if the word gets out and you know the i don't know what i'm trying to say i don't think i communicated that clearly but if everyone kind of shared this live stream and kind of spread the word i'm not into really promoting too heavily but you know if you know anyone who's new to webflow and has questions or wants to wants to see someone just building a webflow just you know send them send them over and we'll get to chat the chat popping a little party up in here i don't know i'm not a party or so i don't know if that landed all right um cool so back to this button um otherwise i'll start getting kind of silly with it uh so we have the circular button wrapper um yeah thanks alan appreciate it the circular button wrapper we have the inner circle and then for the circular button wrapper um someone wrote john the finn tweet client first is actually different from the plug-in this is more kind of a template design system for sure yeah definitely yeah i kind of had that in mind that it was more of like a design system but but yeah i know uh joe from finnsuite does a lot of great work so yeah i'll check it out a hundred percent uh let's do that for monday let's let's let's uh check out the client first on a monday nice so alan wrote make sure you don't burn yourself out you seem to be doing loads which is great but hopefully you can keep going long term yeah that's the goal um i totally understand that there's been a few projects that i've tried where i have got gotten burned out a little bit so i have learned from those different projects you know i was doing an interaction almost every day and i tried a subscription but i was also working at webflow at the time so i kind of had to stop doing that because i was doing support i was a customer support representative for webflow for about two years and i couldn't really do any extracurricular things or side projects because by the time the weekend rolled around i just wanted to take a break right because i was answering uh customer questions about you know six seven hours a day and answering that many questions you do get a little bit tired where you just want the weekend to chill so since then you know now i'm working on templates um i have a new template template hopefully will be out soon and just working on interactions again obviously not doing one every day and then these live streams these live streams take up you know about an hour hour and a half of my day and then with prep you know maybe a couple hours in the day to prepare for it um but but yeah so far i feel really good i don't have any signs of burnout you know i got plenty of time to do the things i like so so i appreciate that allen thanks thanks for the consideration definitely hey lydia hello awesome awesome so so yeah let's this button shouldn't take too long so i'm okay with reading the chat because this is going to take just a few seconds or a few minutes to build uh but basically yeah we're just building uh this button here so this is from codedrops.com we're building it in webflow uh someone wrote hey john wanted to send you super chat but i'm having difficulties with setting up the cc here at youtube so i bought you a coffee at buy me a coffee instead cheers oh manuel thank you so much super super appreciate it oh man i'm loving this chat like it's becoming like a cool thing like you know the right like i'm gonna call the regulars yeah call them or call some of you guys the the regulars you know that just come in um so it's great to see you every day and just grow and and keep learning workflow uh together uh can you elaborate on the difference between elementor and webflow uh for sure and yeah manuel if you had any question or anything like yeah you know anybody who sends a super chat or a coffee you'd get high priority so um yeah can you elaborate on the differences between elementor and webflow so i haven't used uh so omri wrote that um i haven't used elementor um you know let's just see at some of some of the features that it has elementor wordpress you know uh webflow just has so many amazing things that i haven't had the need to look at other things but let's check it out um yeah you know it has a panel and it looks similar yeah it's like a drag and drop okay uh yeah it's probably really similar to some of the things webflow does but webflow to me is just an all-in-one solution so elementor is it a plug-in it looks like a plug-in that you add to wordpress and uh and then you have access to some of these design features so to me i just rather use word webflow excuse me because webflow offers everything hosting like top-notch hosting amazing designer capabilities and yeah webflow just has everything i need to build the site and webflow to me is just working the company itself is just working so hard to continue to add new features that it's just to me to me it's just going to be an all-in-one solution not just for designing but for everything related to building a site uh so i'm an oil roll thanks man have no specific question actually just wanted to give a little bit back appreciate it thank you so much for sure yeah cool cool these live streams are awesome i'm just super really enjoying them um yeah thanks thanks man all right cool um so hopefully that answered your question i'm right i haven't really worked with elementor i've worked with wordpress before and to me uh webflow is just eons of head of uh wordpress i i wasn't a fan of all the different plugins in wordpress and you know the user user experience of wordpress to me wasn't wasn't ideal uh once i found webflow it was like the all-in-one solution i was looking for and it has all the the uh the features and capabilities that i was looking for and also the code that webflow outputs is just uh like a chef's like i'm not gonna do it because i'll butcher it but like think of a chef's kiss it's just like beautiful like you know it's like the closest one to one relationship that i've seen between the designer and uh the code like you could look at the code and think like a like a professional web developer built it you know yeah it probably adds a few extra scripts in there or like webflow will add like uh maybe a larger script to to uh to work with the idea that it's being translated into uh code but it's just amazing uh definitely uh yeah for sure webflow's still greater than elementor and editor x i'll catch you next time thanks excellence appreciate it thanks for for popping in uh david wrote what would you recommend as a simple shop system for webflow um webflow ecommerce uh so i think i could share this uh when i was at webflow working at customer support i i worked a lot on e-commerce i specialized a bit in e-commerce so if you do have any e-commerce questions or want to see me go through how to set up an e-commerce store just let me know and you know i could probably cover some of that after this quick animation but also maybe that'll be for next week too because i don't want to get too in the weeds or not in the weeds but get too in depth because covering e-commerce would probably take a whole live stream or whole hour to to cover everything about it global actually what is the best way to get projects with webflow freelance contract that's i'd say that's highly individual globber you probably go through upwork upwork and post your profile and say you're a webflow developer and try to get some work through through upwork um or if you know if your local if your local businesses need websites maybe just go around have a create a card and say you know i build websites and give it to different local businesses see if they need websites uh craigslist if you know you have a craigslist in your area i don't know if that's just a us thing um yeah but i would just you know post create a few different profiles like maybe on linkedin or um you know and and have a portfolio website that you can send to people uh yeah and uh yeah that all depends on how aggressive you want to be with promoting yourself and and getting the word out there that you build websites as far as getting projects with web flow uh yeah i think you the question might be could be framed a little a little bit differently because webflow is just a tool for web development so i would ask the question in a sense of like what would be the best way to get web development projects in general because again webflow is just a tool it'd be the same if as if you were doing uh building a website with code right like you know you're looking for a web development project and you don't necessarily need to tell unless the client needs to know and you're working very closely with the client and the client wants to edit the site then you can say hey i'm using webflow to build a project but and and it might be a good practice just to tell the client in general that you're using a specific tool but i don't think it would hinder the client's view of the final result of the website like they're not going to be like oh you're using webflow i don't want to hire you first off like and if if that was the case then you could just explain to them like webflow's outputting like almost one-to-one development code so there shouldn't be too much discrepancy there hopefully that made sense i don't know if i communicated that effectively uh manuel yeah covering e-commerce would be great actually definitely so so next week i'm going to write down client first and e-commerce absolutely so let me just write that down make sure making a note of it hit client first and e-commerce sounds good okay but as well ecommerce ready for the german market uh yeah i would say yes um i'm hoping webflow adds more payment gateways i know in germany i think germany really wants ideal payments or more european payment methods um right now webflow supports stripe and paypal for payments um and that's about it and like only supporting and stripe only supports the major credit cards um so one thing when i was working at workflow i did get the request for different payment methods like all the time but i can't say for sure but hopefully you know at some point more payment methods get added to webflow ecommerce uh so yeah i would say david i i think there are quite a few german e-commerce webflow ecommerce sites if you're okay with just accepting the major credit cards in paypal you can easily create a webflow ecommerce site um yeah it seems yeah oh so manuel wrote yeah about compliance um yeah i would web full has some good um articles on compliance and gdpr so let's just look that up real quick webflow gdpr um and let's just type in e-commerce yeah so you probably want to add a cookie consent for sure um yeah and then there's there's preparing for gdpr so i would recommend reading this article preparing for the gdpr um it was written in 2018 but i think they're they're trying to update some of the policies and um webflow also has a um what do you call it terms of service page and you can just read through that but i do know that you know there's there have been german e-commerce sites built and i pretty yeah i've helped users in germany with their e-commerce sites um so yeah i just recommend reading on gdpr i you know that's something that i can't answer for everyone i think it's a matter of having to read through all the legal uh information yeah webflow also has a global privacy policy so that could include gdp gdpr and e-commerce and how webflow collects information all right um globber frank will start with a few websites for your mates and if you make them happy people will hear about it absolutely were you asking about oh so collaborate means like how i get projects so right now i'm not actively looking for projects um just because i'm creating templates for webflow so that takes up most of my time along with these live streams so unless you know unless a client really wants like as look is looking to hire a developer reaches out to me directly and then we agree upon certain terms i won't really take on any projects and i'm a bit pricey because i have a few other things going on so if i'm going to take a project it has to be worth it for me because it is going to take a take up my time and i'm already doing these live streams as well as creating templates for web flow all right a lot of questions today this is awesome um i don't know if we'll get to the actual build so if anyone's new here i do actually do stuff in webflow i don't just read the chat and answer questions so let me answer one more question and then we'll just build this animation just you know just in case anyone's new here and they want to actually see me build something um okay so alex and base row this might be a dumb question there's no dumb well no it's not a dumb question but how would you guys take payment from clients you do a site for do you guys use paypal and make an invoice there that's a great question the other users can chime in but webflow does have excuse me it does have client billing i'd highly recommend typing in client billing webflow and then just read through i think they have a video there's a video for it as well that just goes over client billing so you can essentially have your client pay for hosting and pay for your your site via client billing or you could create an invoice and send it to them as well uh david will i make websites for small business businesses so paypal is good but i think my customers want all the regular options cool global i'm actually working with webflow just migrated to product design role on a new fintech awesome globber yeah for sure yeah this is a so super glad you joined because i'm happy to answer any questions as you're building in webflow uh web devensweep plugin has that feature um what feature are you referring to uh omkar all right cool so while omkar is writing that i'm gonna go ahead and build this animation okay so we added a circular button wrapper yeah so much good stuff so globber yeah like uh yeah i'm happy to help like i know a lot of uh product designers and designers who just get into webflow and at first it can seem a little daunting because if you're not familiar with web design and development concepts um you know getting around the designer can take a moment but i don't i don't know how experienced you are with webflow or web design and development but you know i'm definitely happy to help if you're struggling with something or you need help with a specific concept in webflow i'm happy to field any questions um yeah finn sweet plug-in has that feature gdpr finsweep plug-in has a gdpr feature um suite gdpr oh uh okay yeah the cookie consent oh i got you i got you so all right cool so i'm guessing the the uh the plugin has the cookie consent banner that you can add all right i'll definitely look into that so we'll look into the plugin the chrome extension client client first and e-commerce chrome extension all right cool okay so we have this is the 100th time i'm coming back to this okay we added the circular button wrapper the inner circle so for this circular button wrapper and again if you just joined uh we're creating this uh this animated button uh feel free everyone to keep chatting in the chat and and asking questions i'll definitely read it just gonna finish building this and then i'll head back to chat um so for the circular button wrapper we're gonna set the overflow to uh hidden and what this does is this allows us to move this inner circle up and down within uh the circle button wrapper so if i showcase this if i move it let's say i move the margin down notice that the circle is within the other circle and it doesn't go out of it if i were to change this to overflow visible and i move the circle you can see it's just two circles yeah no no time for your animation today yeah definitely um so yeah i'll go to the circular button wrapper and just set it to overflow hidden okay so it kind of crops the the image inside of it or the the div inside of it all right cool so that's probably the main part of this animation um and then so when we animate and we have some text in here okay so within the circular button wrapper i'll add another div block and i'll call this circle text rapper lydia wrote where no does webflow have plug-ins like wordpress and do you need to install them separately uh currently webflow doesn't offer plugins hopefully that's that happens at some point but yeah webflow doesn't offer plugins a lot of integrations can be added via custom code i'm going to be creating a video this weekend on how to add a swiper.js slider into webflow to allow for a vertical slide along with a clip path animation and using green sock so a lot of integrations can be added to webflow via custom code and hopefully there'll be a plug-in system at some point within webflow but at the moment there isn't all right cool so let me add this text inside the circle button wrapper uh so for this inner circle um yeah for this inner circle let me set it to a position of absolute and full and for the circular button wrapper let me set it to a position of relative so that the circle is relative to it and then for this inner circle i don't need it to be 300 by 300 because we set it to a position of absolute and full so by setting the inner circle to absolute this circle text can now be in the center of the circle button wrapper and for the circle button wrapper i'll set it to flex center center so that this text wrapper is in the middle here and i'll just set it to a position of relative so it comes to the front and looks good hey bill how's it going uh hopefully you got my uh that mouse scroll interaction i created in the last live stream um i think i might make a video actually a short video for you know for everyone to see how i did that that could could be a cool interaction all right so initially the text is white so let me just say add and let me um i'll set it to monster rot and i'll make the text white and we'll make it very large and line height of one unitless and we'll add some letter spacing all right something like that and i'll make sure the text is centered alright yeah that looks pretty good okay so it says add let's see if we have a different font actually i don't know it looks good montserrat cool monster out normal all right not add but add sometimes i feel like i do have add with going through what i don't no never mind that was not true just uh just because i read a dd here how about we say um uh what's a what's a call to action uh enter yeah enter there we go that's better that's more uh because when ad looks large and it's all capital it's just i don't know if it's all capital oh yeah here it's not all capital so that was on me yeah there we go that looks better if we just say add like that that looks better all right so we have that text and inner circle uh so i actually meant to add a div block here so we want to add a div block and this should be called circle circle text wrapper and this should just be called uh circle text okay and then we're going to add the circle text inside of the wrapper the reason we're placing it in a wrapper is because i want to set an overflow of hidden to this wrapper so right here overflow of hidden so that i can move this text up and down and have it not be visible outside of the wrapper bounds nice oh i love hearing that a bill yeah the client loved the mouse animation now you will soon be enjoying your coffee you deserve it thank you so much appreciate it dude these live streams are the best i've learned so much already thank you alejandro super appreciate it um awesome yeah this is this is getting fun you know this is exactly like or what i had envisioned for the live streams to become like really um what's the word not interactive but like just as it gains more momentum just having users just enjoy it and having more users come into the chat and you know who knows within like a month or a few months like where this live stream will be but i'll probably have to learn how to manage or how to you know answer questions as well as provide content because if there's a lot of chats then i'm gonna have to keep track of it so yeah it's gonna be fun i'm i'm enjoying it and the more viewers and users that come in the more the more fun it becomes so so yeah i won't harp on that too much but yeah just enjoying it alright cool so we added the circle text wrapper the circle text and we also want to add another text so i'm going to copy this text and i'm going to call this circle text 2 and let me see here alright cool so for this text i'm going to make it black or let's see two 242424 so the same color as this background this oops not background color two four two four two four all right so it's the same color as this background here and i'm gonna set both of these to a position of absolute so there they overlay on top of each other in the circle text wrapper it is set to relative so let's see circle text [Music] let's see here yeah so for the circle text wrapper i'm going to give it a specific width and height so something like 100 pixels by by 50. yeah it looks good and then i'm going to give this text wrapper a flex heading of center center so i'm just making it 100 pixels in width and and 50 in height so that the text fits in the the wrapper all right so this will make some uh more sense as i as soon as i add the animation um so we have all the elements that we need to create this animation um so i'm gonna read through all the chats in one second i'm just gonna go through this animation because right now it's probably not looking like it's making a lot of sense because we're overlapping text on top of each other we're using position absolute we're using wrappers so the way this is going to make sense is once i add the interaction so i'll go ahead i have all the elements i need to create this yeah i'm going to start thinking of like cooking and baking analogy so we can start associating building websites with other things like yeah like cooking you know i just made some cookies yesterday so like there's a lot of um correlations or connections between i don't know cooking or building a site you can make interesting connections i don't know just went off into tangent there but just bear with me for a sec um all right so let's add the interaction so when i hover over the circle button wrapper i want something to happen so we'll click the interaction button up here um this lightning bolt symbol i'll click click the plus select mouse hover and i'll start an animation start a new timed animation and i'll say button uh in and when we hover so let's look here so when we hover i want this inner circle to go down a hundred percent so i'll say move and i'll move it down on the y-axis so vertically i'll move it down 100 so it moves down 100 that looks good uh now we can see this add text so let me see here so initially the text is white so what i want to do for this circle text right here is i'm going to move it a hundred percent on the y-axis so move it 100 and i might have to make the uh the height of the circle text wrapper smaller because we can kind of see the text a little bit but we'll polish that up in a second and actually you know what i just thought of something even better so yep let me do that now actually so for this first circle text i'm going to set it to a position of relative i'm going to remove the width and height from this circle text wrapper and i'm going to set the second circle text to a position of absolute and then it just overlays on top of it perfectly i don't have to worry about width or height because the first circle text is creating the width and height by setting it to relative it expands the bounds of the div block it's in so absolute doesn't give any width or height to the parent element but relative does so by setting the first text to relative it gives me the width and height i need exactly and then i can set the second text to a position of absolute and it gets layered on top of it alright so back to the interaction circular button wrapper go to interactions mouse hover button in and now the circle text the the black text right because we're starting with white initially yeah the black text will start at 100 so it's at the bottom and we'll set it as the initial state so initially that text is a hundred percent at the bottom so we don't see it and all we see is this add text so right now if i hover we can see that circle goes down so what i want to do now is move that black text up and move the white text up as well all right so so yeah so i'll select the first circle text and i'll say move on the y axis we'll move it negative 100 so it moves up and we'll start it with the inner circle moving so i'll click hold and drag so those two start together so if i play we can see the circle goes down and the text goes up and then for this white circle text right up here i'll say move and i could probably change the class name so it's a bit clear for everyone watching but this is the first circle text right here and i'm going to say move to zero percent so it moves uh yeah it moves to the original position and i'll start it here all right so it starts with everything else um so let's see here yeah that's exactly what we wanted uh so hopefully that made sense um so for for let me see this is the the black text i'm not going to say class because both of them are named circle text and just for the purposes of this video i'm going to give them specific names so circle text white and then i'm just going to remove this combo class and duplicate this class and say circle text black okay and then i'm going to say position absolute and give it the color two four two four two four that way as we're creating the interaction it's a bit more clear um so i want to make this as clear as possible so the circle text white initially um yeah circle text white is that okay so i just have to change this a bit so circle text weight change target did i get that right oh i just confused myself there um so let me let me just start over okay all right so we have the inner circle the inner circle moves down and the circle text black so we're gonna move it down a hundred percent so it's that it starts 100 lower and we're going to move oh yeah we're going to start it with the inner circle and for oh wait yeah the circle text black wait let me see here for a sec oh yeah circle text black it's going to be set as initial state there we go okay so the black text initially starts at the bottom so we don't see it and we have the inner circle so then we move the the white text we're going to move it up negative 100 percent and start it with the inner circle and then the circle text black we're going to move it up to zero percent so it goes to the center and we're gonna start it with this so if i play it perfect okay so hopefully you can read you know the the names or the labels of the classes here the the names here okay so cool so we got that um perfect so now what we want to do and this is where it gets a little bit tricky because if you notice on this animation the text always animates from the bottom so what we want to do is for the white text that went up negative 100 we want to immediately bring it back down to 100 percent so it went to negative 100 so we want to bring it down to a hundred percent with no duration so i'll select that text i'll say move a hundred percent down and we'll give it a duration of zero and and yeah and that's basically it yeah all right cool so so we did that and then on the hover out we're gonna do something similar so let's see how this looks looks good uh let me change the speed to like it's gonna be really fast point three seconds uh got any hey what dude how's it going oh man so good to see you yeah so what dude is uh i worked with him at webflow uh we were both doing customer support what dude is super smart he knows everything about webflow uh yeah just it was it's it was amazing working with him um yeah just super knowledgeable if you have questions about webflow just you know take well dude probably doesn't want to help anybody here because he's answering questions like all the time but he's super knowledgeable about webflow uh okay so lydia wrote in the interaction what's the difference between starting at zero and checking the box set as initial state so the difference would be uh that's a great question so like when setting an initial state you want to set so for example uh on on this one the circle text black if i didn't set the initial state to 100 percent then i would then that black text would be visible initially so by setting it as the initial state as soon as this the page loads that's the state the element is going to be in if i were to just set it to a hundred percent then you would see it animate to a hundred percent so just for example as an example if i uncheck set as initial state we're going to see what happens so you saw what happened there that black text is visible initially and then when i hover it moves down 100 which kind of throws off the animation so initial state is kind of what it denotes it's like the the state you want the element to be in before the animation starts you could also i mean there there are you know different ways to approach a an animation or a build like you could well actually i don't like using train transforms i don't like using transforms with interactions because sometimes there's conflicts there so i i like to move all of my elements within the the interaction uh initially and use initial states within the interaction or you could like use margin if you wanted to or you know to move it down 100 or um the position properties to move you can all yeah you can use position properties so like for this um the circle text black i could go into uh position absolute you know set it to the bottom something like that and then do a hundred percent from the bottom um or the the top actually to move it down and it would move it down so it's just a personal preference i myself just like to use interactions to to move the elements where i want them to be um but that's a good question i think the more the more you work with uh interactions and webflow the more you'll start to kind of develop your own style for how you want to approach a different animation but there are different ways to move an element prior to the animation occurring all right so yeah i'll go ahead and finish this up and let me move remove this absolute positioning that i added and we'll go into here and cool so i think this one's done let me set this back to an initial state and i'll set this to zero for the last white text all right so we hover and we have that animation um then i'll just add some easing to this i'll say ease let's try easing out yeah that looks good and now on the hover out we want to do something very similar so on hover out we'll start an animation and we'll duplicate this button in and i'll say button out here button out alright so i can delete this initial state because i don't need that anymore for for hover out or click out animations we don't really need an initial state um cool so what i want to do here is let me just look at this animation i want to move the inner circle back up to zero percent and the circle text white i'm going to move it so we start i'm going to move it to zero percent and the circle text black i'm going to move it to negative 100 percent so it moves up and then the circle text rather than circle text white here i'm going to change the target and set this to circle text black so essentially what's happening is the the white text that was visible so when we preview the white text is visible then the black text is visible and then when we hover out it just happens in reverse so yeah hopefully that made sense oh no we have spam shoot oh that's that's great okay all right so i might have to start monitoring spam okay uh yeah i guess so meanwhile wow uh cool so so yeah i basically just did everything in reverse i moved the inner circle i moved it back down to zero percent the the white text we uh we moved it up to zero percent so that's why in the hover state we moved it down to zero like without any duration so it just resets the animation so that white text goes up and then goes down immediately and we don't see it because it doesn't have duration but then on the hover out that white text is at the bottom so then when i set it to zero percent on hover out it goes from the bottom to the middle because it's we set it to the bottom and then for the text black we moved it up so the black text goes up and then we reset it and move it immediately back to the bottom with zero duration um so that it just resets so it's like going it goes up so we have the text yeah it goes up resets goes up resets goes up resets and so it's always coming in from the bottom all right and that's it so that's how we created this button animation all right so now i can resize it make it any size i can change the circular button wrapper to a link block so in case we wanted to link out to something so i just have to select it uh here let me hide this for a second convert to link block and then just remove the underline decoration from the link block all right and then i can link out to web dev for you yay all right so since i'm almost done i'm going to finish this up i'll go ahead and publish and then i'll read through a few of the chats that i didn't get a chance to read okay cool so [Music] that's how we created the button it looks a little bit faster here so we can make it faster so the interaction will go in and we'll select these three and we'll set it to 0.2 and let's do ease out ease and out expo let's try that oh that's too fast how about ease and out quint uh that's a kind of cool one or quartz nope too fast so the duration i'll have to set it to 0.3 that's not bad let's do 0.4 yeah like that that's cool and then we'll go to the button out select these three do point four and ease and out uh yeah that looks good and yeah i could spend time with the different easings here that's part of the fun of building animations and interactions uh cool so let's make this button smaller because obviously i don't think we depending on your site you might have a button this large but i'm gonna make it a hundred by a hundred and then make the text for this let's make it 24 or how about 18 and this one 18 as well all right that looks good and we built the animation awesome looks good and i might make the text bold a little bit bolder that's not bad all right so oh thank you bill um yeah i just i get inspiration from uh from different sources so this was inspired by code drops code drops.com and you know they just had this animation and i thought oh that looks really cool i want to build that so yeah i would probably say something like enter here i think enter would be a better word enter and then i would make this a little bit larger maybe like 150 maybe 125 by 125 and then we'll make this visible again all right cool so that's it for the live stream today a lot of fun yeah the one thing that kind of throws me off is that when you add uh letter spacing the text doesn't look fully centered so i think when you add letter spacing you might have to add negative margin to move it to the right so i added letter spacing of three pixels so i'm just going to add a margin of negative three to the text to see if if it looks more centered and i think it will because it might add three pixels to the end yeah that looks perfectly centered now so i just learned something new so that's a fun tidbit and hopefully everyone just saw that so when adding letter spacing it looks like three pixels get added to the end of the text so if you're trying to center text or let me see actually could i just do align center and let me remove no no you have to add that that negative margin to to make the the text look centered yeah it looks a bit better it looks a bit more centered all right so that can make a really fun button for a website um yeah and that'll conclude this this build this interaction uh so bill wrote what do you think is the is the future of web design will it still be relevant in the next 10 years absolutely yes um i would say absolutely didn't quite land there with that one um i think i've been talking a lot so like yeah uh anyways yeah i definitely think that web design is gonna keep getting more and more relevant like new businesses are popping up every day and everyone needs a website like the internet is the most amazing invention like the most amazing tool like you can communicate with basically almost the entire world via the internet so like it's such a powerful communication vehicle or a communication thing that i don't see the demand for websites declining i see the demand for websites increasing um and that's why i see the demand for webflow increasing and especially when webflow adds even more features like you know i'm not going to mention them but we all know the features we're looking for but and then as webflow becomes even more refined and the web becomes even more refined i think it's just going to be like exponentially growing along with apps right everyone has a mobile device and apps are a big part of different devices um yeah but you know there's now web apps right so web apps are like websites that handle a lot more functionality which hopefully webflow goes in that direction um david wrote can you give feedback on an animation for a model i made uh yeah i think that's a super chat request feature david um since it's it since it is related to your personal project but feel free to drop a super chat and i'll i'll spend a few extra minutes going over uh your site okay i'm gonna backtrack here and read some of the comments see if i missed anything um is it really stopping cookie david is really stopping cookies being placed before they come oh this was for amkar i answered the plugin question thank you bill you can just rebuild options and it will uh add coffee i mean you can check more into the fin suite yeah that's fin suite one of the things i liked about most about workflow was was that with my knowledge only in ui design it allowed me to quickly create pages and animations very fast my stakeholders really liked it yeah definitely what flow is amazing yeah yeah i can't believe it's thursday already and we'll have to wait for next monday yeah no worries i mean yeah we'll cover some good stuff on monday as well yeah thank you globber nice um so yeah i'll wait a few more minutes david if you want to post that site or if you're interested in the super chat uh request um but yeah and if you're trying to send the link you might have to send it to my email so because the super chat doesn't allow links and probably for spam reasons for sure you can go to web dev for you and just fill out this contact form and i should receive the email all right so yeah and sorry for my uh slip-ups and communication sometimes i'm trying to express an idea like and sometimes it's an emotional idea that i want to convey without sounding weird so like i'm trying to find the words in my mind sometimes to communicate certain things uh yes hopefully webflow will be able to extend their approach to app development at some point this will be quite a task though i guess absolutely yeah i think webflow is trying to [Music] really build the foundation of web development and or build a really solid base for the the platform itself for the designer for the different integrations that go into it that you know developing apps would probably be down the line because there's still so many features that webflow wants to add and that customers are requesting so i think apps would be you know like mobile apps would be maybe something else down the line yeah it would definitely be awesome i think that's probably in the pipeline or like somewhere within webflow's um road map you know but it could be like the five-year road map or seven ten-year road map i don't know and saying that is you know speculative speculative uh it could be sooner i have no idea but it does take time and effort and engineers and uh structure and all that stuff to to build a really great product and webflow has already shown that you know it is doing that you know they have an amazing product and they contin continue to build upon this product which is already amazing uh alex and baseball do you have any quick website inspose that you think we should look at um yeah i think i went over this in a live stream uh a few live streams ago i have a tab here website inspiration um so this is a blog article for from webflow uh you know you could just type in web design inspiration webflow and this article will pop up and i'll just post it here in the chat and webflow just has a lot of great examples of really cool websites or where to find inspiration for cool websites sites that i use i use cold drops code drops heavily on my words today code drops.com they have inspirational websites they have a roundup like almost every week i mean you can click in and just view tons of awesome websites i mean look at this this is something else i think this is a background video for sure but look at that like you know that's why i love webflow like to build something like this you could do it in webflow you could absolutely build something like this in webflow like you know at some point a few years ago i would look at something like this and be like how like what and now i look at it and i'm like oh yeah that's that's not that hard you know and building a menu like this that's easy you know easy uh what's what's the term for another term for easy yeah and this i might show how to use a counter like this like that's easy too uh it's just some custom code for that um but yeah like some people might look at this and be like oh my god this looks amazing and this is might be difficult to build it really isn't like this could be done in a couple days or less a couple couple hours if the design was all there and you kind of knew what you were or you know what animations to add all right so something like this this catches my eye the reason this catches my eye is because the design is so clean and uh and elegant right so when we think of animations and interactions we always think of like these crazy like out of this world animations and things like that and that's all cool or like 3d vr and all this stuff and that's great but if it doesn't catch your eye or it's not elegant sometimes it can hinder the message you're actually trying to communicate animations can sometimes be distract a distraction rather than a an assist or a help to to what you're trying to communicate so just keep that in mind so something like this i don't see this as a hindrance like the design is super clean the text is easy to read and all they have is like probably this svg image in the background rotating that's all they have but it's super effective right so that's the approach i like to take usually when adding animations keeping it simple elegant and having it uh serve a purpose within the website and have it be visually pleasing you know here what it says is design and code like that's awesome it's like a portfolio site and then i click work and look a color that's a color yeah look at that super effective yeah i love really big text and bold and good alignment and all that stuff so again i mentioned this i think in every live stream because often too often i find web developers miss the importance of ui design which is like aligning elements and picking the right colors and making sure you have a good design for your site so i highly recommend the learn ui design course by eric kennedy and he goes over ui design so along with this course and web flow you'll be building really beautiful and awesome websites and i'll just post it here a link to this i'll post it here so manuel wrote uh talking about apps do you know why webflow's not having an app to use webflow um i don't know the exact reason for that but i think that webflow is just focusing so much on making sure their uh the browser version of their their product works a hundred percent so or as close to 100 as possible so before they get into an actual app i think they just want to really solidify the different features and functionality of the the web-based uh version of webflow but that that could come at some point all right so yeah i think we're almost done here uh yeah so more inspiration website so i like going to there's this uh instagram uh profile which is we love web design you can check that out um ui bucket has some good stuff uh dribble just go on dribble you know and look you can look up some really cool sites yeah awards.com it has tons of websites and yeah oh wait uh no let's let's try yeah yeah and these different uh resources are great inspiration for design as well so when i think about web development i i think about it in conjunction with design so it should be web design and development and you know usually you'll have a designer and a developer and i think that's why webflow's so powerful is because you can be both right like a designer can now be a web developer and doesn't have to hire a web developer per se uh to to build a site and not to take anything away from web developers but that's where i see the power of webflow it gives more users the ability to build a website all right cool good place to find to find case study layouts a good place to find case study layouts um that's a good question case study layout website layouts uh so maybe pinterest yeah pinterest is another another good place yeah i might just do like a google search for that um you know or check out webflow templates they might have some good let me see we'll flow template marketplace and i'll type in case studies see if there's something like that yeah there might be something here that you can kind of browse through yep but i'd probably just do a google search or just go to awards.com see if there's anything there there's a search function uh in awards behance for sure yep definitely yeah and just to kind of be super clear about i mean at this point i might stop saying it but i never quite considered myself a designer i'm more technical as far as web development like i usually have users build out the design first and then i build it but i'm gonna start i'm gonna probably stop saying that because i do feel after working with sites so much and design that i do know quite a bit about design now that i'm not i don't consider myself a professional designer where i've crafted a style and and all of that but um you know i do know enough about alignment and colors and placement of things and spacing where i feel comfortable saying yeah i know a bit about uh how you know a bit about how to make a site look decent or good and again that's props to the learn ui design course where it goes over like typography color design process and and how to create interface components all right but yeah i never you know went to school for art or anything like that or developed a specific artistic style i do love animation so i can say like i've worked with uh animations enough to feel more proficient in that as well like as far as like specific easing and timing i've created over 150 animations and interactions in webflow where it's taught me so much about adding specific easing adding specific timing and then also working in adobe after effects and i took a course on after effects and that helped me with animation uh as well so all all of this can be learned it's not like you're you know you're born with enough like how to build a really good ui this all can all be learned through videos um courses and all that stuff and then you know using tools like webflow we can use all that knowledge to to build something that communicates really well or you know it's always about the content right you want to have content substantial content to your site so that you're communicating something great but you want to embellish that content with good design and functionality and and um and a good user interface so that the user can receive that content in a great way all right i'm getting a little bit maybe meta with some of these topics but yeah i think i'm going to end the live stream here it's been a great week i appreciate everyone joining and all the questions this was a a pop-in live stream today just it's getting me excited for what's to come in in the future live streams and this is yeah this is uh kind of what i'm hoping for for for these streams is you know have it continue to build momentum to the point where we have a lot of viewers come in and and a lot of different questions come in and then people are helping each other and chat answer each other's questions and i'm able to answer questions and go over things live right in in the live stream and and go over how to use webflow in the live stream thank you thank you damn your streams bring luck believe it or not i got three website requests while watching today what's happening yeah that's awesome yeah for sure yeah because we're putting it out there where we're communicating this idea and the more people that come together to communicate a specific idea i think that that branches out or maybe gets felt yeah definitely getting meta here for sure but yeah that's great manuel uh appreciate it or yeah and happy for you 100 so yeah who knows where this live stream goes we just keep keep building momentum and um you know as webflow builds momentum as well users will have a spot to go to to you know quickly see someone building webflow and ask questions as well you know webflow has a lot of resources as well alright so i did mention i wanted to stop exactly at one and i i'm not having trouble talking along with ending at one o'clock uh but moving forward i'm going to try to stick to one o'clock more often because i do value everyone's time and i don't want everyone anyone to feel like they have to stay for for the entire uh you know over over an hour unless they want to watch and i'm covering something super interesting yeah but it's hard because i just want to continue talking about webflow and you know answering questions and interacting with everyone in chat but but yeah but i do have to stay disciplined with that aspect of it and and start ending closer to one all right everyone have a great weekend uh appreciate everyone joining hopefully everything i communicated today was clear i went a bit abstract and when i go a bit abstract sometimes i don't know if my ideas communicate effectively but i had so much fun with everyone today and i think that probably contributed to me just wanting to interact with with the with everyone in chat um you know i want to say community but it's not quite a community it's just us having fun in chat and uh just learning web flow uh together uh thanks manuel appreciate the the coffee uh a bill appreciate it uh appreciate it as well and uh yeah for everyone who's who who's new who's joined today i do these live streams uh every monday through thursday from 12 p.m to 1 p.m central time and i cover everything from building sites and web flow building layouts creating animations and interactions and as well as providing support and if the support is related to a personal project you can drop a super chat and i can take a look at the personal project and go over it live here as well so you can see what i do here in webflow all right so today we built this little animation inspired by code drops so they just have a bunch of buttons here and we built out uh this one so it's pretty similar the timing and easing might be a little bit different but it was a lot of fun to build alright so that that concludes uh today's live stream thanks for watching have a great weekend everyone and i will see you monday thank you

Channel: WebDev For You

Views: 355

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, webflow live website build, webflow flexbox, webflow layouts, webflow web design

Id: 1Uck1gWRx3g

Length: 81min 40sec (4900 seconds)

Published: Thu Sep 16 2021