The basics of 3D interactions in Webflow

[Music] [Music] [Music] down [Music] [Music] wow [Music] so [Music] [Applause] [Music] [Music] [Music] so [Music] wow [Music] so [Music] [Music] [Music] um [Music] hello [Music] is [Applause] [Music] which [Music] is [Music] just last week you call me you're talking is driving me [Music] if [Music] is [Music] [Applause] [Music] this oh hello yes we're live hey everyone welcome to another live stream i'm your host nelson aka the pixel geek thank you for joining me on a saturday at 10 a.m pacific time um if you're new here in the live chat or just watching thank you so much thank you so much for being here and taking two hours out of your weekend to geek out about no code tools yeah such a still a weird concept to me that uh people would spend time watching a geek a pixel geek talk geek out about no code tools but anyways besides that i hope that these streams are very very valuable to you and that you're you know learning something or just seeing something new and you're like oh my god okay let me try that i hope that these are empowering um if you are regular here thank you again thank you for joining me uh if you haven't hit that subscribe button go ahead and do so uh we're at what 8 000 over thousand five hundred that's amazing and i started this uh youtube channel seven years ago and so it's wow it's just wow to me right now uh so let's see who's in the chat room right um and where are you from yeah um so we got hg web design he's back hello am i the first yes you are you're the first one in the chat room pablo is back ripple effect burzal bucks bros gaming i haven't seen that name so welcome to the stream norm is new v is new eli is back sarah no socks one of the awesome um let me make you a moderator um one of the awesome volunteers from our community who's helping me build the pixel geek community and um yeah lots of things to talk about with that we'll get to that soon jonas is here steven gunn is back colleen my wonderful autumn moderator and uh norm is from vancouver calendar malaysia nice so uh welcome everyone this is awesome and already 30 people are watching peace let's go uh yeah where do we start where do we start so at the begin uh uh tuesday through thursday i think there was one on friday as well but uh i need a i need to catch up on things webflow did a virtual world tour and um this has been a replacement because of covet 19 we can't have another no code conference which was super awesome to be at um but we wanted to do another one but kovit happened and so we the the webflow team did a virtual one in a world tour making sure that um there was these uh live streams that happen in certain time zones so everyone could you know join in and speakers from each uh time zone and it was it was really really interesting and i got to be one of the um breakout session speakers well basically what today what we'll be doing in the topic is the same exact thing i did for a webflow world world tour but um i want to get khalid in here um she's one of the moderators here that you see in the live chat but also one of the volunteers who's helping build the web uh the pixel geek community and so she actually went to the world tour virtually and let me get her in here see if this works colleen hello no your mic doesn't work oh you're muted right i forgot hello i've forgotten muted welcome great to be here yay so webflow world tour um yeah that happened and it's gonna happen again for the um asia pacific time zone uh next week i think starting monday or tuesday but um you went to one or two of them uh what was your thoughts on the event so i actually popped into three of them this week for different different amounts for for each day and it just it was a lot a lot of fun so if you haven't yet gone please sign up and go uh either this coming week or the following week it's actually a three week long event and it was really great a to hear announcements but b i mean i think we're so used to doing things asynchronously that being able to connect and talk with people in real time was just a lot of fun yeah yeah there's so much async happening right now and um and i finally got to meet in pertinent well not in person face-to-face marine from texas who actually lives in florida but um yeah i finally got to see his face and meet him and i'm like oh that's amazing and it kind of felt like um no code conference you know just meeting the people behind the avatars for the first time it's like oh yay um so what was um you know one of the things that really stood out to you uh from the talks like what is the one of the best things that you've learned from the past three days so one of the talks that i went to and actually since uh you just mentioned the marine from texas i think he went to this breakout session as well so maybe we should could we maybe stop and for anyone who doesn't know the format maybe we should say a few words about what the format of the world tour oh yeah go for it so uh so the events have basically been starting with a keynote presentation that has been talking about what webflow has been doing feature-wise and what's coming up and then following that there have been smaller talks and intermixed with that there have been breakout sessions where there's virtual rooms where you can go in and and speak with with folks one on one and get to know one another so there's kind of a little bit of something for everyone so like big name talks little smaller more intimate talks and then kind of the that conferencing feel type thing that you have and so one of the breakout sessions that was kind of more that intimate that i enjoyed that then moved on into [Music] a smaller bit was uh related to accessibility um and so there were several people from webflow that were on that and then that was kind of one of the chances where i also got to meet with meet marine from texas oh nice nice yeah um i guess we can go straight into uh what the the keynote that uh gabby and barrett from the marketing team where the growth team from webflow talked about the new upcoming features yeah so um uh let me go into my screen real quick and um share one of the slides that they have and that cool so this one right here um accessibility improvements like that one i never saw before and when they showed it i was like oh that totally makes sense you know like an auditor or some sort of assistant to catch you saying hey you're like you're missing an alt text on a certain image or you should um you should change the contrast for these colors or so better can so people can better read uh or see your ui um yeah so what were your thoughts when you first saw this well i i guess you know just kind of kudos to the to the webflow team i mean it just seemed like there was announcement after announcement after announcement where like my jaw was just sort of hitting the ground on on each one and it's one of the things where i have felt a little bit of trouble kind of going into webflow is i mean this is you know you you've used the phrase and i think this was actually used in the accessibility talk with great power comes great responsibility and when going into the canvas it's a blank slate so you can do anything but with that it is so easy to [Music] create sites and create functionality that isn't compatible well for either screen readers or other assistive technologies and it's very easy to lose sight of the cdc has a statistic that basically one in four americans has some kind of disability yeah some are very obvious others aren't so you know when you're going in and doing that animation you know is someone with parkinson's trying to trying to use your site and having trouble you know clicking on a particular thing so being able to have these features in here to help you know guide and not make some of the obvious mistakes i think is is is going to help with kind of as your tagline has been making the web beautiful together yeah yeah i mean i'll be honest i love going into the canvas of webflow and just going at it and ignoring accessibility but something to help make us think about it right in front of our face and show us um well let me show the screen again and show us a clipboard with a red x it's like oh okay yes i'm forgetting some stuff you know so it'll help a lot of people and putting it in the forefront uh will make a lot of a lot more people happier you know so um yeah kudos to the team uh for doing that and i think the team is looking for a name for this system maybe we can suggest a different name rather than just a no um if you're in the chat room right now go ahead and put what would you rename this accessibility assistant um you know i i think from the the dream big week the hack week that the web flow team had there was um someone playing around with the name flo but i was like hmm that's it's too close to the the mascot of the progressive insurance commercials so i put a giphy of her in in the chat but um yeah what would you call it put that in the chat room right now um another thing they showed off and i think this is huge um is uh nested symbols from roll yeah nested symbols so the thing the thing about um symbols is that um and what i've just learned what two or three weeks ago when working on a client project was that oh you can make like dynamic kind of dynamic fields inside of symbols and change them without having to change the whole symbol it has its own instance that's cool and now the team is taking the next step to let you put symbols inside of symbols which is like which is pretty cool to me and it's like something that you know the the community has been asking for and um and after that they talked about um element overrides and i forgot what do you remember what that was all about i i think that was kind of related to how we're doing stuff with symbols okay where you're able to override an element so um oh gosh now i can't even think of the example but yeah it's all kind of together gosh i can't believe i forgot yeah because i'm just looking at the slide and i'm like wait add and remove individual elements from symbol instances so oh okay okay now that i'm reading it um and i'm looking at the whoops looking at the screen oh yeah so if you have like one if you have imagine these three cards volunteer uh events and about us they're all one symbol but they're they're their own instances that you can change which we know from previous stream that you can just change it uh per instance but what if one doesn't have a button or doesn't need a button or doesn't need a headline or something you can actually display hi i'm guessing it's a display hide or something like that i mean not display hide display none or something like that yeah being able to being able to change and not have to create a whole new instance that'll be that'll be nice and helpful yeah yeah so a lot of great things and then i think the last thing and i think that one's going to be the the cherry on top what people have been asking for for a long time um is style overrides with variants and team component libraries so uh for instance if you have a symbol of like this button right here where it says sign up and then you drag that into your nav bar and then it says like get tickets or whatever you can change the label yes but changing the color that's something you can't do right now webflow but soon you'll be able to change the color and make different variants and and i'm seeing tweets like this already um just this morning someone asked is there like a tailwind css version version for like web flow and it's like having a component library where like what if i have all these buttons right and all these styles and i can drag and choose which one i want and then if and i'm just guessing now i'm just guessing if someone changes something in the team component library that master symbol those styles would get pushed down to to all the other ones that's what i'm thinking if that actually happens whoa now we have a real style guide we have a real component library people have been asking for style guides or component libraries for a long time i think this is going to be the thing like i don't know what are your what are your thoughts on uh all of the web flow future future you know one of the things with kind of having kind of all these you know pieces being able to to interact with one another to me it's more like being able to have even more powerful lego blocks than we had previously and i don't know if you attended this talk but there was a talk where um i guess in addition to sort of the technical talks that happened during the world tour if you haven't gone yet there's also sort of inspirational and use case talks that have been taking place and in one of them it was being discussed how this team in a very short period of time was able to create a site and then they created a bunch of splinter sites based on that major kind of template and i remember seeing in the chat some people were kind of just asking oh my gosh how did they handle the style guide and that kind of thing and so seeing these features coming out that just seems to be very great just to make it so much more powerful that if you are a company here and you have subsidiaries or sub brands underneath that you're you'll have better control over making sure that everything stays in sync yeah especially think about if you've got a company that ends up at some point undergoing a rebrand just you know basically being able to quickly push out all those changes and having them made everywhere yeah i mean a simple example would be uh at the webflow branding team branding marketing and education team how they're very they're they're the public face uh the first public domains of webflow when you're coming into the marketing page of webflow.com and then all those child pages but also university.webflow.com needs those same type of look you know and like what if one day we change our font to i don't know don't say comic sans i was gonna say san francisco but okay you know what what if we went with san francisco or something or comic papyrus that's an actual thing or is it yeah yeah it's comic papyrus or papyrus chronic whatever that's a real font but what if we changed it then we have to go through everything but this hopefully this thing will will solve that issue yeah yeah um other things that they talked about uh yeah so they didn't have any screenshots for this but logic flows and user systems um yeah it's it's known that the team has been working on this and researching and whatnot um but you know you either you you the team always wants to do it right and making something sim i always say making something simple is hard making something hard to use is simple so they're the team has always been taking the hardest route to make it simple for everyone to use but for now for logic flows a lot of people have been using zapier integromat and parabola and there's other tools out there that do the same thing and for user systems member stack member space uh have been the go-to's and so um yeah what are you what are your thoughts on those two announcements i was so excited to hear i had been hearing rumblings of you know some of that functionality but i still felt like it was way way way out into the future and while there are you know some great no code tools um in the space it's another tool to have to learn and so being able to have more of that integrated within webflow i think is it's just going to be make you know webflow more powerful and make it easier for everyone to create even more powerful platforms so i was very very excited to do that they're they're something i've kind of been personally playing with that i hadn't quite been ready to do in webflow in part because some of that just wasn't there and so being able to hear that was um just maybe extremely excited so i think i'm sure a lot of you know probably people in the chat and elsewhere are also excited as well oh yeah oh yeah i mean um i'll i'll tell you a bit i've been working on the pixel geek community website for was it two is it two weeks now three weeks i don't know longer than two yeah day and night i'm just like oh i have this idea okay i gotta do it i gotta put a trello card and i gotta put myself make myself accountable and just do it and yeah i'm taking all these lego bricks of like zapier member stack circle dot so uh web flow and just mashing them all together and then if one doesn't work i will have to find another piece um like a weird piece so i take like air table or google sheet so i can connect it somehow and i posted a screenshot on twitter a while ago of how many zaps i have one of the zaps like the registration for the community site when you register it goes through 15 steps so having that all built into webflow and maybe it'll be a max four or five steps uh would be some so powerful and i know a lot of people uh coming from the customer support team um i know there's people who are like why do i have to match all these tools together you know it kind of seems overwhelming and i see that it's overwhelming if you want to start a web app um and you can't just use webflow so one day soon that's what we always coming coming soon okay um anything else anything else uh yeah anything else did you want to say about the the world tour or anything about the pixley community before i let you go um so if you haven't gone to the world tour try and um try and join in some of the sessions will be webflow has said will be available in the future but some sessions are not being recorded and i think some of those smaller things are kind of where people are able to uh connect and interact so uh try and find one that fits your time zone yeah yeah so i posted the link in the chat room webflow.com world tour register and then you'll get a link and it's all free so free knowledge get that thank you so much colleen and and thank you so much for the coffee thank you every week yeah so i'll see in the chat room okay good bye everyone bye and they're cool and the call thank you so so much colin you're super awesome um yeah a lot of news a lot of news and we're not done yet with news we're gonna keep going um what else happened lazy loading lazy loading oh you my screen so whenever you drag in a inline image and go to the element settings panel done well if you don't know what um lazy loading is it's just a way for your images to be lazy that's it all right so actually when the page loads for example let me do i have another image we have to okay yeah cool i have these other images too so let me place this image right here no let me place this image there okay cool so this one this image will have lazy load okay and notice how this hap when i dragged the image in lazy load was set by default so that's awesome so what happens is when the page first loads the browser is going to download all the images as it's going to download every single image and it's going to take some time for your user to actually see the first row because your brows your browser is like okay let me download all the images all the javascript all the css all the html videos like give it to me all before i show the first row on a web page the cool thing about lazy loading is when someone's scrolling that image that i place at the very bottom right here this image won't load until your user gets to it so when the user gets to right here or something that's when the the browser will request from the servers hey give me that give me that image then it will so that way the first the first section your first section your first row on your homepage your hero row or any page will load faster so yeah lazy load so you have lazy load or it loads with the page or it's just default to the browser so try that out pretty pretty cool what else is happening um cool so every week we're starting something new wait i have a question from hg do i have to remove my own lazy load settings and add the past loading so any images that you have in your projects now are set to default default uh meaning they just download what whatever the browser is telling uh telling the webpage to do so you would have to go into your projects now and set them all to lazy load to gain that optimization so go ahead and do that um next so each week we're doing a daily a weekly challenge just for fun so i'm teaching something in each of these streams and it's up to you if you want to bring your project that you're taking the knowledge from the last stream and what you've done in the past week and show it to the community just a way for you to you know keep your keep yourself practicing keep yourself accountable and you know to be good at something practice and you have to get feedback and then you have to build upon that feedback so if you have any if you have your project today to show off for the weekly challenge which was navbar and drop-downs and using interactions for but i'm in the chat room right now and i'll review them while i wait for those links i'm going to go to a tweet that i got or a dm that i got right um um from taylor he says good morning nelson i'm finishing my first major webflow project today and it's going so great i'm an artist whose world was recently open to the joy of engineering thanks to webflow and the amazing community i wanted to tell you that you're a great leader because you set a positive competent example for people you make something that's boring on paper seem really cool and fun that helps me enjoy my job and that's like old you're positive and humble when when you are troubleshooting on stream and as a result i feel like with a patient a positive attitude i can fix any problem i run into despite self-learning i nearly cried after reading that for the first time because honestly i i just want to geek out and help people and when i got that i was like oh my god oh thank you and um to me when you have a teacher who is very passionate about the knowledge that they're giving away freely you tend to remember that teacher for a long time uh can you remember a teacher that had that helped you learn something and treated you with respect and honesty and empathy uh the one teacher that i know everyone knows well most people is mr rogers and how much empathy does that man have and he's very passionate about you know being just learning something new and being honest and and loving and you know what that's what i want to pass on to everyone else like if you learn anything from my streams please pass that forward because as i've always been saying since my first youtube uh video if you look it up i've always been saying make the web beautiful and this is what i mean and because he sent me that dm he asked can you review my site i'd be honored and i said of course but i'm going to do it on the stream so if you're here taylor here we go i'm reviewing your site i'm looking at it for the first time taylor noteworthy all right um my first thought is okay the first three seconds where am i what is it about and where do i get more information where am i taylor noteworthy all right so this means if it's a name that means it's a personal site what is it about i solve creative problems and lastly where do i get more information i see a navbar on the left because my eyes look in f formation cool it works and as and he has personality on his site because it's not just a white page it's a different color it's a it's a nice color and it has an illustration of him i've always suggested put yourself front and center on your hero row whenever you have a portfolio page because you wanna you wanna show who you are immediately and you wanna show your personality because this is not just a business card this is your handshake your virtual handshake and because it's the illustration it doesn't have to be a photo it doesn't have to be video even illustration works this works so so far i like it uh the circle in the square interesting i'm in so let's scroll down okay so he keeps that aesthetic with the the line art with the buttons i like this button hovers keep the same uh keep the same colors nice okay and the contrast of the colors speaking of accessibility it works because i can clearly see even um for people who uh have a color deficiency see it um here i speak louder than words i'm proficient in good old-fashioned sketchbook i like this i like this moving on so i'm wondering since everything is very static what if you can add some interactions like scroll to interaction imagine if imagine if these three these three screens actually the yeah so if this laptop was one layer this was another layer and this was another layer what if you scroll down and then they kind of like 3d i'm out as an animation one two three i think that'd be cool or take it even further the laptop opens and then one two that would be pretty cool um see if you can do that with uh interactions all right moving on portfolio nice um careful so this is the thing um just all these are nitpicky um this is two lines and this is one line so one thing you can do is probably uh set this to i don't know if you're using grid or flexbox or something but this should be this box should be as tall as these and there's a way to to do that but um yeah just small thing right nice okay so if you have hovers on these buttons you should have hovers on these as well and maybe make these black because these buttons are black the black text make the icons black and then on hover you have that same effect so just keep things consistent cool cool awesome all right and it's a one pager yeah it's a one pager very well done now i'm interested in your responsiveness oh okay some things are crashing it's okay you can fix it nice okay so there should be a little bit more padding this this right here seems really close to the edge of this box so if you added more padding um uh see here adding left and right you have it as seven and five seven and five pixels so i would say like 20 let it breathe actually padding on all sides 20. yeah see just let that text breathe a bit need some space so 20 on all sides but cool let's see your menu okay i like it nice well done taylor um i did see a tweet or not in a tweet charlie saying dude i sent you a dm too i haven't heard from you i there's so many people that i want to help uh charlie um and it's hard to find time if you send me a dm if you send me a tweet i'll do my best to to respond but it's so for the pixel geek community what i'm trying to do is uh is build a a project help board so everyone can help each other and be incentivized to do that using uh buy me a coffee.com and that way you know if i don't have time to answer a question the community will help all right um answering dms is not scalable so i i wish i could um and that's what i do all day at work anyways so i'm sorry charlie but um maybe at the end of the stream i'll get to it because colleen will make a note of it so thank you so much um and taylor's saying the what i do section is interactive but i need to make it more obvious uh what i do section this one hold on let me turn off huh oh yeah yeah i did not know look at that i did not know okay yeah how would you make this obvious huh [Music] i was going to say do you wrap it kind of like make a button look like these but big but huh i'll have to think about that huh all right um i think we're we're done with announcements or stuff like that oh one more and then and then we'll get into 3d i promise so many things to talk about ah okay so last one uh september 18th friday at 10 30 a.m i'm going to be talking about why no code is important for all ages so if you want to save your spot and register here i'll put the link in chat but yeah i'll be all super passionate not and getting on my soapbox of no code is important so yeah do we have any any links for the nav bar have no no one did the navbar navbar challenge okay you can challenge yourself to do 3d my pleasure taylor thank you so much oh eli did eli did the challenge uh get it so today's topic will be basics of 3d inside of webflow but we're looking at this one nav component okay so here we go eli you did last week's uh this week's challenge ah okay i see something see something um so first of all great job this is nice oh okay okay okay lottie oh man and you got the right lottie animations because it fits the whole theme of me i wish it was this come on oh wait and you also have scroll oh look at this yes talking about everyone it's so good then wait wait wait the navbar changes color to to the ground and it goes yes look at the background color of the navbar changes you eli come on this is so good all right so yeah this is really good so this is a basic drop down yeah i said basic basic drop down uh component in webflow but you can stretch it you can um make a mega menu you can do so much with the drop down component with webflow and this is one of the things you can do uh so if you didn't see last week's stream go ahead and watch it to see how something like this can be done but eli the only little thing you have to figure out is uh you have some sort of jarring effect when it's see that little little thing where it's like pauses and then it collapses down um and i'm guessing um hold on where's the let me go to the link again i'm guessing it has to do with let me go to your open in webflow okay there i'm guessing it's because you have padding inside of your and you even did a drop down background overlay thing man that's so nice okay let me look at this div block right here yeah you have a padding so you can't have padding with the div block that's like that okay so you can't have padding i think that's what's going to fix it yeah so remove the padding and you're good cool and you did a page on load effect with the sun come on this is so good all right take this eli go to um an outdoors uh store was it um yeah like some hiking store and say hey i have your new website let's talk do that all right cool so this week's challenge will be doing 3d so thank you so much eli uh let's go on to our main topic 3d right so i'm going to show you the basics of making something that's 2d like a card and making it and putting it into a 3d space right of doing something like this if you haven't done anything with 3d inside of webflow uh this is it so here we go i'm going to create a another page and here we go so i'm going to set the stage i want to put a card in the very middle of the screen so to do that i'm going to my add elements panel dragging in a section and giving this section a height of 100 vh vh meaning port height right and let's give this section a background i'm gonna use background image that i've already uploaded hover that to cover and there we go so cover means it takes up the whole space right and now let's add an overlay on top of it a dark overlay because we want to put more focus on the card rather than this background image so i'm going to press plus again on the backgrounds and i'm going to choose color overlay which is right here and that's it i can play around with the colors if i want i can play around with the opacity it's it's up to you but i'm gonna do something like that okay we're good last thing i want to do is make sure that whatever i put inside of this section it'll be in the center vertically and horizontally so i'm going to set this to flex then anything inside of it will be vertically center and horizontally sent that's it now let's go ahead and bring our card in so i'm going to go to my assets panel drag in pikachu i do it right and oh look at that cool lazy load is right here when i dragging the image sweet so it's already lazy loading nice and let's go ahead and close these mini settings and let's give this a name of pika p cool right so our state well actually i need to round out the corners because this image has these corners right here i need to round it out so let's go here and border radius which is right here and drag that slider and play around so yeah right about there all right so now it's a card sweet i choose you all right so now that we have pika p all set up and we have our section set you need to turn on 3d all right so here we go turn on 3d take the parent element so this is the child of section 7 section seven is the parent of pikapi right so i'm gonna select the parent and then scroll all the way down to the bottom right and you have 2d and 3d transform i'm going to click the kebab menu and i'm gonna set the children perspective to 2000 that's it 3d is enabled no we're not done if you're thinking no not done we've just enabled 3d so now we got to tell the webflow interactions to spin this card around in a 3d space right so this is when we start to talk about x y and z okay so let's add an interaction to this we're going to go to our interactions panel right here the lightning bolt press plus and now we got a bunch of element triggers the one we're going to focus on right now is mouse move over element this tracks the position of the mouse tracks where the mouse is in the x-axis and on the y-axis all right anyways action i've clicked i think i went too fast press plus mouse move over element select an action and we're going to play mouse enemy huh pikachu is a mouse and so i'm going to press plus and now we have these timelines i'm going to name this the p you name it whatever you want but here we go now if you see we have two types of actions we have mouse x and mouse y so with mousex webflow is asking what happens when the mouse is all the way to the left versus all the way to the right so x starts on the very left zero percent goes to the very right a hundred percent right so i'm going to target pika p so i'm going to click on pkp and now i'm going to press plus sign and i'm going to rotate it go the webflow gives us already the zero percent and 100 and webflow's asking all right what do you want it to do how do you want to rotate it and this is when you get all the way down to the bottom right and you get these options x y and z okay so kind of weird because you're saying what does the mouse when the mouse is on the x-axis moving on the x-axis you want to rotate it we need to rotate it on the y so let me explain okay so this is okay piece of paper here we go so when you're rotating things in 3d space if you notice this icon right here says x so x is i should hold on i'm doing it hold on there you go okay so if you see here x is horizontal y is vertical okay so if i'm moving something on the x-axis it's gonna imagine two things uh two sets of fingers holding a paper and when you're rotating on the x you're rotating it on the x if you hold the paper at the edges of the y and you rotate it you're rotating it on the y like that so mr paper we're going to rotate on the y because when our mouse is moving left and right we want to rotate it left and right okay so when the mouse is all the way to the left let's move it negative 50 degrees on the y-axis and on a hundred percent we do the opposite we do fifth positive 50 degree the y and now we do the same thing when the mouse is moving up and down rotate and this time on the x-axis we want to look up we'll just use simple numbers 50 and looking down negative 50. congratulations you've created something that's 3d that makes sense any questions with this all we're doing is just flipping a paper that's it and you can take these same basics for things like as you're scrolling down or scrolling into view mouse hover mouse click any type of interaction you know so let's let's do one more um trigger let's let's do one more example of a mouse mouse click okay so i'm going to select pika p going to use mouse click as my element trigger start animation i'm going to call it pikaclick set an action to rotate and we'll just rotate this like that okay and we can also play around with the z the z is just like sending it okay and then done actually let's add ease then we can do a second click as a toggle to reset it so i'm going to plus the reset and just set all the rotations back to zero zero zero zero and done click click there you go 3d makes sense yeah so fast simple tutorial on making things 3d um up to you all if you want to see me make a cube in 3d cubes are 3d if you want to see me make a 3d cube inside of webflow um i'm waiting for that answer question okay um let's see aks is asking how can i export the webflow code to next.js or dot js and i use webflow code to take it to um yeah thank you pablo for answering aks's question but yeah you export webflow code it's just basic html css and javascript and you can put that into your own environment you can edit the code you can do whatever you want the code is yours you earned it you made it that's all yours and you can mess around add anything you want to it but you can't re-import that back into webflow okay yeah 3d cube that's redundant it's like saying atm machine question for the nav challenge i was not able to figure out why the nav is not scrolling in mobile okay we'll look into that later eli uh ripple effect how do you activate 3d child elements it has yeah i'll get back into that let's ripple effect what i did to activate 3d mode so you would go to the parent element which i called it i let webflow name it section seven go down to the effects click on the kebab and set children perspective to 2000. right okay making a cube do it i'm going to click on my body element command e brings up the quick finder tool pretty cool i'm going to type in sec which gives a section press return and now we have a new section down below easier than clicking on add element panel and then dragging it in so it's just a faster way um now let's go ahead and do the same thing we want to make sure that this has a 100 vh height also has a background on overlay we can set that up manually and do all that steps that i've done or just copy over the same styles as this one so what we can do is click in here in the selector and type in section seven press return and now there we go i have the same exact styles for both sections because they're using the same class name so little pro tips little quick um tips to help you out when you're building your sites so let's go let's make a cube this one is going to take a little bit longer and i may mess up but that's how we do things here okay so in here let's go ahead and command e type in div we have a div block and i'm going to i'm going to call this uh 3d cube 3dq wrapper okay so this is going to hold all the sides of our 3d cube okay this is the actual box that holds the box and let's give this a width of 350 350 so width and height both 350 because you need sides done and let's give it a position of relative so position relative i am telling this box that hey you're going to have some child elements that are looking for you so you're going to be the relative of all of these child divs and all of these child divs are going to have a position of absolute it happens these children who are set to position absolute are looking for its relative of this box going to be its relative that's probably not the exact definition of relative but that's the way i like to think about it all right now that we've set that up let's go ahead and command e div and let's go ahead and call this the 3d cube side okay so 3d cube side is position absolute and it's full and that's it okay so this is the first side this is the front side and because this is the front side i'm going to give it a combo class of front go and [Music] let's give this a background color blue sweet so the front side right so now i'm going to click on my front side command c command v and now we have another front side but i'm going to delete front side actually no i'm going to duplicate the front side call it the left side okay now i'm going to change the color of this something a little bit darker and then i'm going to rotate this and so here's the trick um okay so if you're father's day gift so if you open a book the binding on this side right so when i when i open it open it goes like this bound to the side so that's what i want to do i want to make a hinge or bind this side when i'm bind this side so that way when i rotate it on the y-axis it's starting from here so how to do that is to go down here to the 2d 3d transforms open up that kebab menu and this origin right here oh sorry no this origin right here we're going to bind it on that side or we add the hinge to that side and then we press plus again and rotate so when we rotate on the y look take a look in a book 3d rainbow all right cool so i'm going to set this to 90 and there we go let's do the same thing copy and paste a little bit faster duplicate call it right side and all we have to do is click on this kabob and put the hinge or the binding on the other side and we need to flip this to negative 90. make sound effects when you're developing always fun and let's keep going copy paste call it the top side and we'll change the binding to be at the top and we're not going to rotate it on the 90 on the on the y-axis we're going to rotate it on the x and so hurry who's the garage door gonna go negative 90. negative 90. boom right there let's get the bottom side copy paste duplicate bottom side hinge it to the bottom there we go and change this to positive 90 so ring i know i can just type in the number but making sound effects is much more fun all right so copy paste last side duplicate class back side and so this one we're putting transform origin in the center and we're not rotating on the x but we're rotating on the z so this one oh wait wait we're not rotating at all sorry we are actually moving it on the z so we're pushing it back and i can't see it um yeah i did something wrong probably i don't know it is 350. that i think i did it let's change the color of that just make it okay cool we should leave this a little bit brighter all right cool if i did it right and i start rotating the q 3d cube wrapper then cool we have all learned if i did it wrong which i suspect i did something wrong then we'll all learn together on how to fix it right here we go oh and i didn't explain z so z is just near and far that's all what z is so that's what makes things 3d so 2d is like taking a piece of paper and putting it on flat on a table and you can only move it up down left right that's x and y that's the 2d space like a video game 2d side scroller it only goes up down left right like super mario but super mario 3d is where you can go up down left right and near far right so that's what the z was all about all right let's rotate this okay rotate do it ah every ever cool and let's take these same things let's take this same thought as we did with the pikachu and just move this with the mouse so i'm going to go to section 7 click on element trigger mouse move over element and 3d cube cube cube all right and i'm going to uh effect the 3dq wrapper nope not move uh rotate and i'm going to rotate it so nine no not 90. so if negative 50 well we'll go negative 50 this one will be positive 50 and this one will rotate negative 50 positive 50 this one will be negative 50 and we're done there it is there it is cool i'm going to clip that and and make it its own video later on but yeah very short tutorial today basics of 3d take these basics of x y and z and play around with interactions so this week you want to challenge yourself do this or build upon it make a a car that flips and spins like you're you're throwing a card or something like a magician or i don't know you're you you click and it lets someone roll the dice like oh what if you added circles to each side of this cube and on click it's like rolling a dice or rolling a die or if you go even crazier put two dies and you gotta get a dice a spare dice die i don't um yeah so that would be cool how how does it look in mobile um so there is no hover effects inside of mobile obviously uh but you can tap and webflow will translate that to x and y position of the mouse it will rotate the uh the cube but only up to that one point where your mouse is so you have to tap tap tap everywhere to make that animation happen but the cube will look good in mobile because all it is is just a bunch of divs oh question pablo you look for any other questions um here so charlie uh hey nelson was wondering if you know how to add multiple different whatsapp accounts to webflow using the cms and basically create a cms called brands each brand would have their own number and they need to change it and they need to change dynamically hmm [Music] um hmm hold on so this is where the webflow logic flows whenever it comes out it would be so easy to answer this question but right in webflow user accounts all of it built in however if you needed to build that today you need to use webflow member stack zapier so webflow to build the the site the front-end design and the collections member stack so people can register for the account register on your site to make an account but also you can add a custom field when they're signing up and you can name that custom field whatsapp they can put in their number and then um then you need zapier to send that information from member stack over to the webflow collection with that members um with that members member stack id and also cms id so it's it's complicated there is a way to do it but it's complicated and it's not something i can show right away um during this stream because there's just so many things you need to set up um but it is possible yeah so sorry that's not the answer you're probably looking for but that's that's where we are in the state of note no code right now okay there's a lot of lego bricks that you got to figure out how to put together and glue it together well you never want to use craggle on lego but how to piece them all together and make that data go from one place to another and if the user goes in and updates it you'd have a zap for that that sends it to member stack but also sends it to the webflow collection yeah yeah but great question great question i will be once i'm done building and launching the pixelgeek community website by the way if you want to join pixelgeek.community sign up for the email list and yeah coming out soon if you want to join is uh but after it's launched uh i'm going to start making videos on how i made it and man is it crazy there's so many things i had to do and learn and pull from my 15 or 18 plus a year knowledge of doing things and i'm like is i don't know this is crazy um here uh here this ah this is crazy so it's happening i'm working on it and i will make many tutorials on how i got this done but yeah elchin uh waiting for your uh challenge project yeah if you can send that in eli back on his nav challenge i wasn't able to figure out why the nav is not scrolling in mobile view um okay i have to go back to it [Music] why isn't it opening i have not scrolling and mobile um let's go here okay uh not scrolling your nav is scrolling do i have to look on a real mobile device who is this nav dot challenge dash challenge have dash allen webflow checking on my phone it does scroll i'm not sure what you mean oh okay okay i get it so if your menu is like this right you know this yeah and i can't scroll okay cool yep i'll answer this let's go ahead and open and open your menu happen but why you did add this that's what i was gonna suggest um you did add the overflow scroll um actually it should be auto auto is so if uh so you don't get the horizontal scroll bar i want to use auto but why is this doing the things what um hmm i'm confused right now i'm confused about two things one why is the navbar showing up like this inside of webflow and um two why doesn't it have the green selector of open because obviously it's open i don't huh i'm so confused right now is it because this position relative instead of absolute oh there it is it's supposed to be absolute okay i'm guessing it's supposed to have a background color okay i'm just guessing all these things all right so this nav menu i would make this nav menu a hundred percent okay no 100 vh and all the elements within it auto there we go and then when this opens when this is shorter when this is shorter there we go so now we can scroll it yeah i would do that and i think you have another icon down there so yeah you have contact there so that would mean i don't understand yes real weird okay that works yeah when i open this it goes too far and so i need to add some padding just go crazy with it bottom padding there we go so adding bottom padding would help me see this so yeah hopefully that helps uh afra any information on the pixel geek community um yeah a lot of zaps happening um i have a lot of things to well a few things to still work on and i'm getting there when will we launch soon but um yeah if you join the email list i'll be sending more information about things that um will be inside of the community uh for example um a huge resource section of all tutorials um of all these tutorials in and we have tutorials obviously in english but there's some that are in spanish in hebrew and french and please if you have a tutorial that you want to submit submit it um what's the link have to find the link what did i call it pixel gate community um video submit yeah let me put that in the chat so yeah if you've done something may if you made a tutorial especially in a different language submit it and also if you have a buy me a coffee page or you don't right now set up one and then put that link into that submission form as well because you should be rewarded for the time you took to spread your knowledge for free so yeah do that so we'll have a tutorial section we'll have a showcase section obviously we'll have a chat board but uh one of the things that i want on the chat board to happen is and this is going to be a strict rule on the chat board if you're asking for help from the community you must record a video using loom or cloud app or something you must record a video of your screen you don't have to do a webcam but you need your screen and you need to do a voiceover at uh you asking or telling the people that telling the community what the issue is and what you you need help with because um answering customer support tickets and i'm trying to imagine what the problem is it's hard and then when someone replies with a loom video i'm like okay cool but then they're just using their mouse to dictate what they need help with and i'm like i don't know what's going on even though you're circling an element with your mouse cursor i still don't get it sometimes i do i'm like oh okay but we need voiceovers so that's going to be a requirement if your post or help doesn't have those uh two things then it gets immediately deleted if you're answering a question then you have to do the same thing record on loom and voiceover explaining the answer and yeah because this is a visual development tool so it answers and questions need to be uh told visually and lastly if you answer a question you're encouraged to post a link to your buy me a coffee page or patreon page so we can say thank you thank you for helping us out so that's coming soon and um uh i'm also i'm already working on a pixel geek awards uh program uh yeah so that's coming soon i'll have more details in a future email but we already got some cool things cooking for that so so many things i'm working on and that's why i can't answer all the questions but yes yes i want to help you all help you all grow together all right um bca how to fix its smoothness in animations uh okay if you're talking about the cube or pokemon card there is a feature so um for example if you see here if i click on one of the actions right here we have easing you can customize that and customize your easing using the easing editor or choose a preset ease from this list i'm going to set it to ease go this one i'm going to set the ease or i can click on this hold command and choose ease for both and another thing you can do is add smoothing right here if i play around with this now go much more smooth here we go hope that answers your question next one uh hd web design can you add a rear end to the card yes you can good question here and rear end to the card so what hg is asking is if i let's add that animation back on mouse move over element uh pikapi all right cool so we it does that but what if i want to see the back side of this card okay so i'm gonna go back to here and on the mouse x i'm gonna flip this completely right to 115 and on the other side i'm going to flip this to positive 150 yeah all right so now if i preview it i can go all the way and see the back side of it but the back side is just a flip it's just the exact flip of this what i can do with the pk pkp pikapi is go to the styles of this card scroll down and under effects setting and the back face that to hidden okay and then i'm going to set the background of this to be let's copy the color actually let's let's get that blue color all right cool so if i preview okay cool yeah if you preview the back face is hidden so now okay if i know how to do this i hope i can do this um oh i have to wrap this in another div all right here we go challenge accepted so i'm going to remove pikapi from there and set pikapi this wrapper go overflow hidden so i can round out the corners and the reason why is because i need to have a container a wrapper for the two sides and the two sides i'm going to glue together and so that way they can flip right it's just two divs that are back to back and i have to flip it right so pick a p that static relative so that way i can put in div and um let's go ahead and set this one to absolute that and this one we have to flip this 180. i have to imagine myself taking another card and flipping it backwards with my rotate 180. okay so now they're back to back and this also has a back face of hidden let's give this a background color of um that blue cool and there we go so i did this right of course i did it wrong of course i did maybe this needs to be relative hold on i'll figure it out okay nelson doesn't know what he's doing um i'll have to get back to you maybe after yeah it's visible rotate 180 because i i don't know there's a way to do it i gotta look into it um web flow 3d flip card what you do you google it um from 2018 um how did you do it okay so you have see see you have a container and then you have two sides a back side and a front side what am i doing is the backside supposed to be okay yeah yeah that's what i did static what wait used um and then you have yeah see that's right that's what i did uh okay okay and then yeah that's what i don't know here here's a link i don't know how to do the things um aks we will not have a discord channel it'll be a chat board um my thinking about uh chatboard versus slack or discord is that when you get into these real-time chat apps and it's not your highest priority you tend to not visit it for like a day or two and then when you come in the door and you see all these messages that you missed you're like yo i missed everything and this is how i feel i i feel like i have to scroll up and read everything just to get caught up and so to me a chat board like circle dot so um it's much more friendly because you walk in the door and you don't have to catch up you can just see the latest messages and it's like okay cool rather than you see all these threads and see all this real-time chat and you're like what what are we talking about now so that's why i've decided not to use discord or slack for this community did you change the animation to point to the wrapper it's the same yeah i did it's it's this same i'm probably not gonna figure it out in this stream right now it's it's the same yeah it's targeting pikapi which is holding div block three am i supposed to target the actual card instead of this pikapi should have a oh wait back face okay oh look it it kind of glitched okay okay wait i think i got it and so this one should have a back face of hidden and this one should have a back face of oh no i thought i got it maybe this should be visible i'll figure it out um response from ripple effect had a question before oh okay cool so john did a video on that sweet uh tj from page transition tutorial it works well on desktop and laptop computers but when it comes to ipad and mobile the transitions break when browsers back buttons rest 6. that's a good one good one so when you press the back button on ipad or mobile uh javascript page transitions won't work i will that's something to look into i never thought about that something to look into because there is a way for there has to be a way to detect if a user if a user's back button on a browser is clicked there has to be a way because if the browser is going backwards execute the javascript that does the page transition that's what did happen in my and that's what's happening in my head i'm not sure if that'll work yeah i don't have an answer for um okay harsh do you have any idea when webflow launch user login feature as third-party integration as available with webflow is costly for small clients i agree uh yeah um like i said in the beginning webflow working make it easy for everyone to add but making sure that all the data that you're uh putting behind that paywall or that membership wall is secure so gotta wait i i don't know when i i don't have any dates even though i work at webflow i i cannot say any dates and most of the time i don't have dates because um i'm married and that was a dumb but mainly because uh software development is hard if you say hey we're going to launch this feature on this date if we miss that date if the team misses that date then the community gets sad and then we get sad and so if that date is coming up really fast and we're rushing ourselves i feel like we wouldn't be doing anyone a service because then you know it would we i don't think the team wants to do any rush to work because there's a lot of research that goes into like whenever a new feature is about to come out there's a lot of ux testing to make sure that hey do you understand where to click rather than making the app super complicated no um so yeah no dates um hanfu can webflow achieve more advanced 3d interaction uh yeah if you have any examples of advanced 3d i'd like to know but basically what webflow 3d transitions animations and basically what it's doing it's webflow is just writing css 3d transforms it's writing that code for you and um let me show you so if i go like this to if i go like this it says preview so right here this is all the css code for this for this element if i add any 3dness to it it's writing that code for me okay so it wrote rotate x rotate y and writing the degrees okay so that's all it's doing right so advanced 3d i'm not sure what you mean if you're talking about like creating 3d characters like recreating transformers the movie inside of webflow now that's not going to happen you use cinema 4d or whatever um you talk to ilm you talk to um disney about that kind of stuff webflow can't do that so this is just taking 2d objects and making them 3d using okay questions yeah so um while waiting for more questions if you want to join in on the weekly challenge start building 3d this week build make a flip card and show nelson how to do it so yes teach me cause i obviously don't know how to do it yet but i will learn i will learn from you all um if you want to join the community pixel geek dot community coming out soon if you have oh and if you have any websites or projects that you've done recently and you want some feedback from me now is the time we have like 19 minutes left in the stream so now is the time uh show me what you've created okay and also you would like to coffee support the stream if you want all right pablo what is this pablo wha what is going on oh i like this counter what this is neat i i don't know what to say like you're using the um the background clipping but you're adding interaction looping interactions with some sort of graphic in the background and just moving it left and right and different eases timing and and and this is hap very well dude i wow that's cool i don't know what this is for but this is and this counter up here yeah show me more when this is done i didn't this must take him work okay that's cool that's cool keep going with this i want to know what this is for yes variable fonts it's so cool how it squishes and it gets thicker different uh font weights things are happening this is cool nice thanks for sending that in um hey guys i think youtube is blocking my link but okay yeah so spencer is it me or is this site ripping off webflow's design question scout.com um kind of so here's the thing about ripping off in the creative space everyone does it there is no such thing as an original idea no such thing if you want an original idea you have to go back to when we were cavemen um no don't restart windows what are you doing no news um you have to go back to when we are cavemen when we're drawing on wall and cliffs and not cliffs um just caves and whatnot um the only ever what makes an idea original is just taking a mashups a mashup of different ideas and putting them together put your own little spin on it and say this is what i did that's what a lot of people do and it's okay now as far as this goes i feel it's more of a um uh it's flattering you know that our marketing team and i'm gonna show this to our marketing team that our marketing team did something right that another team another marketing design team said you know what let's do something like that and they did and you know what it's all good it's all good no even the gradients too oof but um is this made in webflow survey says yes it is i can tell because at the top um look for data wf a wf domain or data wf page wf means web flow oh and it says it right there too so it's all good i like what they did let's see well i was waiting for the drop down i was waiting for the mega menu i was like did they do it well they didn't it's all good so yeah it's nice works if it works for them cool beans i mean how many websites have you seen take stripes angled home page the the angled hero row take that same design concept and slap it on their home page there is so many and it's all good all good because you know where the origin original is you know where the originator is so all good okay that's cool i like the lines this is clean oh look at that there we go all good yeah question scout well all right uh furzo oh last question i have a question is it possible to customize your cursor and make it animate if you hover an element yes there is i tried the tutorial and i failed and so i need to try again i haven't tried in a while um uh i forgot who who made the tutorial but webflow custom mouse cursor tutorial blog uh there it is who wrote this alex yes so there is a way here's a link this is what i tried to do and then i failed but you can try it and you can fail more than i and learn much more so go at it but this is the blog post like linkedin chat um yeah so it's possible to do something like this and you can actually clone the project from here so [Music] so it changes on a link oh pretty cool yes it is possible great question next one uh bca can you review my website yes i can of course go to it okay my first thought was what and why was that okay so that animation took longer than three seconds okay so i always say when someone's coming to your website you have six seconds three seconds to load up the page and then three other seconds to tell the user where am i what is it about and where do i get more information one one thousand two one thousand three one thousand four one thousand five one thousand five seconds i already feel like you know what i don't know if this is worth my time i'm just being very honest with you all right so um i don't think you need that preloader that preloader doesn't tell me anything it doesn't have a logo it doesn't tell the story of your business or your app or who you are it doesn't add anything if i were to ask you right now why oh connected from chat if i were to ask you why did you add that would you be able to explain it in less than three seconds so that's looking back youtube back in there we go um oh marine from texas is here welcome okay yeah so why did you add that um all right so now that i'm here though so say it just loaded like this so a question again where am i i don't know where i am most people put logos either in the top center or the top left most of the time it's top left it has the logo it probably has the name of the company something to tell a person where am i i don't know where i am i'm really confused to be honest i'm confused right now i see blog blog blog at the top but i don't know if i want to go any further what is it about uh easy blogger that provides you to different types of blog um i'm still confused maybe because of the grammar blogger that provides you to different yeah so if english is not your first language totally fine but it the the something got lost in translation may be used grammarly or something to help you with this copy um last second is where do i get more information so immediately you're telling someone email facebook instagram why should i email you with my personal email address why should i give up that information when i don't even know who you are or what you do why should i go to facebook why should i go to your instagram there is no explanation as to why so when someone comes to a website whether it be a business portfolio um whatever you're telling a story immediately you're giving a handshake to someone so i load up your site and it's like me stepping into your office doors okay so i'm like hey uh what's this about you have three seconds to tell me your story tell me help me feel invited into your office okay so if this were me it would be something like hi um this is uh you've stepped into easy blogger and you know what i wanna i wanna help you build your your blog site i wanna i wanna help you like what what are you helping me with and towards the end of the conversation which is at the very bottom of the page that's when you start to ask hey if you want to connect even more fill out this contact form and i'll email you or check out my facebook page for more information about me or you know what um go to my instagram so you know more about me so you gotta tell the story first before trying to tell someone to click on something so right now i'm lost i have no trust in this webpage all of that on just the hero reel i haven't even scrolled down yet right but let's keep scrolling so i scroll down business blog why should i even read these nine ways you can improve so yeah so this is advice so someone so you're trying to target someone who needs advice with their with their e-commerce website or sales so if you're giving advice you need to be more clear at the top motivation blog yeah so this is all just advice motivation helping people out um yeah so you need to be upfront at the top about all this right uh hey there okay so this is you uh my name is don't know if i can pronounce that name sorry software a sophomore studying computer science that is awesome keep going you're super young and you're already building a website that's good keep going uh this website can read different types of blog mention one more thing so hurry up and read this one don't tell someone to hurry up don't tell someone to hurry up and read uh because if someone's taking their time taking their time to go to your website you shouldn't force them into anything right um be careful with your copy and maybe some things are lost in translation maybe english isn't your first language fully understand but you need to be careful with the type of uh copy that you're writing onto your web page right also um don't capitalize every letter in a paragraph and don't center paragraphs don't don't center paragraphs like this um hey cruz.design my wife actually wrote a blog post about uh not doing that and i'll link it right here cool um yeah that's that keep working at it i know these tips or feedback might be harsh but it's all to help you all right it's it's not to push you down i want to help you i want to see you grow so bring bring your website next week to the stream i want to see it grow i want to see you get better so bring this to the stream okay i will see you next week athera you'll get the last question oh wait there's okay there's three questions left here we go i am redesigning my portfolio site soon good luck it is tough uh what are the best practices for redesigning in webflow without affecting my current site oh okay yeah um if you already have a lot of data inside of your current site duplicate your site okay don't touch your current site just duplicate your uh site and then work on that if you can start from a blank slate with no data then do that all right start a whole blank new page we'll start from a premium template a free template it's up to you when you're done contact the support team and we'll transfer your hosting site plan from your old site to your new one okay one day we'll have a one-click feature to do that on your own but for now you have to contact the support team to do that but yeah pablo was the navbar challenge just added the okay um as they say in the fight club movie everything is a copy of a copy that's true cool i caught up with all the questions if you made it this far in the stream thank you thank you thank you so so much it's been super fun um hold on like in i can do oh cool all right so yeah this is coming yeah i like that one cool all right so that's coming thank you all so so much for being here um it's my pleasure and honor to share my knowledge about everything web design i'm just a geek just like all of you thank you so much for spending time with me for these two hours i will see you next saturday at 10 a.m pacific time to 12 p.m uh yeah that was fun everyone who's in the live chat room still you're awesome if you're watching recording you're awesome as well don't forget to subscribe i mean if you already have you're awesome but that's about it anything else anything else no no all right well again pixelgeek.community i'll see you there as always make the web beautiful together yeah oh god that's loud [Music] there it goes bye everyone [Music] um [Music] hello [Music] is [Applause] [Music] which [Music] is [Music] just last week [Music] hello you

Channel: pixelgeek

Views: 1,622

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: WIB44WGLYQM

Length: 121min 11sec (7271 seconds)

Published: Sat Aug 22 2020