Create a distortion transition in a Webflow slider

[Music] [Music] so you [Music] [Music] now you [Music] [Music] [Applause] [Music] hi i never know how to say hi when i first go on stream i always have some weird thing i wonder if there's a super clip of all my highs because i'm always weird like that anyways hi welcome to another saturday we made it saturday the last saturday of may 2021 or in the human era 12 021 yeah uh yeah we humans have been here longer than 2000 years so yeah let's just add another 10 000 to it anyways um how you all doing i'm doing well feeling better got vaccinated last week and they say modernity takes two weeks to be like actually part of your system so it's like cool one more week one more week and yeah but i will still be after all this i'm like i'm gonna still wear my mask when it's like um super crowded at places maybe a costco or or something like that um definitely on the airplane from now on man like just thinking about all the things that our immune systems had to go through before the pandemic anyways how y'all doing um if you're in the live stream chat right now let me know say hi um what is this i jake you're damning me i vote for nelson to clean his glass you guys want to clean my okay i'm gonna clean my glasses hold on hold on because jake and pablo are telling me to clean my glasses so i'm gonna pause the stream and just have awkward silence while i go get a glass cleaner okay there you happy you happy jake you happy jake [Music] stopping the whole stream for you my friend i can see it's all good i needed to anyways thank you so much for being here uh who's in the live chat right now so yeah jake live stream producer pablo community manager of pixelgeek thank you guys so much for being here nancy's here j tell welcome i haven't seen your name before oh yeah i have jade i think dmitry's back am samuel welcome richard welcome yeah yeah i just want nelson to be able to see the screen a little bit better yeah i can see now susan price welcome yeah a lot of new names i'm glad um yeah if you're new to this stream this stream happens every saturday from 10 a.m to 12 p.m pacific time and i'm nelson i'm aka the pixel geek who just has been nerding out about web design since i was 13 but nerding out more about webflow since 2013 and everything i learned i want to share with you all and that's what i've been doing on this channel for years so thank you all so much for helping me get to over 12 000 subscribers we're getting close to 13 i appreciate you all everyone who clicked on that subscribe button appreciate you all um and this is just the beginning i have so many things i want to do but it's gonna have to wait it's gonna have to wait just a little just just wait but uh muhammad's here eunice is back yes um yes great eunice great talk on spaces yesterday oh yeah yeah that's just me speaking my mind and being the the you know the person the type of person who's like oh my god i said all those things what things shouldn't i have said should i have said more should i have said less and so um i was on um raymar's twitter space and he was asking me how do you start a community and i feel like i should have trimmed it down i got too high on my soapbox but basically if you want to start a community do it with your heart don't think about the numbers and treat everyone with so much respect and that you want to give them as much value as possible and that's what i do on these streams even if there's only one person watching i want to give that one person as much value as possible and now we have around 20 people watching right now and i'm like that's awesome but you know what it doesn't matter to me if it's one to 100 to a thousand any number as long as people are getting value and that's what i'm trying to do right now um these streams we usually do like a intro like i have morning announcements and then we get into the tutorial and the topic for this tutorial is creating a distortion hover effect it was submitted by someone from instagram andreas all right um i'm gonna try to do it no guarantees but yeah and um after the tutorial then you have time for q a for me to answer any questions you have about web design webflow or just life i guess i have 38 years experience in it so maybe i can help with it but um uh yeah yeah and if you have any sites that you want me to review like you've created a client site or you're working on a client site or you want me to review your own personal portfolio site this is the stream to do it i will give you my my honest feedback because that's my brand honesty and empathy all right uh yeah jake is putting up the link in his live chat right now so submit your site for review and i'll get to it at the end uh so yeah morning announcement so first thing i want to talk about is if you uh browse through the webflow facebook group it's one of those where you have to um get invited in well you you request to be invited and then you get approved not sure why they do that but yeah um so this one person showed off their website and i left a comment saying you sh you know you shouldn't michael bay a site you know you want to make sure that content is king like you need to tell a story and um that person wrote back and got really defensive and saying i'm not i'm not if i wanted to tell a story i'll be as be a screenwriter but websites are visual and so this is how i make my clients happy you know and i'm like whoa because the site had so many animations and and interactions that it didn't need it and there was there was no rhyme or reason for any of the animations and so i was like oh let me help this guy and no he didn't want any help and so it it's those two things that kind of get me like ugh about some people where you might obey something but you don't want to take criticism you don't want to take feedback and that's the thing that makes me like you're not perfect and you pretend that you are and if you scroll down i'm not going to link the site i'm not going to link the facebook message but if you find it well there you go um so you tell me what you think if you find it but uh it's one of those uh agency sites where it has like or portfolio sites that has like bar graphs saying like oh photoshop 100 skill 100 html css 100 and i'm like no one is 100 new code new tricks and tools new software features are being created every day no one is 100 why do you pretend that you are perfect and yeah so if you're not willing to take criticism web design is not the industry for you to be honest please leave please leave it all right that's so much ego that we don't need in this industry and there's a lot of it already but i mean yeah even after many many years in this industry i am not perfect and i'll never be but it's okay second thing i wanted to talk about was uh i get this question a little bit more often now that the no code community is growing and more people are getting into it um they're asking how do you get clients and my answer to that is i don't know but i kind of stumbled upon the answer in my own way which is i don't like to market i don't like to cold call i don't like to cold email i don't like to just go up to someone and say hey saw your website kind of sucks i can redesign it for you inside a web flow and it has all the and then i just uh so what i do is i share what i know and the way i do it is by helping people on twitter like someone has a question they're like how do you do this i'm like oh let me make a quick video for it someone on the webflow forums like how do you do this oh let me make a quick video for it and then naturally i was like okay i'm gonna make youtube videos because it'll be much easier more accessible and it's more seo friendly and so why don't i just do that and i didn't mean for this youtube channel to become my marketing channel but it is and so i'm freely giving out knowledge and when i do that people think i'm the professional when i'm just someone who's trying to learn and sharing what i learned and then there's uh most of my clients are like i've been using your uh youtube videos for so long but now we have this project that i think it's too much for me can you do it can i hire you to do it and i'm like okay and then there you go so that's how i've been finding clients i mean i don't know how to play the sales game i'm not a salesman but to me share what you know share what you've learned and people will trust you more because you're honest and when that honesty comes out it's easier to close that deal so yeah what the what do you guys think about that what do you uh how do you guys find clients yeah that's how i do it so yeah but while i'm waiting if anyone wants to chat it up um so two more things oh yeah if you want to if you want to help bring people into the community chat board you can become uh you can go ahead and go to pxlgk.com and when people sign up you will get some affiliate dollars and if you want to submit your future if you have an idea for a future live stream go ahead and submit that as well jake will go ahead and put that link in the live chat and we have so many ideas i think it's time to start voting so this week uh jake already made a prototype and i have yet to actually like go through it but i promise this week starting um ah starting next month we'll start doing uh a voting so that way the community you all can tell me what do you want to learn all right uh let's see here dimitri exactly as you said [Music] mm-hmm all right so let's get into the tour the let's get into the tutorial portion see here [Music] i'm gonna go to my screen let me double check that my screen's showing all right there we go okay cool so a gentleman by the name of andres from instagram should i put his instagram on the stream let's see here i'll put it i'll put on the stream [Music] uh sure okay whatever okay uh yeah so andres from canada toronto canada creative director at grobel yeah he asked can you do this inside of webflow uh he submitted this idea and at first i was like oh this is pretty cool let me try it and then now i'm thinking about it honestly an hour before the stream as i was going through this i was like maybe this wasn't a good idea i don't know if i'll be able to get through this because it seems more complicated than i think that i thought it's gonna be so yeah my first thought about these types of animations is cool but is it is it needed is it overkill like or is this just me trying to stay in the comfort zone and be like nah we just need more simpler interactions we don't need this distortion effect because honestly i haven't had many clients i haven't had any clients asking for crazy uh effects something crazier than you can do inside of webflow so let me know your thoughts on that uh richard saying who you know what you know for me met some cool people and clients and past jobs oh yeah going back to how to find clients yeah it's who you know um and that's the whole networking game that's the whole um yeah that's the whole networking game where you know if people know you then your marketing is word of mouth you know people are like oh hey uh richard's a cool guy you should talk to him if you need a website and that person trusts that one person and so it's the easier sale for for you you know so um yeah networking but also networking it's not just about hey i want to meet you because i want to get clients off of you i've seen marketing meetups and stuff like that that that that's all they do they just basically trade business cards hoping that they get a sale out of that one person no if you network because you want to meet someone and you want to care about that person um you know that makes more of a difference anyways um pablo is saying you desley has a free clonable to do this type of effect it looks pretty cool though it adds that wow factor you desley really resources i didn't know they have image effects oh this is easier than i thought live preview um this is harder than i thought it's not showing up to activate this script activate this widget you have to copy and paste the script and well yeah okay i don't understand how this works please explain um let's open in webflow i don't is it working on your end pablo i don't see the code where's the where does this go to this goes to oh do you have to pay no it's it's supposed to be free copy the script but you have to log in do i have an account i don't know if i have an account hold on logging in i think i have an account please wait okay i do okay resources image effects distortion so if i click free it goes nowhere but if i click plus then it goes somewhere upgrade you you said it was free oh it's right there huh these are the same distortion images that comes from this one co-drops thing and then clone the project just goes to here again i'm so confused right now i'm so confused where did you take me pablo i see nothing hold on is it broken oh there's brokens uh yeah all right well i was going to try it through the tutorial so this tutorial is not really tutorial if you look at it it says it says um to get started we need two main images and one displacement image to create the effect here's the example displacement image we're using okay cool this effect works in three and following three steps modifying the images with the displacement image a classic fade between the two images reverse the displacement cool and then we simply use this div to initiate effect it seems pretty simple and then that's it that's the that's the article so i'm like uh okay so here's a pro tip so i downloaded the i downloaded the source which has all the javascript and all the images and whatnot let me see if i still have it yeah so right here this is the downloaded file so this is the downloaded file and um i extracted it and so there's a bunch of hover i mean there's a bunch of javascript files and so what i did was i just did a file save as and saved all three of the javascript files as a text document and then did you know you can upload text documents into webflow even if it's code even if it's javascript files you can just save it as a txt and webflow will accept it now how do you bring that into your webflow project all you got to do is for example go to your code so i'm going to go to my code right here and then just do the same thing script um source equals hold on let me save it script source equals and whatever the let me copy the link so what you can do is copy the link and then put that in your script source and it'll work it'll work just fine work the same way so let me copy what's on the actual so yeah it's not working but i'm just going to view source and so what they're pulling in so yeah this is a technical a very technical stream but uh it's just one of those things you want to learn okay here we go so yeah it doesn't have to be dot js it can be dot txt it doesn't matter code is code so let me just copy these three [Music] and then paste it into my project there we go push it back so this one what's this this first one is oh geez okay this one's my three js okay so right here oops i'm supposed to copy the i'm supposed to copy the address so i'm going to copy three right there from my assets manager so i have the url to it and then just replace that one and then same thing with my images loaded and whatnot i don't know if this is gonna work but we can try and then the images right here so if you didn't know you can upload javascript files into a webflow there you go just make sure that it's a txt and then instead of js just put dot txt or i mean just copy and paste the url to the file and it'll work oh i named it txt taxi whatever it'll still work he says confidently and then he get and then he cries when he knows that it doesn't work so same thing here all right so i have all that now the other thing was this image is loaded or ah right here so what i can do is let me just go to the article and let me see if that'll if i just take this code if this works then wow nothing usually works on first try on this stream if you're expecting perfection from this stream please leave oh jtel you'll probably have to add type in the source really okay you're probably right how do you do that again isn't it just type javascript let me know if i'm doing it right so what jtel is saying is you have to actually call out is it like that i actually have to call out the type okay all right cool i feel like we're missing stuff like okay so we need to give the path the url to the image and then the displacement image ah text javascript thank you jtel see i'm not a coder so let's go ahead and find image one which i've already uploaded so we have image one copy that url put it into my code there you go okay so the first image i put it into my code second image copy put it into my code and then last one for the displacement image gonna find that put it into my code all right so i feel like the code is done now i got to figure out oh except for this my div yeah i'll just call it my div uh now i have to figure out how do i put it on the page yeah so um what is this what is you desley doing first second pattern okay so we have a handle wrapper and then the first what why are they all hidden i'm confused first second and then pattern are they overlaying on top of each other they are okay so i have to overlay on top of each other i think that's what i have to do let's let's try it i guess i'm so confused let me just put a section and we'll call it my div just like it says in the code i'll make this uh relative height 100 vh and we'll put in those three images image one [Music] um we'll call it first absolute and then we'll say the cover cool copy paste wait do we have to call it first or i'll just call it image for now maybe i'm doing it wrong i'm just exploring right now so i copy pasted because i want to put all three images i really feel like something's missing but i'm gonna press publish and just wait for something to break wait pablo you did this a long time ago i think that you desley example is not the same as the tutorial following oh okay this is pablo's why don't you do the tutorial pablo man okay me well this gives me some this makes me try to understand what's happening okay canvas what how did you huh huh i should have talked to you before doing this stream well let's see what happens nothing happens hooray wait is there any errors yeah six of them what no what why and this is what we do on these streams folks we fail is it because of this stuff you secure i don't oh yeah i have no idea what i'm doing now how did you how did you do that how did you honestly how did you do that the parent this is called my div am i supposed to do anything else my div thank you richard for the claps yay all you need is a div with the inner wrap i'll send you code oh so i'm close all you need is a div with the inner wrap i mean why is this why is this snow control i don't understand access to image jesus inner wrap okay pablo sent me some code okay i'll take your code and throw it on here and okay so the code that oh come on the code that pablo gave me i can't copy it over ah now i feel bad making everyone like suffer through this stream there we go so i'm not calling it inner wrap i'm going to call it my div but it just okay my div right there there's nothing on the page it's all just handled by code and i'm the code has has urls to pablo's images so if i refresh is it that easy it's that easy let's redo this and and like learn from what pablo showed us it's that easy okay okay so i think we should start the stream clip here from here um jake oh man i feel like now i can sell this to clients be like hey you want some more flair to your design to your hover effects here i got just the code for you and it was that easy oh my oh my thank you pablo it's like one of those things where you're like i found the power thanks to pablo ran into this recently links pointing to webflow assets are getting blocked what yeah i don't understand that i don't understand server stuff that's interesting because this right here is up oh thank you for subscribing who was that shiv thanks so um yeah if you look at the code it's uploads ssl i think uploads ssl that's when you upload a file through a webflow form using the file form uploader thing but when you upload into the assets manager it goes to assets dash webflow or something like that solve this issue by loading external assets from a private cdn yeah see having to go through that ah anyways uh so here we go how to make this work uh find this code beautiful code right here actually there's a plug-in that i have code mode so there's this beautiful code right here that pablo gave to us and you're pulling in 3js it's some javascript library that can do crazy things and then webgl and then you're also pulling in tween max i guess these three things is what makes that these animations happen but the more important thing to remember is this right here so when you name your element like the class name you got to remember to put it here so this one it's just my dash div you can name it whatever you want if you have any spaces in your class names replace those with dashes all right and i guess the intensity one intensity two i guess those are numbers that you can fiddle with to make it more intense i guess i haven't this is my first time using this code so i'm just trying to explain um math i actually got a d in it so i'm not going to try to explain pie to you so um i'm not really that good of a student uh but here this is important pulling in the image um so you need to get the url from your i guess you can't pull it from your assets manager because that's what mirko is saying but i guess like pulling an image from a outside server oh that sucks but yeah image one image two basically what's the first one and then when you hover what's the second image gonna be and then a displacement image and so that displacement image is just images that look like different weird patterns like this all right oh what this one says uploads it's like you think this one's going to work here let's change it [Music] code mode why is there a all right let me see here publish and oh wait and so after you put in the code you need to add your element where that funkiness is going to have that awesome animation is going to happen so i can just add an element we'll just say section and i'm going to give it a class name of my div and for my dash div i gave that a height of 100 vh and a position relative just in case and that's it so on webflow since it's a code thing that's going to happen you won't see it happen in preview you won't see it happen in webflow you need to publish it after you publish does it work yeah it works the hover works but i guess the displacement doesn't because of that cores issue [Music] access the image at oh it's telling me to change the your okay it's telling me to change the url to this all right okay let's try it again save publish and so if that works then oh it does so i just changed the displacement now it's triangles oh man now it makes me wonder this majestic pools this one website that my wife and i did for this client what if we can make it water make stuff water so at the beginning of the stream i said i don't know why people would need this you know is is it overkill and then here's me going oh what if i had water effects for for this hover all right all right i'm gonna try it though i'm gonna do it maybe it should do it no i'm not gonna do it behind my client's back no i can send them i'll probably send them video and be like hey you think it would be cool if we did this i'll just do it for free i mean it's like because they they make custom pools for very very rich people i mean look at that when i was going through these photos with my wife as she was building inside i was like are you kidding me like look at that you gotta like the things that you see at like legoland and then infinity pools like what okay i'm getting off topic but yeah so this would be a cool uh example to use that displacement stuff um on client site so don't listen to past nelson listen to current nelson and use this because it's easy and it might give you the extra wow factor that your clients will love you for so yeah that was short thank you pablo pablo for saving the day and also that whole course thing um i wonder is this i wonder if the the file name let me see here the file name is the same it's just that hold on let's let's see here if i paste so this is the random string that webflow gives each um each uploaded asset and then underscore and then the file name and this is actually the uh the webflow webflow site id this is a public id that you can see on any website so if you like view source inspect it's actually there we go data wf site it's this right here so yep so in the url so if you just change the url to assets dot webflow dash or website dashfiles.com then it'll work so that's a way to get around that whole course security thing i don't know what that's about but there you go so just change it to this url instead of this and you'll be fine so yeah that's how you do the displacement i thought this was gonna be one of those streams where i fail but thank you again to pablo for helping me and showing us that um i'll put the code in the youtube description but yeah that's it for the tutorial put the code put your urls and there you go that's pretty cool i guess we can go straight to questions it might be a short stream today but questions comments uh review your websites and thanks again to andreas for submitting that stream topic let me see here where's the links to review is there any oh there's three sweet okay and j-tail has two of them all right we're gonna since j-tel has two i'm gonna start with one of from richard we're gonna go richards first and again any questions you have a whole hour for questions richard's asking is the code mode a plug-in uh for all yeah um just google search webflow code mode chrome extension there you go code mode for webflow yeah all it does is just change the ui a bit so you can see so you get a bigger space for custom code yeah by kevin kevin's a cool guy oh i've got to also congratulate um congratulate jake so jake put your youtube channel in the live chat jake is talking about um automations on his youtube channel and he finally recorded his first video so congrats to jake for doing that it's hard to press record i remember the first time i pressed record for my youtube channel i was nervous as f and if you look at my first video it potato quality but my heart was there i wanted to tell people about this new thing called responsive design and why people should do responsive design and um yeah if you have a passion to learn and please turn that into a way for you to teach and press record just like jake so congrats jake i know i'm putting you on the spot right now but that's youtube life you'll always be on the spot the more you put uh content out but do it from your heart go ahead and link your channel congrats all right this is from richard here we go [Music] all right richard what do we got here subscribe to jake you have to say that a yep emphasis on a because the a is bigger so lavazza all right i don't know what lavazza is contemporary coffee shop solution for the workplace our machines and drinks can be placed throughout the oh coffee okay we request a demo for coffee machines i mean why would you need a demo you just oh okay wait a minute wait a minute i need a demo i need a demo sorry i'm looking at the product not the website but me but maybe that's a good testament of the ui getting out of the way and enticing the user because i'm already enticed by the copy because i was like why would you need to request a demo and i get here oh it's it's app enabled let's go oh it's a touch screen yeah this is i'm sorry i'm just okay number of players um one ah you need at least 10 employees to qualify for a free demo um maybe this copy should be under here or at least have a drop down and replace this with a drop down and it starts at 10 so that way someone isn't like oh i have like five employees i'm a little startup and then then later they see this or they don't even read that and they click submit and then they have to wait for someone to reply back to say sorry you have to have at least 10 people so instead of that ux just drop down with a number of 10 at first and probably put like 10 plus 20 plus 30 plus or something like that um in in a drop down uh richard this project was is my first full build still work in progress from a designer getting used to webflow has been great learning proof nice all right um let me get back to your homepage okay um nice and clean now to be honest i did not understand that this was coffee this this right here this this hero shot doesn't scream coffee to me it screams co-working space i don't see coffee but if if i s like look closer i there's coffee behind the content but i mean no one's gonna realize that like right here co-working space get down here oh it's coffee so i would change that hero row um this is clean loving it uh okay it's a slider nice good job dude these are this looks intense this looks like this needs to um this is so close to an apple product like imac or something um cool cool all right yeah simple i guess their logo is blue and i guess that stands out with other cop uh coffee coffee brands because blue doesn't scream coffee to me but there's nothing on you richard it's their own branding but okay oh it's okay it's a background name okay i thought it was a a lottie file that i was controlling no it's a background video lavazza is huge they are for a machine only for office like rework oh okay um but i mean like that hero like what if it was people at a co-working space enjoying coffee while the product i mean what if this image was a different image okay so first got it you got to change the image and also this hero image um make it take the whole width like i would bring it out more like no no margins on the side like don't don't put it in a container just you know throw it here yeah like you more grand and so imagine if like you had people on this side on the left enjoying the coffee and then like the in the background just a bit or something like that i don't know i'm it's just me i like it when the hero row image background image explains the copy and then the copy explains the background image and so they're working together but also shows off the product but uh yeah all right um thinking about it more think about it more does it have to be in boxes i guess i don't know i don't know i'm just fighting myself in my head like look how how awesome this section looks to me it looks awesome because you're not in a box it's it's a moving brochure right um but what if these right here these three sections they weren't inside boxes like just you know take the whole width and um it's not a in a in a box um you know i'm just saying like how do i explain this make it come outside of the box because like when you think of coffee you think okay i'm gonna enjoy my time i'm gonna take a break you know and i'm just gonna sip on this and just just take it all in and enjoy the flavor right but i know i guess you're saying lavazza is all about uh coffee for the workplace but it doesn't have to look super duper corporate that okay there it is it's looking corporate and i don't know where that balance is between okay we're selling to corporate offices but we're also about the people who work there and we want to make them feel good and you know keep them energized and and whatnot so for each section maybe it's like waves majestic and and this is what i always um tell my wife like each section when you're breaking sections it doesn't have to be a straight line do something different and so she's she's done that with majestic pools where it's just the svg image and it just makes it different you know um yeah all right one more page one more page yeah yeah take blow this up blow this up it doesn't have to be in a container this the hero section like front and center like show me show me the beans like i know it's a brochure but i feel like it it can be bigger like since like you have this product cut out from the background i mean you can make this background a repeating thing where it takes up the whole width yeah and then the copy could be inside of this you know hopefully you know what i mean but yeah um but again it's super clean and as web designers we can only educate a client so much to the point where they're like no we want it this way and then you're like okay fine and if the client is like that they're like no we need to keep it super duper clean oh well you know you tried your best and um if they're still making sales off of a super duper clean very boxy design hey more power to them you know you're just trying to push it further and that's all you can do as a designer as a developer you can only push so much and in the end it's not your site it's the clients and just let it go just let it go thank you for sharing richard all right moving on to [Music] oops i closed it moving on to [Music] jtel jtel has two sites what's this first one and again if you want me to review your site right now now's the time or if you have questions now's the time oh richie peacock welcome um it should be before you type your details um v welcome no you're not late just in time john's bones okay okay hold on hold on let's go whoa okay things are happening um hi john it feels medical because of the blue and the white now i'm going to read the in the the type the logo type is fun now i'm going to read this responsibly source human osteology osteology the study of the structure and function of the skeleton and bony structures ah okay the study of bones so you can buy bones from this from this website you can for the purpose of education and understand yeah that's really cool i did not know you can just straight up buy bones online this is a thing all right my first thought is this is super clean and it's very breathy and this is what i mean richard like like take things out of the box let things breathe uh this is nice this is clean um there's a tick tock about bones okay you know there's a link for tick tock but okay okay your hover effect that's cool i like it is it over the top uh to me a little bit but again maybe i'm just maybe i'm just too much into my comfort zone okay so i was so since you have a ux of a hover effect my thought was if i'm going to hover over any other buttons there's going to be a hover effect there's going to be animation and there's none not even a a a change of background color there's none so you have it here but not here so just before i be more consistent and again this is just my own personal preference you don't have to take it you can say nelson you don't know what you're doing which i don't and you tell me to move along so anyways this is really cool um i noticed that there was a animation that i missed as i scroll down so let me show it again dude that loading animation is that's whoa it's a different one every time wait huh okay so you have two of them that's cool that's cool okay and then the skull is moving up and down slowly cool nice very nice so you have a smooth scrolling effect happening you have the background blur on this nav bar that gives it a glass effect loving it loving it i love the animations you have here the underline that's cool like it your type is coming in every okay okay this is nice this is nice super clean super clean again out of the box just you know keeping it fresh i love it huh you changed up the ux or at least interaction so i'm guessing purchasing is doing one thing whereas reading more information is another okay huh this is clean all right i mean yeah i got nothing this is just nice all right let's see here what's your drop down menu look like okay all right this is cool uh human skulls shop by category whoa well yeah of course this yeah for education it's supposed to cost that much um should you hide the price on hover uh maybe maybe don't hide it just to make sure people know like hey how much was that again i have to hover off oh okay antique school demonstrative school okay how much how much money do we have everyone how much money which one we're gonna buy these are tabs tell me they're they're tabs nice it's so it's so clean the site is so clean okay which one are we buying everyone uh are we ballers or are are we like oh six thousand eight hundred okay that's a lot of products out of stock okay whoa there's a poof i wonder if filters like a jet boost filter would help with this but then again i don't know what the clientele is thinking all right we'll just add this one okay wow you can actually buy like there is no verification or something that i'm like accredited university or something like that or a medical professional like you can just buy this online gotta go guys champions league final all right see ya pablo thanks again for the help sell to us sell us your bones yours i was like confused oh like that copy like whoa well not yours specifically okay good whether you're an avid bone collector or you've just stumbled upon a family heirloom and are looking to give a new home huh interesting richard you want to sell your bone your skull well i mean not now maybe many many years later yeah this is really cool like i i enjoy this website i don't think i'll ever buy anything from here but it's a nice example of lots of data put in packed into a site but it doesn't feel overwhelming love it i love it um why is this have a ui here and these don't ah i guess i have to just dive in more but good job jtel all right one more one more from him all right here we go jtel where's chat there we go whoa whoa whoa whoa whoa whoa cool pre-loader see what happens when you have good assets from your clients like good photography good video um a fun logo i mean you it looks like you had fun with this one okay scrolling interaction for the type okay cool okay that's nice oh there you go richard see what i mean look at this this right here this oh this is nice this is nice i i i'm just enjoying scrolling down um it's a slider it is a slider you are wonderful jtel are you in the chat room right now yeah i don't i don't know what it is what else to say like everything again is is open there's a lot of content but it doesn't overwhelm you yeah parallax scrolling things are moving at different speeds this is a slideshow and you have this is this svg or jtel oh there you are yes jtel is one of the web flow gods learn from him not me this is nice okay custom light box okay um i'm noticing that when you open a light box you get the horizontal scroll bar at the bottom i'm wondering what overflow you're doing modal open overflow hidden okay but your scroll container no it's not the scroll container hold on is it scroll container con there's something hold on something is making it overflow you have an overflow auto that's happening that's making the that's making the horizontal scroll bar so if you want to get rid of that i would do not overflow auto or no you're doing overflow scroll you should do it to auto instead i think that's right but that's so far that's my only only feedback on that page yeah i'm all pages are are beautiful man thank you for sharing jtel i don't know what else to say besides that scrolling thing i mean it's it's beautiful uh yeah so if anyone else has any other questions or something to something to show off i mean it doesn't have to be as good as jtel stuff i know that my stuff isn't as good as his so yeah great job [Music] yeah i don't see any other questions it could be i guess we're doing a short stream today that's fine um yeah so if we're doing short stream uh next weekend june 5th create tab buttons with sliding underline effect what oh yeah how do we do this in webflow without code i want to try without code here's what i'm talking about so this was submitted also by andreas is this possible probably jtel's already figured this out i haven't but can you make a sliding indicator for webflow tabs uh i'm gonna say a definite maybe all right oh joseph with a question can you show me how to add previous to next buttons etc on the cms driven slider you did a demo before previous to next buttons on the cms driven slider oh yeah on my youtube channel um i've done slick slider yeah we did slick slider and all it is is just do i have that in my dashboard not all projects no um yeah netflix style gallery so using slick slider so like right here we have a collection list and then a bunch of items and then we have a slick arrow for next and previous so there you go so my next and previous right there that one and that one and um yeah oops so yeah that works yeah slick slider check it out um it was pretty fun to do yeah hope this helps can't talk today jorge greetings from long beach hello hey rock welcome so yeah anyone else learning anything new anything else any questions about the web design community industry anything you want to learn from my past over 20 years experience of being in this crazy industry i i started learning html before there was even a css and then all the way to here where it's just nutty everything it's just super nutty there's too many things to learn too many things to do but it keeps this keeps this industry alive and if you're not willing to learn anything new or get critiqued or being shown a better way then this is not the industry for you like move on so yeah jake if actually yeah jake if you can find the slick slider stream clip and put in the live chat for joseph i think that's it there's nothing else so again thank you to my team for helping me out with these streams thank you to everyone who's in this live chat i appreciate you all no matter you know if it's one person to many people you're all wonderful to me um let me start the music is that working no it's not where's the music [Music] no i don't know how to run the stream anymore whatever no music for the ending okay now it's working oh because the music was very low all right thank you all so so much for being here uh if there's no other questions oh there is okay pause the music pause the music am with a question is it possible to convert an already existing cms page into a customized dashboard possible to convert an already existing cms page um so yes but using member stack so member stack has a way to give each of your users who sign up for your site a a custom page but that's a member stack uh and so that is possible will webflow have this option available out of the box maybe we all know that webflow is working on their own membership uh function so you don't need any other third-party tools like member stack however will they have that option i don't know i don't know again everyone is just everyone in the webflow community is waiting very very anxiously on what is the new logic flow what is the new membership version or membership feature what are they going to be like and more importantly how much is it gonna cost is it gonna be one of those uh components that webflow adds in and you can just drag it in without any other extra cost but then again logic logic flows and memberships equals data and data isn't free and so like like i'm paying for zapier um and every time you run a task it costs money so yeah i'm interested in this obviously if i had the information i cannot give it to you but i'm just being honest i don't know what's happening because this is just like i am allowed to talk about what marketing has already talked about so i'm just wondering what's gonna happen so yeah that one question use member stack if you need now or wait to see what happens when webflow launches their own will it be possible for custom dashboards if so whoa but how much is it gonna cost because like nothing's free in this world except the slick slider yeah uh okay is there any other questions if not we'll call it a weekend for us in the united states it's a long one with memorial day uh so happy june everyone we are almost to the halfway point of this of this year if you haven't got vaccinated yet please do so um because you want to help everyone you know and you know it starts with yourself you can't you can't change people but you can change yourself and you can be that difference that you want to see in this world god that's so cliched but it's true right all right play that mute where's my music did i close it no there it goes there we go all right i will see you all next weekend we're going to do tab stuff and answer your questions as always so thank you all so so much i'll see you next week and saturday from 10 a.m to 12 p.m pacific time again i am nelson you can follow me on twitter at to the pixel geek if you haven't subscribed yet go ahead and do so now and hit that like button i have 18 likes on this stream and i appreciate you all thank you for hitting that like button it really means a lot to me um and if you want to join the web the pixel gate community pixelgeek.community i'll see you there that's where we chat in between uh streams and maybe we'll do more i'm trying to find time to do more in the community but if you have any ideas let me know and i'll try to make it happen appreciate you all and as always make the web beautiful together see ya [Music] [Music] [Music] [Music] you

Channel: pixelgeek

Views: 1,046

Keywords: webflow, web design tutorial, webflow tutorial, graphic design, web development, pixelgeek, pixel geek

Id: pvkRm3bdlZo

Length: 90min 5sec (5405 seconds)

Published: Sat May 29 2021