Live! - Everything Webflow - Layouts, Interactions, Support - 12/01/2021

[Music] hello everyone john here with web dev for you here to help you build awesome websites without code in webflow yeah if you're new here i have been doing these live streams for the past couple of months from every monday through thursday from 12pm to 1pm and i've gone over things like building layouts and web flow working with different design systems uh creating animations and interactions and uh just discussing with the the chat and the community uh about anything related to webflow um so this is gonna be a quick live stream it's not gonna be the full hour um i do have an announce an announcement to make i'm gonna be stopping the live streams for the time being i'm a little bit um i wouldn't say overwhelmed but i have a lot of different things going on at the moment and i can't quite sustain the the live stream or continue it um also i'm running out of content to really cover um i feel like covering certain topics for over two months there's only so much i feel i can continue to go over and otherwise it just gets repetitive so so yeah i'll stay here for the first maybe 20 minutes or so but just wanted to announce that i'll still probably post videos on my youtube channel we'll see how that goes i do have to say i've been in web development for a while now so i have to reassess if i want to continue kind of uh with with all of this i'm still doing projects for clients but um yeah just have to reassess a little bit but it's been a lot of fun um you know chatting every day with everyone and uh you know going over different things in web flow i'll still be creating templates so if you're interested in templates you can check this out um appreciate it alan for sure um yeah you can check out my templates here um you know the interactions and layouts we've built can all be found here those will still be accessible so so yeah there's definitely a lot of content and i just feel like there's a lot of youtubers right now providing a lot of great web flow content and web flow in general their videos are great so if you need help with web flow you can just watch their videos webflow also has a great community you know the web flow forums uh you know timothy ricks does great videos finnsuite is doing i think more videos now uh but yeah i'll still be doing templates but as far as crete doing a live stream every uh monday through thursday i have to kind of let that go for the moment just uh for my own sanity a little bit and to make sure i have time for other other projects and things like that so um yeah the goal was to to do this for a while but uh yeah i see it's i can't quite do it every every day uh but yeah if you want to ask the question omkar i'll see if i can answer it otherwise i'll just sign off sign off early and um yeah but you can check out my website webflow you know check out webflow here and vital elements learn ui design these videos will be on my youtube channel um alan wrote so you've actually been posting so much content i found it hard to keep up i would have been happy with one stream every few weeks you were doing it several times a week yeah yeah i think i have that issue somebody else mentioned that before like they said you shouldn't maybe do so many but i don't know i have this thing where like i want to do something consistently in order to to stay on top of it but yeah i i was thinking of that like once a week but at this point i'm gonna just step back reassess and if i do decide to do once a week i'll i'll announce it on my youtube channel with like a a youtube post or something like that but for the time being i'm just gonna step back and reassess but i appreciate that alan i know it's a lot of content um mainly i wanted to get like a feel or a gauge for where everyone was at with web flow and i wanted to be like a kind of like a like a pillar or like a place where you could you know ask for help or or get webflow information but after working at webflow for two years and then doing the live stream like i left webflow because it was pretty intense you know doing customer support uh like seven hours a day and then i just kind of jumped right back into you know doing more webflow stuff and i just need to step back a bit yeah thanks alan i appreciate it uh so i'm carol i want to create a timeline on page it's like as we scroll line follows in zigzag manner um i haven't made that in the past i'm car um but that sounds like a lottie animation like um yeah like i'm actually doing something like that for a client basically you want to like create a lot of animation with trim paths and uh just as the page is scrolling just have the animation draw out so like in after effects you could draw a zigzag and then using the trim path feature uh draw out the zigzag then drop it into webflow and then animate it usually using the lottie feature in webflow um i guess i can cover that really quickly um for you omkar and uh yes it will just be a few minutes just to give you an idea of what i would do here it's gonna be pretty rough because i'm not gonna go through the whole process but you know let's say we do a 1000 or like a 20 no it would be more like 500 by 1000 let's try something like that and it might be thinner than this but we're going to try this let's do that one more time okay so here it is so i would just uh draw a path like a zigzag something like that it's not a great zigzag you'd obviously want to make it more symmetrical but just uh draw a zigzag then set the stroke here i'm going to set it to black all right so we have a zigzag there and i can just grab it and then i'll go to the shape contents will add a trim path and then we'll open the trim path and we'll just animate the end right so we'll just click on the end start it at zero go to one second maybe and animated 200 so we have that zigzag and then we can export it window extensions body moving oh i have a quick question how would you generally do go about implementing the rotating lines head on fun suite website yeah i think that's uh 3.js which finn sweet probably has some good experience with that i'm going to save it here just save data.json let me open up a webflow project and this is just really rough uh here but we'll try it out all right so let me drag and drop this file if i can find it oh i must have not rendered it okay render all right there it is okay so we've rendered it just go into webflow i'll drop this data.json file and then um yeah let me just add a section so [Music] you'd probably want to do something like it depends on your design but this is just a rough like way to do it i'm going to give this 500 vh in height set it to center center and i'm going to add a lottie animation replace lottie sequence with this line and here actually let me set this section to 100 vh or along 200 vh okay so we have the lottie so what i can say is for the section um we can add while scrolling in view i'll play scroll animation start an animation here i'll select the lottie animation at zero percent we'll do lottie and then a hundred percent we'll animate it to a hundred percent um so as you scroll and let's see why didn't that work oh yeah zero percent here [Music] and so you can see as i'm scrolling the line gets drawn and you'd have to work with the placement of the line but basically that's how i would do it and i could even here let me add another section and set this to here do 100 vh and then let me place the section at the top here alright so we scroll and it draws that line all right so hopefully that helped omkar um so alan wrote are you still planning to do web dev are you considering career change um i'll still be doing templates for web dev and i have a few clients i'm working for but yeah i am reassessing maybe career change in a way um i've been doing working in web design for like over seven years now with i had muse for you and then i tried web dev for you then i tried working at webflow and it's been an interesting journey as far as web development but um just just going to reconsider and reassess if if i still have a passion for it if it's still something that i like doing it started with muse you know like i was making widgets every week for muse and plugins and that was fun um but it was kind of a bummer when muse got discontinued and kind of threw a wrench in my whole um workflow in a way so i had to reassess everything and i think i just i didn't really fully reassess or or take into account like what my next move was i just jumped right into webflow and i think since then i've been trying to recreate something that i had before and it's not quite working like it was before so i know the videos have been fun and a lot of people appreciate the videos but um yeah i would need a more of a i don't know more a more strategic approach to how i do this you know i'm very i freestyle a lot of things and i just i go in and i just make videos and it's all it's all great it's all freestyled and i learn a lot and hopefully i provide a lot to the community um but but yeah yeah maybe motion graphics uh not quite sure um that's a possibility yeah uh but yeah i'll still be around i think i might make a video every once in a while we'll see how that goes yeah so so it's been fun uh i think i might just end the stream at this point hopefully that helped amkar you know just create a trip a line that draws in after effects drop it into webflow and you'd obviously have to work more with the layout and how the line comes in but that's the first step in creating a line animation or like a zigzag animation but yeah thanks everyone who's uh attended my live streams uh just stepping back if if uh i come up with any new projects or you know decide to do one video a week or something like that you'll be the first to know i'll post a nice little note on my youtube channel and uh and yeah that's it for today's live stream definitely keep checking back webdev for you there should be new templates every once in a while and i'll be making uh probably template videos for the templates as well so thanks alan thanks omkar uh appreciate it thanks purple style uh that has definitely been fun um and again anything changes i'll definitely post on my youtube channel but that's it signing off for now uh there won't be live streams moving forward and yeah we'll see what's next as far as web dev for you um but yeah i'll make videos and and keep you posted if anything changes or if i have any anything new that that comes out or that i kind of want to share uh but thanks everyone have a great week and uh catch you on the flippity flip or yeah all right thanks everyone see ya bye

Channel: WebDev For You

Views: 174

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design

Id: PVBjePV6dY0

Length: 14min 5sec (845 seconds)

Published: Mon Dec 06 2021