How to Webflow (Live): Webflow Interactions and Animations for Beginners

[Music] [Music] [Music] [Music] [Music] [Applause] [Music] [Music] [Music] [Music] [Applause] [Music] [Music] [Applause] [Music] [Music] [Music] [Music] [Music] [Music] [Music] you [Music] you you no death test this on it is on okay how's everyone doing this Saturday okay as you might have noticed or follow me on Twitter at the pixel geek I've been trying to make these streams a little bit more high quality and what I'm doing right now is using my macbook and feeding that into my PC and letting my macbook just run web flow and my PC sharing the load in streaming that to YouTube so hoping this all goes well so far the stream deck glitched out when trying to do that intro so I have to do it manually not with the stream deck I'm trying here but thank you all so so much for being here thank you all for your continued support for this channel hit over 6,300 subs whoa thank you thank you to everyone who's a new sub thank you to everyone who's new in the live chat who hasn't been in the live chat of these streams yet keeping this consistent this is the fifth straight week of Saturday streams yeah hope you're all doing well hope you're all staying safe healthy and at home hoping that this quarantine type of content is helping you learn something new helping you open your mind more while we all as a human species get through this all right if we haven't met yet hi I'm Nelson aka the pixel yiq and I do these streams every Saturday at 10 a.m. Pacific Daylight Savings Time to 12 p.m. now why only two hours yeah that's all that's as much time as I have because I do have a family and I need to you know spend more time with them even though I spend a lot of time with them during the workweek but yeah doing stuff that isn't work or that isn't YouTube or streaming or whatever and yeah so if you're in the live chat room right now or you're watching recording hi and speaking of live chats first person here rocks rocks rocks thank you so much Willian thank you dropping by to support thank you for your support Colleen with the first and weekly three times this this three times in a row you donated coffee so thank you so much Bent's uh Benzes back Thomas Tony ran jian raymond andhra jorge where he's back Russell Paul Scott Levin's back 20 G is back Scott citron and Levin and Torey yeah awesome okay so what are we talking about today we are doing another request from last week the live chat said I asked what do you want to do next week and live chat said let's learn interactions and I've done so many interaction videos in the past but I don't mind going back in doing him again but this time I want to try to go slower and explain all the little nuances of of interactions because interactions is a very advanced type of thing but it's kind of like being a magician because if you're a magician it's all about how you sell how you how you perform the act that you're you're doing the perform the trick but behind the scenes it's quite simple like for instance if you're hiding a coin or something you just put it behind your fingertips or something and you hold it in a certain way that lets you hold the pretend like the coin is gone and then when you reveal it you do a sleight of hand and it shows up right so same thing with interactions we could we can create some awesome interactions but in the background it's really quite simple and with this knowledge you can break down all these cool wonderful web flow sites that have crazy interactions and it actually is simple right so that's what I want to help you with let's see here his first question from Scott your wife gave you a haircut no I just wet my hair I need to take a shower today though I took one yesterday but like I was playing outside of my daughter and it was really hot so I need to take another shower today but no haircut yet let's see here what's up Nelson hello Silvo Kirk and Ivan welcome welcome where are you all from love from Brussels let's see here I know Colleen is in Florida who else is here yeah where are you from and while I'm waiting for that in the live chat speaking of interactions we're going to go through this awesome website that was just launched this week come on stream deck please work if I press the button it broke no oh God there we go that's what's supposed to happen okay so this one right here this site made by Tomas Bosque I'm hoping I'm saying his last name right and he created this wonderful portfolio site that makes me jealous now there's a difference between jealousy and envy jealous because he deserves this recognition for all the hard work he's done I'm just jealous that I'm like why can't I make something like this I want to make something super awesome like he did but he deserves this he deserves all this praise for this hard work in so many people in the web flow team including our VP of Marketing caught I of this portfolio site and we couldn't help but tweet it out and show people this it's amazing so you have so let's quickly break it now you have it preloader I mean unload interaction you have hover interactions you have look at you have scroll into and scroll out of interactions you have while scrolling interaction you have position sticky with while scrolling interaction another position sticky and then you have this moving up based on scroll there's so many interactions here but it's done so tastefully you know I said tastefully maybe that was subliminal because I was looking at this at this pizza yeah and then you have click animations like if you turn this off like what is going on here this is amazing and if you haven't checked his side out go to let me let me link it in the live chat oh I can't because the live chats my PC ah scrolling down so it's tomas be OSC calm and this is not screenshots this is not after-effects this is actually look at this this is live text see how my cursor changed yeah this is live text this is this is live text right here I can select it amazing and then check this out Easter eggs what this website was a suck your soul so click animations hovers scrolls he doesn't including Mouse position oh man I want to close it I can't this is so fun look at accept or insect accept in red oh man bad UX bad UX just keep scrolling down it's so fun to just scroll and just enjoy the journey enjoy the story it's so much thought has been put into this alright so um yeah what I'm going to try to do in this in um in this stream is try to explain how Thomas did some of this stuff maybe well we'll get into the will do the page load interaction how to load things when the page first loads and then a hover interaction like how he did this and we'll also do a scroll interaction and what he has told me is that I asked him hey can I share out the read-only link so people can learn from you and he said that he's going to actually make videos breaking all of this down so whenever that happens can't wait and I'll tweet that out and people should watch these videos to learn because this is this is amazing all of it is amazing alright yeah lots to unpack on this site very incredible alright and uh yeah so we'll go into that and let's see where are people from where are people from let me I'm not gonna use stream deck so we're gonna actually should I restart my stream deck I don't know I'm scared to unplug anything Oh what happened I'm trying here I'm trying I'm really trying okay anyway so where are people from I have Pakistan Pakistan Austria Houston Texas Romania Munich Germany Ohio UK Bay Area Estonia Texas again Westwood New Jersey UK Kevin is from Mars everyone give it up for Kevin for finding a great internet service provider from Mars that's amazing your bill must be terrible and if it's not terrible the I must be terrible Phoenix Arizona Russia welcome everyone let's get into actually you know what before we get into learning let's talk to let's talk to Tomas he's actually on zoom right now and if this goes right if I figured this out then we'll be able to talk to him through zoom Sweden Denmark all right let's go we got that going okay let me switch sweet does this work can you see me to us and I can't hear you we we tested this we've tested wait talk yeah you know I can hear you did you were you muted yeah I was submitted you scared me oh man I was like no another failure on this stream oh man how are you how are you I'm good very good thank you for having me awesome let me ask real quick live-streamed everyone in the chat do you hear him please say yes hopefully and there's probably some white noise and that's just because I'm learning yeah anyways so Thomas how do you have you seen it it's Thomas or is it Thomas is how do you say your name oh you say Toma Toma I don't mind either way yeah oh Toma okay because like the only European that I know of is Daft Punk I mean I mean your European name Tom Thomas is to have fun so I'm like Oh Tomas so DOMA okay I will call you tomorrow yeah well in your last name how do you say that was I saying it right oh you had it right actually nice okay Tomas yes so amazing amazing website I was blown away when I saw our VP of Marketing Ashley tweeted out and I kept scrolling it was like whoa whoa and I couldn't say it stop saying whoa but I stopped at that um poop emoji and I was like that can't be clickable and then I clicked it and I was like this is genius this is amazing the UM the the amount of detail that you put that you put into your site is amazing so just want to ask you um how long did that that portfolio website take to make it's been a long process it's been a non enough process i've been going at it for as i'd say i first tried to do it about a year ago and then it's been impossible your hell for moms like we all do we know what it's like I haven't touched it at all for months and then I kept seeing new things down in web flow through the web game stage and I kept being blown away by what you actually could do and I remember that when sticky positioning I decided okay it's time now to I can do pretty much anything I can think of every ideas I had for like I knew I wanted a one page design and this was it I knew I could make everything I wanted so position sticky was the catalyst for you to continue building your site what is it about the position sticky feature that um enticed you to finally finish your website well I knew that I wanted a story and I knew that did I didn't want to lose people through pages about pages contact page and I go to the like of just a long story page and there's just something about stickies it allows me to break down sections and really catch the eye on like one specifics like section and like kind of freeze the moment the story said people can like just go through like a story like chapters basically no okay yeah okay that makes sense having chapters I like that I like that so now let's rewind all right and when did you start learning when flow too late I started earlier really I did I was working at this company called beam which is the photos of food that you see yeah and they had this idea of making like a food media like websites and they were on WordPress which is a great tool but I mean it has not been nice but it was hell it was absolute hell it's the classic thing with like I bought a theme I modified it to hell I clogged it with plugins it was running I don't know how it was running but it was running full of custom code it was hell and then I stumbled upon this and you remember Syst page it was made by web flow it's the interaction 2.0 website the Longwood is the history yeah yeah I said I saw it and I was like oh we need to do something on web flow we need to like switch yeah and my company but I started to just have fun in one flow through little tests and that's how it all began awesome was that like a year ago two years ago oh yeah about we're here and enough to go I'd say oh year and a half ago yeah probably that's amazing so if you learned web flow five years ago four years ago I I don't know what you'd be doing because the the amount of knowledge of knowledge that you brought from your previous history it seems like you have a lot of knowledge when it comes to web and you brought it over to web flow it felt like it looks like it was as simple for you to pick up and learn well it wet flow I would say it's easy to say now but like it's a pretty easy tool to learn the learning curve is way easier to me than it is to learn code or learn HTML or to learn how to do something and if anything in what place you can't do anything in without but you you've known each tml and CSS before here so that's why it was little notes yeah yeah it helped me a lot but what helped me the most is well you know your tutorials I've been watching them all I've been like like in on repeat I've been trying to redo all the things you've done like I remember you've been trying to redo the Apple iPhone X website yes I remember that's like I I was just following what we're doing yeah yeah I mean after a while like the interactions it starts to become basic right and it like the door is open to whatever you want to do yeah that's what I'm trying to that's where I'll be trying to do for this stream but yeah my next question was like what was the hardest part when you're building everything out of web flow what was the hardest part that you had to learn and that was very stressful for you so it was not something to learn it's more of like yourself processes not what's unrelated but I would say the hardest parts of this build was the backup feedback from fellow designers fellow developers like because you constantly put yourself into thinking like how is it good enough what I did is had a good enough is it working is it clean enough like being self-taught is good it's very good but then you don't know if you're doing things the right way which is really hard but then web flow wise I'd say the hardest part was probably figuring out interactions but once as you say it like once you stopped drag them down very easily and very visually you start to really get it yeah that's awesome awesome all right well last question what tips can you give the the web flow community when it comes to building a portfolio site I think I've read on my website it's about four times from scratch since I started like completely just erase the whole project and I feel like my problem was I kept seeing these amazing examples of portfolios made by all some people like you know the dribble websites a world website and my first reaction was I want to copy them I want to do the exact same thing they do these amazing designs and I'm just gonna literally copy get the same phones at the same styles no no no don't do this this is my best tip this is just the whole point of the portal here to me and I'm saying is very humbly because it just might felt first we saw a website and I was not expecting anything to blow but I'm just saying make it yours is the most important because you can have the flashiest interactions you can have the best like particle explosions and like how very effective no no no but people wants to work with you wants to know who you and what makes you different than all these wonderful portfolios withstand the flashy effects and I'd say I'd rather read someone's story than just being blown away visually and not getting anything out of it I'd rather learn who you are through your websites and that's that was my you're speaking my language I love it I love it great great tip let me get two or three questions on the live chat if you have any questions for Thomas please oh sorry DOMA if you have any questions for DOMA please put in the live chat room right now and yeah while we're waiting Oh what was your reaction when you first saw our VP of Marketing a tweet you out I I didn't know what to expect if even then in this Web flow design and group that I suggest everyone joins because there's tons of so many nice people helping out giving so many wonderful tips it's called web flow designers on Facebook I think everyone was so kind to me I was just sharing on my first little website I didn't expect anything out of it I just I was let's go at the beginning of the coverage 19 crisis I just had signed this job and well they had to let me go because of things but yeah and it make sense so I was looking up gently for project and everyone started to react very nicely to its they were very positive about it and what I loved the most is that they just like you did appreciated the story behind it more than the flash yes yes and that's what I want to that's what I want to point out to everyone I love what you're saying and I want to point out his website is all about content the content about him and that's what makes a website if you remove all the interactions if you remove all the images if you remove you know if you break down what web design or web coding was when it first came out it was just text and links it was just content everything else is just fluff and there's this balance that you need a play for your especially for your portfolio site of telling your story and making it interactive in Toma your the way you've done it I think it's it's beautiful so thank you so much for creating it and sharing it I hope you got um some offers or will get offers sometime soon the you already did I'm confident that I'm gonna be able to pay my rent this moment it's just let's go tons of people missing me I have three people that I'm gonna give web flow lessons teaching them have do and Leo and the get tons of portfolio building tips and to go like wanting me to review their websites to help them out because they're also looking out job and they lost their to helping each other out yes like I told you earlier the hardest part was to like feedback because I didn't have any contact yeah community oh so many people because like just if you're afraid to share your work and like you have no advices and you're stuck and you feel like you're staring at the blank page don't is it to share your work because people are kind and yeah they do not give you honest advice is that when our gonna make you products nice nice alright let's get two or three questions Bent's what would you consider trying to copy pages and learn what other people do okay would you consider trying to copy pages and learn what other people do helpful yes especially if you're not too familiar with HTML and CSS it's always useful to see with all modern browsers you have access to the code of a page and you can kind of see how they structure things out like how the sections are billed or they're like pricing cards would be like made what CSS they used positions or any things so code-wise it's very interesting to dive into how websites map is made so you can replicate it easily in workflow but to learn web flow what I did is also I went on dribble the design websites and picked cool animations and just try to read redo them with web flow interactions it positive it's cool I learned so much fluids yeah just putting yourself out there and learning from an example and just you know just doing it all right next round from at any tab how would you rate the learning curve of web flow if someone isn't from a tech background and purely design yeah that's kept that gen sound bothered because if you don't have the HTML and CSS knowledge yet or like oh just a great idea of things book it can be real tough my best tip would be to go to web flow university comm which is an insane Webster any videos exam like a basic of web flows interface and specific topics in like five minutes the person that makes to the soil is extremely funny McCoy I think his name is and yeah just go there if you're struggling for example you have a design you want to position thing that you know nothing about what slow check his video about positioning you'll learn like what each things do and just break down things easily you don't have to tackle everything at the same time you don't have to do interactions trade on just take it at your reason like give yourself easy to tackle challenges build a simple header the text on it see how things are playing with positioning reflects extra just don't go don't be too hard on yourself and try to easily learn HTML CSS rules yeah and things will be much yep all right um let's see here I want this question to from Cory he's asking what was your process to write your content and organize your story it was a mess I can show my screen right as with all great things they start with a mess yeah you can share your screen yeah so I'm gonna show you my mess up whoa this is and this is just one of them this is what I use to organize my website and try to figure out like the script poet for example I I had a blank black square which represents one of the case study page it was just blank and I just started writing down what I wanted to put like the kind of contents just the text nothing was on the left and then I slowly just started to deal visually with some inspiration with some like ideas phones no no and I just followed the script I just followed like what I wrote I just wrote things down and then designed it and it helped me to like really stay organized they'll like a good story that works that's amazing yeah so write things down don't hesitate to don't go ahead and stop designing like upfront and like try to do things like immediately just take the time think ahead what do you want to say in what order what's yeah just take your time to do this process because it will make things so much easier awesome awesome all right two more questions let's go to Andhra did you go to school have you followed web design classes your skills are impressive or is it all self-taught thank you thank you so much yes for the most part it was self thought I didn't go to design school or anything like this I did follow a one-year web marketing course that taught me very basic video editing skills and social media skills but the rest is mostly self-taught yeah we were actually talking about this before the stream like you said you're not a designer and I'm like what what it's designed so nicely but I guess you just pulled from inspiration from everywhere and kind of molded it into your own and and that is amazing and what I want everyone to take a take from this is that you know you have this way of curating content you know and again websites is just consuming content and all the content you've created and in your past experience and the way you've told your story on your website is what really comes out from your portfolio it's not the is if you remove all the interactions of your site your site is still beautiful because of the content so yeah great job you know and I would even add like I only had one real professional experience to showcase we had things to show you can still tell your story without you having done things in a professional way if you like taking photography um like as a like a hobby but you're taking real good photograph is and you think you can turn it into something professional oh yes professionally trust yourself showcase its people might be interested in this service same goes for anything video editing 3d you never know yeah yeah awesome okay last question I'll give it to Gabriel hey Tomas Toma how do you deal with other devices do you work first on the mobile and then move up to desktop or do you go desktop first down to mobile so the the whole idea behind CSS which is the foundation of any websites is that it's it's in the name it's cascading I don't know how to say it in English Oh cascading style sheets yeah exactly and the whole idea is that you go yeah stop going to the biggest version and you go down to mobile and next drag subtract and that's the logic I prefer especially if you're building a portfolio it will normally be consumed more on a desktop it's a desktop experience first because we'll just recruiters and bloggers will check it out on the desktop on their like laptops it's true so outside depends of the project if you know that your target audience is mobile first that's a good idea to stuff with mobile it really depends off the projects okay cool well thank you so much can't wait for you to create those videos teaching everyone how you did interactions and yeah let me know when that happens good luck tweet at me when you you get another job cuz I want to help and clap in and you deserve it but other than that thank you so much for for giving back to the web flow community I can't wait to see where your career goes from here and now we're just going to break down your site so thank you miss pleasure thanks for having me Nelson see you buddy eight let's see here am I gonna mess it up this transition probably okay we're back turn off that I'm so happy that worked I am so happy that we got Tama Toma onto the stream I was stressing so hard last night trying to figure out how to get audio routed for my macbook over to the PC but it worked yay okay so many things we're learning so many things I hate my portfolio site I need to do better but that's everyone you know you're you are your own worst critic so when you see someone else's website don't try to copy it when you look at Tomas website don't try to copy it be yourself like he said all right and he's still in the chat room I think but Kirk has a question what software did you use organize your ideas when I was looking at his screen it seemed like it was Adobe XD but you can also use sketch or effect figma but yeah let me see here he closed this out let me go here just just a little note let's go to my screen real quick no worries Rand Jan I know it was a technical very technical question but you can ask him over Twitter you're a technical question but yeah if you this dream if you want to support my youtube channel if you want to throw some coffee at me not literally but like virtually go to buy me a coffee calm / pixel geek and yeah thank you so much and thank you so much Colleen for being the first yea Colleen bought me a coffee once a week for three weeks in a row so thank you so much Colleen and she's also a motto I didn't make you a mod yet so Colleen is actually helping me jot down all these questions so that way I can make video smaller clips so let me see ad moderator cool Colleen is now a mod Thank You Colleen all right um I'll talk about that next time we're gonna go here alright so we've broken this down let's do some interactions okay um let's refresh this so what he did if the internet will just go already there we go so let's break this down he had three pieces of text so three lines that faded in we're gonna learn this right now okay let's break this down super simple so let's make the body I'm just gonna make the body black and simply just type in black there we go we have a black background and now he has his content centered vertically and horizontally on the page so what we can do is drag in a section and make this the height a hundred vh o kvh meaning viewport height so it's gonna take up however tall the browser height is okay not that not the height of the actual page like the whole page just the browser window height and now within this section we can click on this and we'll change the name to zero and then we'll go ahead and click on flexbox and we want to align this Center vertically and align this Center horizontally okay so this means as you can see it says flex layout settings effect and elements children so children meaning any elements within this element all right so let's make some children no no okay now we have three lines of text so let's go ahead and put three lines of text well take this text block and there we go and let's go ahead and make this color white and we can do that by you don't have to set the color white for each text block you put in you can tell the parent of the elements hey anything within within this element anything within me will have a white font color so I can click on hero scroll down to typography and type in white I can even change around the typography like let's do something like that we'll make it bold we'll do something like something big there we go and the line height of 1.3 - all right cool so text block and so if I just copy and paste and paste again these are already white so I don't have to change the color because the color is being dictated by its parent right here the hero okay also notice how everything is horizontal that's because I forgot right here in the direction it should be vertical okay now that we have it vertical what did he put he put his name his position and where he's from and in the year so let's say the name is I'm gonna pick a random name here we'll use Andra and then webflow visual designer or no visual developer I think that's what we call one of our people in our team and then I don't know where you're from Andhra so I'm gonna put earth 2021 because this year yeah this year is kind of weird all right hundreds already living in the future so now that we have this set up we need to make these fade in after the page is done loading so how do we do that we go into this lightning bolt right here okay so this lightning bolt is our interactions panel and we have different triggers now we're gonna go to page sugar because this is the trigger that we want to happen so if you can see here if I hover over these we get a little information at the bottom so this one says animate when the page starts or finishes loading so this is what we want so we press the plus sign and then we're gonna click on page load and now we have two extra settings now I know when going into interactions it's kind of crazy because you have all of these settings whenever you click on something you get more settings you click on something else in even more settings and it's all packed into this one small panel on the right alright so hopefully this tutorial will help you go through these interactions a little bit easier and you don't get lost when clicking around okay so we want to do when the page finishes loading because what is happening is when the when the browser is loading the page it's loading every single line of code it's loading every single image every single animation every JavaScript its loading everything from top to bottom right if you use the wind' page starts loading that means is while the browser is loading you want your animation to happen at the same time so this is this could be bad what if your image isn't loaded yet right so you want to make sure that everything's loaded first and then you go ahead and start all of your animations so this is the one we're gonna choose when Paige finishes loading start animation okay and I'm going to press plus because I want to create a new timeline okay and we're gonna call this page load actually hero text fade in and you can name it whatever you want but this is just to help you understand what you're creating alright now what we need to do is always before you set a timed interaction before you press + you want to select the element that you're that you're going to affect okay so I clicked on this text I'm going to click on plus and because I'm going to do a fade in effect it's actually just opacity from 0% to a hundred percent so I'm going to click on opacity and I'm going to set as initial state so what this means set as initial state means when the page is starting to load do this effect so before anyone sees anything do this effect so I'm gonna set this opacity to zero so this is my initial state this is what the element is going to look like before anything happens okay now I'm gonna press + on the end meaning this is what I want the element to look like when the animation is done and I'm gonna click on opacity again and we're gonna keep that opacity to a hundred a hundred percent and for press play there we go we have that animation we have that fade in effect all right now let's do the same thing with the other ones I'm gonna click on that text block press + at this at the first step opacity set it to zero I'm gonna press plus at the end step and opacity 100 same thing one more time plus opacity on the first step set it to zero and then at the end step opacity 100 then when you press play there you go all right so if we preview there you go is the video blurry for anyone okay cool so does that make sense now everything from here on out is now just small little tweaks okay so let's go ahead and make a little tweak let's let's fix this so if I go here linear everything is just vary from A to B there is no type of easing all right let's let me see here easing CSS let me see here there we go so this is what this means this whole huge drop down menu right you have all these different types of eases and so you can see which one does what and see how it has different speeds what I usually like to do is like using Quint ease out Quint which one is that either court so you can like just see how these play out like some of them bounce like that so what I like to use is ease out Quint mmm who are you there you go so if I press play you'll notice that this one kind of kind of animates different than the other front to see how that came in a little bit faster yeah it's these subtle small design changes and so if you want to change them all you can just hold command or control and click the end steps of your elements and change them all we can change it to you know quint press play there we go or we can change it something else there we go so it's up to you but if I go back and close this interaction everything is showing ok so when I go into my animation that's when I'm previewing what things look like but when I go back and close the timeline of the animation I can see everything because it's easier to see the the end state so I can edit whatever I need to edit all right hopefully this this helps ok cool any questions any questions ok so that's how he did that it's just a simple fade in come on internet while that's loading bents thank you so much for the coffee you rock Scott thank you okay so that's page load okay alright hover effect now I was confused at first when looking at this I was like how is he putting his image his headshot in on top of the content on hover that doesn't makes sense and so I right click inspect like I always do and I notice that he has an image if you can see here he has his headshot but when you hover over it his headshot this one is just a second image with the background cut out and almost like oh that makes so much sense how it tricky so again it's like being a magician so I'm gonna show you behind the scenes how he did this so let's go ahead and let's reformat how we're doing these elements let me put in a div block and put everyone in a div block and we'll call this hero content I'm just setting up the elements okay and we're gonna Center everything okay and the reason why I'm putting them all in a div block is because I want this div block to have a position of relative I'm doing this because I know that the images that I'm going to put here are going to have position absolute meaning they're going to float either behind or on top of other content let's go ahead and take these text blocks and we're gonna give them names I'm gonna call this hero text and we'll just call it hero text and make sure that this is position relative and set the z-index to 1 because or actually see and it's tattoo because the first image the image with the background so I uploaded it so the image my headshot with the background is gonna go below these three hero texts so I'm setting them up give them a class oops give the class name of hero text hero text okay so all three of these are set up to go on top of my headshot the one with the background now let's go ahead and put that image in right here and we're going to put that right here wolf is huge um hero image and let's go ahead and give it a different height hmm yeah okay and now we're going to do position:absolute and now we're going to do a trick where we Center it using CSS okay so we're going to do position position:absolute with the top being 50% and the left being 50% and then we're gonna go down to transforms and add one and again if this is over your head don't worry just um this is just me setting up what he's done and so my X&Y I'm doing it negative fifty negative fifty now you might be asking Nelson how come you just didn't use it didn't how come you just didn't use a flexbox so you don't have to do all this stuff well flexbox you can't do that with things that are position:absolute okay and now I'm gonna do the same thing I'm gonna get another image of me and let's call this hero actually yeah let's call this hero image as well but I'm gonna give it a combo class of overlay that way I can set the absolute to be three okay so this is three Z and X 3 these hero texts are Z and X 2 and this hero image the one with my background is just Z and X zero or auto alright and so now if I take this one and set this opacity to zero I can just go to my hover and set the opacity to 100 and then click out and there you go see the content is the the text is still behind me so there we go and also with this image I can give it a transition of opacity and so that way tricky tricky Stephen what's up welcome back see here oops oops there we go okay all right makes sense so I didn't you know even have to use interactions for that part this is just a CSS hover and it's just trickery the only interaction is the loading of these three text boxes and my name is not Andrea or Andra but I couldn't get a photo of it because because she's in the life Jen but yeah hopefully that makes sense all right next thing I want to show is let's do a while scrolling so as I scroll down those three pieces of text go away all right Oh in sorry one more thing how I cut out the background if you haven't used this free tool yet it's so amazing please do it remove dot BG Coleen or Stephen if you can put this link in the live chat please remove that BG bookmark it memorize it keep it in your head because you can just upload an image and it removes the background for free in like five seconds it's amazing yeah you just drag it in and then that's it it's done Oh amazing so it's free and that's how I was able to do this all right some great magic happening there all right so while I'm scrolling down three these three pieces of text fade away let's go ahead and do that so what I'm going to do is I'm going to drag a section a new section in and I'm gonna call this Row two and I'll give this a height of 100 VH as well and just so we know that we're scrolling away I'm gonna give it a different background color so ya right there all right so as I scroll down those three pieces of text should fade away the output of remove that BG it's free but it's a it's a low quality but if you want the high quality version of your cut out then you have to pay for credits so that's how they make money hello marine from Texas who is in Florida right now I think you think that's what you said you're in Florida well welcome back nice to see you in the live chat room as far also GATS thank you so much for being here yeah I'll take questions towards the end of the stream but let's keep going with this no we're gonna go back here and we're gonna select hero we're gonna select this one because the reason why we're selecting this one is because as we're scrolling down we want to see how far down we are away from the hero section okay we don't want to use a pig we don't want to use page scroll because this takes on account the whole page no we don't need to know where we are down the whole page we just need to know how far down we are from the hero section so we're going to affect not the pay but just this element so this is when we use element trigger so we're going to do while scrolling in view I think that's what he used yeah yeah while scrolling in interview so we're gonna click on while scrolling in view and now we get even more even more options oh sorry oh sorry for anyone who's wearing headphones it was just my keyboard anyways you click on up selecting action and press play scroll animation and so we're setting up a new timeline a new timeline for scroll animation so we're gonna press + and let's go ahead and call this hero scrolling ya hero scrolling now this one if you notice that these were based on time this is based on percentage so this is percentage based on how far up or down from the element okay so let's go ahead and click on hero text plus and I'm gonna set the opacity okay and just to make sure we know how far down we are from the page we can click on live preview and start scrolling so notice we're already at 50% down okay so we'll need to drag this down to something like we'll say 75 that's a simple number so if I scroll down once I get to 75 start to do something okay well actually if you see here that piece of text is already gone so it should be earlier than 75 so we can do something like right here 63 so I'm gonna drag this up to 63 you can drag it or just type it here on the keyframe and then when I get down to say here so we'll be 68 yeah so when you get down to 68 that's when I want the opacity to be zero so we can call this 68 and set the opacity to zero and notice it's affecting all three that's because I'm setting it to affect children with this class I don't want to affect the class name I want to affect just that piece of text so I'm going to choose I'm gonna change class to select an element and there we go now it's just that one element if I preview scroll down watch the name goes away go back up comes up alright that's it so interactions is all about what happens at Point a and then what happens when I get to point B that's it yeah so let's do it again studium I'm gonna take this hero text and let's go ahead and find where we want the animation to start so we can start at let's start at 66 all right so we'll start at 66 and we'll press plus and opacity and set this to affect the selected element and if you see a caution sign that means hey I need a number so oh no actually a crossing sign means hey I have point a but what's my point B so you just tell web flow hold on I'll get there all right so opacity is going to be zero the keyframe you know we say oh yeah okay 67 all right 67 and then let's just do the same math so 63 to 68 is 5 so 67 to 72 press + opacity and set this to 0 oops this first one's supposed to be 100 yeah okay so we have 100 on the first line 100 on the first line and then second and then the first line fades away to 0% and the second one fades away 2 0 % live preview first one second one all right let's do it one more time we're gonna get the hero text and let's just do the math the first one the second one is away by 4 so we'll do 60 you know 71 yeah we'll do 71 on the opacity set this to effect selected element will keep the opacity at 100 and then plus 5 so 70 1 plus 5 is 76 set the opacity to zero and we're done one two three all right look at that super simple and again if I click on this if I click on any of my elements notice how this one is highlighted a little bit blue that's because this is my point a and in webflow is showing where my point B is where my end state is if I click on this this one is connected to this if I click on this but if I click on this this one is connected to this alright so there you go but something feels funny right now did I do my math right I don't know but yeah so there you go now again what Toma did was he just added some some flare some some subtle animations and so what I think he did was add some smoothing okay so notice as I scroll up and down it's just very linear it's not really super smooth so what you can do is leave your leave your timeline your your scroll animation and play around with smoothing so the more smoothing the more smooth effect you get like so if I scroll down I think that's what's happening I didn't even actually go into his read only link so I'm just riffing right now all right yeah so that's while scrolling in view does this make sense let me check my okay cool and so far inside note the stream is smooth right now knock on wood no dropped frames let's go I'm learning okay another thing I want to show you is yeah this part right here this again is just while element is scrolling okay so all it is is just text and then elements that are pushing away and it's I again I'm gonna say simple but simple is relative so let's go ahead and do that from scratch here we go so Row two let's go ahead and set that to flex box so we can Center everything vertically and horizontally let's put in a div block straight in the middle right here and let's put some text it's like a paragraph and we want to make that skinnier so let's go ahead and take this div block and call this road EUCOM ro2 content max with will say 550 give all the elements a font color of white make this a little bit bigger set the font and give this some room no oops yeah something like that and we can Center it all right so we have this and we also want to set the position to two relative yeah set this position to relative because all of these all of these right here they're on top of this piece of content so we need to have position relative in the parent element so we can do position absolute for the other ones okay so this right here Row two content will have position relative meaning hey things inside are going to be position absolute so let's go ahead and do our first one I'm going to drag in a basic div block and we're gonna call this blue pill because that's that's the shape and so let's go ahead and make that shape we're gonna get a color set it to blue something like that we're gonna give a border radius let's do 40 cool something like that and we're going to put a piece of Texans there and in there so we're gonna drag in a text inside of a blue pill and there you go let's go ahead and play around with the padding real quick the font size should be smaller yeah and we'll go ahead and make this position display:inline so why did I do display in line versus display:block wait hold on did I actually did I even have to do it with display:inline let me see ah no I didn't okay so position:absolute will shrink the element as far as it can because that's what happens to elements that are floating all right let's give this more space on the sides something like that okay so we can say hello someone from the chat room hope you're doing well smiley alright so let's go ahead and we have a position:absolute so let's put it on top of the content boom done right so now you might be thinking if you're used to web flow already you might be thinking okay this is when I start to set my transform so I can rotate it and move it around no do not do any of that inside of the Styles panel because if you're going to do interactions and do rotation and moving of the X and y axis or me moving the translation moving the position of the element on the X and y-axis web flows interaction is going to erase or overwrite all the transforms you've made in the Styles panel so just leave it as is okay okay so let's go ahead and do our interaction we have everything set up as far as elements and styles let's go ahead and do interactions press plus some interactions and now we're going to go to let's say row two oh actually no we're not done we need another element below this so that way I can scroll past it see I can't go down any further so let me add another section real quick so I'm going to add another section put this above put this above I'm gonna call this section row 3 give it a height of 100 VH so that way now I can scroll past it and above it okay there we go let's go back to Row 2 open that up so we can see everything Press interaction and we're gonna do an element trigger not page element and we're gonna do the same thing scroll while scrolling in view start a new action now we're not gonna do hero scrolling we want to do a new one so we press + and we'll call this row - scrolling hold on is my it's my bitrate to low are we good oh yeah I think we're good on the stream okay oh thank you Marine from Texas you're awesome yeah you're doing well javi glad you are alright so now that we have this setup which element do we want to affect so Row 2 is the trigger the element trigger but now we wink we want to effect a different element so let's go to blue pill and press the plus at zero and rotate okay and I only want to affect this certain class I mean sorry this selected element and now I can just rotate it however I want oh not on the X on the Z there we go so we'll start here and we'll start here and then when we get to a hundred percent we'll go ahead and just make it crazy like that and so there we go if I live preview watch what happens so yeah it's rotating okay but now we want it to rotate so it rotates like this but let's go ahead and make it or it moves away as well so we need the move transform or the move option so I'm going to go back to 0% press Plus and instead of rotate I'm going to use move and so we're going to leave both of these at 0 that's because my point a is 0 and my point B where I want it to end we can go ahead and press plus move and now we get to move it where every one so I'm going to move it this way and I'm gonna move it up well what's that oh that was my zoom call did I okay so there we go so I moved it away and if I preview there we go two things are happening the move of the rotate and the move and you know what let's let's make this happen I'm gonna hold shift and select both and I can move them down the anywhere I want in the timeline or I mean in the animation we'll do something like this so there we go now it's happening faster all right that makes sense let's do it one more time all right we're gonna do it from down here on this corner alright so he did this five times he's rotating it and moving the X&Y okay so let's do it one more time let's go to the Styles panel so we're out of interactions mode we're out of animation mode copy this blue pill paste it now we have two of them and I'm gonna set this blue pill to have a combo class of two so this is my second blue pill and I want to keep all this styles of the first pill but I want to move this somewhere else so I'm gonna do position bottom right and there we go so notice how this one didn't move because this is just the main class but this one moves because it's a combo class and the only thing I've changed is the position on the absolute being the bottom right let's go ahead and go into the interactions and add to the time line so I'm going to click on row two and you can tell if something has an interaction if you see a lightning bolt so this lightning bolt if you hover over it element has an interaction cool so let's go ahead and click on Row two we have our interaction right here let's go back inside of it let's go back inside of row two scrolling and now we want to affect this blue pill so let's go ahead and anywhere in the timeline we can just press + and we'll set the rotate and again we want to affect just this element not all elements with that same class name okay so we set the rotate let's go and rotate it the opposite way it's going it's going this and then actually opposite way like this okay and right here anywhere excuse me anywhere will set the rotate - I don't know even further this way okay and then if I press preview it's kind of moving but you know what let's move this somewhere there just play around with it there we go now you see it moving okay so that's the rotate now let's go ahead and play with around with the move so I'm gonna press + and move and whenever you're pressing + make sure that your selected still on the element that you want to affect okay set the move to 0 on the x and y and then at the endpoint 72 I'm going to set the X&Y somewhere else let's just move it far and then down and so there we go so that's the basics of scrolling while scrolling animation alright so we did three things well technically two types of interact now we did three interactions cool yeah and we're staying on time sweet Oh see here all right all right okay will you believe in this up for yes this will be okay thank you Colleen all right are you from Gangnam style what no I am NOT cool cool so those are the three things so let's recap what did we learn we learned page low the page loaded isn't working oh it's it's being affected by the hero what just happened I didn't press that button I press nothing there we go we're back I'll learn as with life I will learn why did that happen yeah okay so I need to figure out why that page load isn't working but let me delete that so we've learned page load we've learned the tricky way to do Mouse hover and pretend that your headshot is going on top of the content and then we also learned scrolling interactions okay and I know just like Tomas said he's going to create more videos on how he did other things on his website but again in this is beautiful you know just and and taking the time to make these interactions nutty nutty I love it and also if you if you scroll all the way down he has this Easter Egg for a 404 oh look at this look at this he's wearing a suit now and now it's new post and then it's him as an anime character that's amazing and then he has this 404 error if you click on it yes accidental test topic switch I don't know what's going on something's wrong with my stream deck okay here we go so if you click on it yes that's him as a kid 404 and then you can play around and here let me show you real quick because I love teaching you all but let me show you how to do a mouse effect with this we're just gonna use a blue box so let's go ahead and do that real quick let me okay Row three last thing bonus here we go Row three let's go ahead and put a div block doesn't matter where but it has to be in Row three and we'll call this blue box and we'll just make a simple box 150 by 150 round out the corners give it a background color of blue and there we go so this is the thing that's going to follow my mouse all right and here's how simple Mouse follows our let's go ahead and click on Row 3 so Row 3 is going to be our element trigger so plus plus press plus and then mouse move over element so when my mouse is moving over Row 3 do something that's our element if I click on play mouse animation and press + so now we get even more even more options so x-axis is the horizontal y-axis is the vertical so when my mouse is that zero percent meaning all the way to the left do something so I want to affect the blue box press + and set the move of this to be on the x-axis 0% meaning all the way to the left however if my mouse is a hundred percent meaning all the way to the right I want this to be Oh am I using the wrong okay yeah I'm using the wrong thing it should be VW and this one should be 0 VW okay the reason why I'm using VW is viewport width meaning if I'm all the way to the left of the page if my mouse is all the way to the left the position of this blue box should be at 0 VW meaning the very left and then same thing with ooh that's too far ok it should be 90 because of the width of the hmmm 89.5 ok there we go something like that so it should be all the way to the right okay and then same thing here for the why for the move on the y-axis if my if my mouse is up here zero percent then I'm gonna set this to 0 VH meaning the height when my mouse is on the very bottom or a hundred percent I want this to be in getting I'm guessing 89.5 VH no 89 88 okay cool 88 all right and so now if I preview there we go and so you can replace this blue box with an image of yourself writing a Nimbus 3000 is it 3000 I don't I didn't watch all the Harry Potter's sorry I'm not that type of geek don't be bad if you're gonna unsubscribe totally understand but anyways moving on it can follow you around like r2d2 ha alright and that's Mouse move and so if you want some you know some smoothness happening you can by closing out the animation and setting the smoothing will do like 90 in preview and there we go so that's 90 and I think that's what he's doing yeah there we go okay cool so we learned four things yeah a bonus all right time for your questions if he had any questions while I was going through this I'm gonna look at it now thank you to Carlene for tracking the questions okay that was a question for Toma let's see here looks like he may have added a move interaction - we was asked after working here o0 to scroll yeah mmm-hmm all right but if you I mean you said Nimbus yeah I got that part because I watched the first Harry Potter but I've never watched anything else it's like in Harry Potter is not my thing I didn't get into it was like okay that's cool not me so that was fun if you have any questions let me know and again thank you so much everyone who donated a Vince and Colleen you know who's the other one uh I got a look I'm using two different mice right now refresh this real quick cool so Bence East Scott Levin yes in Colleen thank you all so much much appreciate it I wish the stream deck worked anyways when do you use interaction trigger that's very that's a very vague question it depends it depends on what you're trying to do GATS iframe being affected by interaction in Firefox when I frame shows fine until I want to hide show click it once I add the interaction my iframe disappears in Firefox so iframes is tricky because what iframe is is you're pulling another website or you're pulling another webpage inside of a web page and so you're loading a web page and then inside of it you have another web page that's loading and so to make interactions happen with the content inside of that iframe is tough I need to see what you're talking about yeah I'd mean really see what you're talking about because that just seems very confusing Kirk thank you thank you for the coffee you rock funky Fox how can we do an animated masonry effect Oh masonry that kind of masonry scares me because it's hard to recreate masonry and nicely inside a web flow without code there's ways to do it with custom code but let me check out your site real quick oh I think I've seen yeah this okay um let me go back to chat I was looking on my PC let me go back to my my screen I'll show you Marine from Texas thank you so so much for the coffee see flow dot code so this is what funky fox is talking about this I'll tell you it would be tough to do inside a web flow I mean if this was like all static then you can do this in grid simple using grid in flexbox but this looks like this is dynamic content meaning it's coming from a database for web flow collections and this type of layout would be super tough to recreate using dynamic content so to answer your question is this doable yes if everything is static but it gets harder if it's dynamic content and you wouldn't want to maintain a website like this without web flow collections or a database because having to update this manually especially when you have different if you had different categories or something it would be tough so animated masonry effect so the elders of the Internet the gods of CSS they are there is some and I tweeted this out there is a CSS property called masonry that's being talked about and if that actually comes out and it happens then I'll be like yeah I'll show you that it's really simple here just add one line of custom code and then go at it so when that happens I'll show you but for right now it would take way too long than 22 minutes to explain but yeah next question I've seen man parallax features on websites on web flow but they are almost never smooth how can you create smooth parallax effect effects smoothing just way I showed you so lien so these right here they seem smooth it depends on your mouse wheel so my mouse wheel go I'm using mx2 MX master to I think and like I have a mouse wheel that can scroll line by line and so it looks like it's not smooth but if I change the mode oh I can't change the mode I don't have that feature turned on but if I change the mode and made it a smooth scrolling on my mouse wheel then it'll look smooth like this but there's other things you can do to make it smooth for example you have smoothing right here so maybe we'll set it to 90 see what happens okay that works and also there's if I go into my animation check this out right so right here so if I just select them all so I'm selecting them all you can change the easing right here so this may help just set it to ease instead of linear Oh ease effects that animation ease of fix the smoothing so I guess you should leave it to linear unless you learned so leave it on linear and just play around with the smoothing so if I set it to 100 wow that's really slow maybe set it to 80 yeah set it to 80 yeah smoothing smoothing is the answer you're looking for all right hope that helps next question Bruno a bit late for the live stream it's okay you can still watch the recording interaction trigger instead of classes or selected element when do you use interaction trigger in on classes where it says oh okay so okay so I think ranjana's asking this part right right here effect when do you use selected element or classes so that's a great question so selected element is good for animations that only happen on that single page okay meaning this element meaning that you're not going to use this same interaction trigger on any other page just this one page so you can select elements on this page and what what flow is actually doing in the background is when you use selected element web flow is adding a code and ID to each of those elements watch let me go here and right click inspect one of the blue pills and okay cool my camera's not hiding it alright so see right here data W ID this right here is what the web flow magic interactions being added to this element so this exact ID is not going to show up anywhere else on your websites and so that's what selected element does so if I click on this for the other blue pill so yeah we're there this has its own ID this is a special ID that no other element on your whole website will ever have it's just a random string of characters so that's what that does if I am going to reuse this same animation on other pages then that's when you would have to do class okay but this affects all of the elements with that same class okay and that means that if you are going to reuse this same timeline the same trigger on another page and that page also has the same class names on that page then you're good if it doesn't have it then this interaction won't work okay so again just to recap select the element good for things that are only on one page class good for things that are going to be on multiple pages cool hopefully that answers your question if we upload a variable font can we change font weight on scroll oh no I haven't even played with variable fonts yet that's new to me but the reason why I'm I know to say no is because we don't have that here unless you come with variable font weights can you can you play around with the the the font weight based on em and Rim yeah I don't think it's possible that's it yeah try it let me know what you come up with great question Pablo Alan hey Nelson any way to connect to different web flow CMS sites ie one site is ecommerce the other and a business plan with many CMS items feature products at the end of blog post oh ooh two different sites two different sites to different sites so what I'm thinking in my head is what third-party tool could you use and I wouldn't know so at this moment no you can't what I'm wondering is why can't you have your blog inside of your ecommerce site but if you've yeah why can't you have your blog inside of your ecommerce site that would make life so much easier if there's like some way that you can't then yeah I would I need to know more about that okay I should have been more clear I apologize I was referring to the parallax effect on hero sections the smoothing still apply yes smoothing still applies a marine from Texas oh and I just saw two more I think two more one more Conan o Co Co Namco knowin I am so sorry if I'm messing up your name you know and thank you so much for the coffee you rock oh it was here third option with the interaction trigger yes so go back to my Mac so there's a third option here for effect and it's to affect the actual element that has the trigger so if I go to row two and let's just say it's scales right here so what this third one means is the element that's actually also setting the trigger is what we're affecting okay so row two has the trigger but it's also going to be affected so that's what that means I might break the stream if I do this but I'm going to reconnect I'm gonna unplug and replug my stream deck okay okay let me mute my microphone I said mute my microphone and went back to this jeez alright I'm gonna fix it next week what what why did it did that on its own okay maybe that buttons broken I did let Nova color on it once all right back to the questions Andrew the kid hey I'm late but I'm here thank you so much the kid yeah watch the recording and hope to see you next time this plan has 10,000 items oh yeah yeah so if you have a lot of data then you need to different whoops so that's one of the things limitations about webflow and as I say with everything nothing is perfect what I'm Flo is not perfect but you know when people are making improvements to get to whatever perfect is that's what matters so that being said probably would need a third-party tool maybe Integra mat or parabola to send data between the two or so both can see a big pool of data I mean there's this one thing that I saw in the internet song reddit the subreddit of no code sheet to API calm and it's pretty cool because you can use any spreadsheet like a Google sheet or Excel and you can use that as your database you know and no coding required and yeah use spreadsheet as your CMS so I mean like if you have data from one and it needs to look at data from the other well maybe you can send that data into a Google sheet and then that's where the other site will look through and vice-versa but there's a cost and if you go to pricing it's 39 pounds a month so that can be a thing for you if your team is cool with that but if you go to documentation it's super super simple you just um you see here no use our example spreadsheet in order to try for free where I saw it yeah here here here so your spreadsheet looks like something like this and then you log into your thing and you get your spreadsheet API key and something and then you just put your basic HTML and then where you want to populate information it's just with curly braces and then this is JavaScript I think that's the that's the magic that's making this all come together so one two three I don't know so maybe if that's something you want to do but yeah I if you have a lot of data man good job but um that's a tough one okay um I'm missing some questions all right last couple questions last two questions when nine minutes okay hi again in web flow mobile landscape view is always different from go live okay so when it comes so this is from harsh Verma high again in web flow mobile landscape view is always different when we alive so when it comes to testing things on web flow go back to my Mac things will not always be SuperDuper correct in this view in the editor view things won't be super duper correct in the preview if you want a real test you always have to test it on the real device okay and there's websites out there that let you test other sites on real devices or makes the wind browser window the size of a certain device but you know the the main test the most true test so you can always do is on the actual device now the reason why web flow doesn't really look exact for things like mobile landscape is because the height this is this is what it's supposed to look like the heights or something and if you want to design like this you can but this is what happens okay so just test on the device and yeah [Music] let me look at the live stream questions see if I an answered questions from chat oh wait that's for Thomas on hover out effect you need to start with the hover over as the initial State hmm Gary on a hover out effect do you need to start with the hover over with the initial State um no not really let's see here so this has a hover effect and was he here the opacity zero so let's pretend that it's like this and then when I hover when I set a hover I want the opacity to be zero so on the initial state I have only the only the styles that I want so that's my initial State and then on hover that's when I do that's something that I want it to do so opacity zero so I can go like this and so let's backwards I think that's what you're asking hopefully okay well thanks again Nelson not a problem Seth's on I want the navigation to menu to be transparent when you're on the top of the page well I have that solved but when you want to scroll down oh yeah you asked me this the school day I don't want to have a white background yeah cool that I'm on a dark background right now yeah let me do that right now okay let's do this so let's bring in a nav bar and this nav bar the color is going to be transparent however when I get let's go ahead and make these white - I can't see these so let's make the color of this white and this also has a class of nav link so all three of these are white and they're sharing the same class name as you can see right here and this nav bar has a background color of transparent however when I scroll past when I scroll past the hero rosae when I get down to here I want that navbar to change color so I want the background to be white and I want these nav links to be black all right so let's do some color changes oh let's go ahead and set this position of the nav bar to fixed and set it to the top and we'll set that z-index to something crazy like a bunch of nines and that way it's on top of everything okay so now that we set up our elements and we set up our CSS it's time to go into interactions let's go to interactions right here and element trigger is not on the navbar the element trigger is based on the hero okay so I'm gonna set this element trigger for scroll into view but what I want to do is scroll out of view right here so when I scroll out of view of the hero row what do I want happen to happen so that's why I'm telling web flow I'm gonna start a new animation and this offset this is important so when I get to here so this is probably let's actually vas-tu it a bit earlier let's do it right here so say 30% so this is 0% and this is about 30% of the height of the elements so the offset we're gonna set to 30 and we're going to create a new time interaction navbar to white and now we're going to affect the navbar press + we can change the background color and this background color will be changed to white and it's not show only sibling is there a bug no how come the backgrounds line what why why why what happened what did I come on that's supposed to change color to white is there hold on what what does this mean I don't know what it means okay hold on gonna save refresh am i doing something wrong here oh so this is this is nav our nav bar has a background-color:transparent when it changes white it should do that Oh hero is the element trigger and so okay so okay I guess it's working but it's not anyways let's move on so that turns to white and nav link anything with a st. with the same Naville inc class the text color is gonna change to black okay how come that worked why is this one not working that's weird only siblings know all elements with this class okay there we go okay it's supposed to be this so any element with the class of nav bar their background color changes but we're not going to use a different we're not gonna use this nav bar class on any other page so it's okay to use this as it but we're gonna reuse in the future we know that we're going to reuse this same interaction on all the other pages because the nav bar is gonna be on all the other pages so that's why we're doing this all right now we figured that out let's go ahead and test it so if I preview and scroll down there we go but now if I scroll back up it's still white so how do we change it back all right so let's go back to our interaction so hero L interactions and then our element trigger and so now we can do the opposite when we scroll back into the view of the hero start in animation and to make things quicker I can just click the three dots or kabab menu and click on duplicate select that open it and change it to black and we'll set this text color to white and the navbar back to transparent and click out and we'll set that offset to also be 30 preview scroll out let's go back in and there we go all right yeah I'm gonna clip this one definitely going to clip this one yeah and it's already 12:02 over time so thank you all so much for your questions if I didn't get to your question I'll bring it next week or tweet it out or if you want donate to my coffee fund thanks again to everyone who's donated and I'm trying to upgrade my webcam to like a a mirrorless one so it's much more cleaner and and fix this setup so it's like high quality so we're learning and in its I just want that high quality stuff so I can produce high quality stuff for you guys but anyways and fix my stream deck why the doing the things hope you all had fun hope you learned something wow there's a lot of people watched today thank you all so much I really appreciate your support what flows fun and just keep you know building stuff keep asking questions and experiment because that's the beauty of a web flow that you can experiment in a very visual way where in the past you would have to code and test code and test now you're coding and testing at the same time what so it's an amazing tool have fun with it if you build something with it please let me know tweet at me and if you want to be interviewed if you you want the spotlight and you want to show us what you're working on or what you've created uh yeah I'll put you on the show just like I did with tomorrow and again thank you to Tomah for for agreeing to be on the on the stream it was just I think it was on Wednesday I was like oh can't you be on the stream and he said yeah sure so it was very very spur of the moment and I'm amazed at what he's done and if how I've broken it down lets you see behind the curtain and empower you to create crazy effects like heated then go for it I mean it's super simple now right well simple is relative but I'll be here for you and the rest of the web flow community will be here for you to help you out and again this stream the moral of it I guess is what Tomas said when you're building your portfolio site it's more about your story not much about the interactions so write your story first you have a good one everyone has a great story write that down first organize that into your design and build your site I'm gonna take that advice and try to do better with my own portfolio site which one day I'll be happy with but yeah everyone a live chat room thank you so much I will see you next Saturday at 10 a.m. Pacific Daylight Savings Time until then keep building and don't forget make the web beautiful together see ya you [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music]

Channel: pixelgeek

Views: 2,104

Keywords: content management system, design, graphic design, jquery, responsive web design, tutorial, web design, web design tutorial, web development, webflow, webflow tutorial, pixel geek, pixelgeek

Id: Wgf0-nZHQ1Y

Length: 128min 31sec (7711 seconds)

Published: Sat May 02 2020

Reddit Comments

[u/bumbaclotdumptruck]

Is this your channel? If so, I’ve watched many of your videos, and they’re great! Thank you!