Full Page Website Scroll Animation for Dribbble

line that we'll be creating in today's video is going to be the one that you're looking in front of you so again this is something that we're going to be doing in this video it's really smooth really beautiful again you have a bunch of animations coming in from the left and the right um You have effects like these and then you have sections like these obviously you can I'm going to show you how to tweak every single section if you want and yeah you can just play around with it I feel like again Jitter is just going to allow you to do a lot of things that you previously thought were not possible Maybe hey guys someone actually asked me how to create a full page web full page someone actually asked me how to create a full page scrolling animation in Jitter and that's what exactly what I'm actually going to show to you here right now so in order to do that you need to have obviously a design so I have a design that's done by one of my designers which I think is done really beautifully so here's the simple landing page design I can go ahead and I can just export it to Jitter so I'm going to say Jitter I'm going to say okay create a new Jitter file it's the name is homepage Saad let's go ahead and wait for it to load okay so the file is now exported I'm gonna open it in Jitter so it should be open any second now so here's the file I think it looks pretty good I don't see any major issues with it so it's done okay the default size of the artboard in itself should actually be what the default size is that we actually want to show so it should be one zero eight zero which is the default MacBook size and actually even before that let me actually go ahead and group all of these things so this is going to be our page so what I did was I gripped everything in a page which we're actually going to scroll as we move through this animation and then we're going to basically change the screen to 1080. okay now that we have that done we're going to start animating simple things so I have this header I'm actually just gonna animate this nav bar quite easily and quickly for some reason sometimes Jitter just doesn't display the previews that's no problem to worry about like I actually know what I want to animate so I just wanted to slide in from the the top down so that's done this particular thing or maybe these both things should actually animate from the left to the right something like this and these two things should actually animate from from the right to the left or from yeah from the right to the left and this one uh this scroll down icon should actually maybe grow in so there you go we have this animation the first section done I mean to be honest like it's amazing how quickly all of this gets done and we actually also want to animate the image maybe so let's go ahead and just fade in this image at the start so now that I fade faded in this image I actually just want to move everything so I want to move select all of them and move everything slightly right beside this fade in effect so now that's done I think this looks good also let's just go ahead and increase our duration to 50 seconds obviously we I'm not sure if this is going to take 50 seconds but it may like this is a large page so the animation may be large so once we are here once this animation is done we can now animate to the next section we can say I want to animate this page I'm going to go to custom I'm going to go to move the X move is going to be zero the Y move is going to be zero eight zero because that's the size of our sections so as you can see and this is something that you have to do when you're designing it because even when you're designing certain things and you're designing it for a specific device you need to make sure that it's sort of uh 100 V Edge or it's taking 100 vertical height of your browser screen so 1080 this is one zero eight zero as well this is one zero eight zero as well on the right and that's what we're going to do so now we have this section on this mobile on this particular device we're going to say we want to animate it and we want it to grow in maybe so this is going to grow in this stuff both of these things perhaps are going to animate from the right to the left something like this and this particular section along with these lines that are here which may not be as visible should actually maybe slide in from the bottom up maybe yeah from the bottom up okay that's done so let's see if this looks good actually this line isn't animating so the line isn't animating so in order to actually animate this line with it we should actually just go ahead and group both these things so I'm going to select both of them and I'm going to group them so now it's grouped and now we can say that it should slide in from the bottom up so now we have the line animating as well that's done uh it all looks good okay actually let me just see I think there's a huge gap here so we obviously don't want that huge of a gap now it looks good so once we are here we're just gonna go ahead and move the page again up that's something that we're going to keep on doing custom move zero and then one minus one zero eight zero I'm just going to copy this because I feel like we're going to use this again and again okay so here we have this particular section I feel like this section should slightly I feel like this line got messed up and let me see if the line is messed up here as well yes it's actually messed up in the design as well I'm gonna fix that here and then I'm also going to just manually fix that here as well so here is the line which I surprisingly can't select let's see the line should be somewhere here let me see okay unfortunately the line is placed somewhere here so I'm just gonna move it slightly on top and then I'm gonna also move it here okay so there you go the line is here I'm just gonna slightly move it here okay that's done now for this particular section we obviously just want the image to fade in from maybe the right something like this and then maybe the lines themselves should actually also fade as well so here we have both of the lines and I'm gonna say these should just fade in let's see so we have this these both lines fade in and then we are also going to fade both of all of these particular points one by one so I'm gonna say this is gonna Maybe uh move and scale in so move and scale in then this one is going to move and scale in then this one is going to move and scale in and then this one is going to move and scale in obviously you can animate all of these things together it doesn't really matter it's just personal preference so this works this work actually for some reason the two wasn't included in this animation so I'm just going to delete this animation and I'm going to do it again so here we have this huge frame we're gonna say move and scale in so this should work now this everything should work move and scale in and then move and scale in move and scale in okay that's done again we're gonna go ahead and animate the page new animation custom move 0 minus one zero eight zero here we have the images coming in actually in this particular instance I maybe want to move to show all of the images here so this particular image section is also close to one zero eight zero so what we're going to say is in this particular instance we don't want to move actually you want to move it a bit more so maybe something like this I'm going to move it here and then maybe we can do some animation with the images so here we have multiple images this animation this particular image can actually just to simplify this animation because we want to don't want to make it too long we're just going to say we want to do a uh what do we actually want to do here um shrink in yeah I think this looks good so here we go we have this particular section I think that looks good then after this particular section we want to go ahead and move the page again obviously custom move zero one zero eight zero actually I wanna I don't want any animation on that particular part I'm just going to animate it here so this particular section what do I actually want to do I want to have these things come in from the left to the right I just honestly really like the slide animation which is why I keep on doing it this thing should actually be grouped and this is going to come from the bottom up uh bottom up this particular thing is going to come from the actually it's going to appear since this is a text it can actually appear this doesn't look good it should appear in a slightly different manner like something like uh this this looks much better and then this particular animation this particular device should maybe twist in yeah twisting is fine as well okay so that's done and now we are gonna go ahead and move the page again and one thing that we can do really fancy here is I'm just gonna go to the page again new animation custom move zero and then again minus one zero eight zero slightly just gonna reduce it so we can actually we don't see the edges that much and one thing that we can actually do is when this particular thing is animating we can also do something fancy here for the actual device here we can say that we want to animate it and we are going to do a custom animation we're going to do a rotate so what is this rotation actually as and then we're also going to do a move so in this rotation we actually want to go ahead and move it to minus 90 degrees let's see how that looks so something like this okay that that looks good I think so if you actually see the animation here this actually it should just lightly move not really that much so I'm gonna go here again and I'm going to say it should be -45 Maybe yep I think this looks good then we have this particular section coming in uh we're just gonna go ahead and animate these things again pretty simple straightforward stuff this background blur I'm not even sure if we need it I'm just going to remove it this thing is going to appear since this is a text it's going to mask in and then this is also going to mask in so I'm going to say that this should slide in like this this particular text should come after this particular animation new animation it should slide in from the left okay there you go okay that's done now going to the page again new animation custom move zero one zero eight zero and there we have the footer I mean that's done I don't think we necessarily need to animate every single thing I'm not sure if we actually want to animate the footer since we don't we're just gonna go ahead and reduce the scrolling effect there you go just do something like this maybe actually let me just zoom in to make it perfect yep there you go so here the animation is done I'm gonna make it for 27 seconds so once you're done with that that's done now someone actually asked me how to actually go ahead and upload it directly on dribble as well so the first thing that I'm going to do is I can actually just go ahead and Export a video so I can export a video file based on the size that it actually is which is 1x size so I'm going to say I want to export it 1X and it's going to take some time to actually export this video so we're gonna wait for this to export now one thing uh for the video that I just want to point out is you can export you can actually directly attach Vimeo videos uh to your behance profile but you actually need to have I think a paid account to make it work correctly I know there are certain workarounds and stuff but I don't want to do them one thing is that it's actually exporting in 60 FPS we don't want it to export in 60 FPS I feel like that's going to be a bit too much and it's going to be a huge size so I think 30 FPS is probably going to be something that we should be comfortable with so let's just wait for it to export so now we have this video exported I also want to show how this looks on 30 FPS which I think it actually looks pretty good I mean 60 FPS again as I said it's going to be a bit too much but you can also go ahead and like make sure this animation is like really smooth and really fast and do all of those tweaks tweaks yourself so once you you're done you can just click on the download button here that's going to download the video for you here it is and I can also show it to you here as well so here is the video I think it looks good really fancy and now in order to export it you're just gonna go to dribble you're going to click on the export the upload button and you're just gonna basically drag this file here once you have done that it's going to say hey your file needs to be under 20 MB that's an issue right it needs to be under 20 MB so we're gonna go MP4 Minify we're gonna go here we're gonna just choose any MP4 Minify that we find I feel like pretty much everything works so select file uh there you have the downloads there you go I'm going to upload the video file and it's going to take a few seconds just a bit shy of uh 20 MB which isn't really something that I was expecting but now as you can see this is minified well never mind it actually looks pretty close so now you're done this particular thing has been exported you're gonna go here you're gonna paste it here and there you go you have this particular animation directly for your dribble design that's pretty much it that's how you go ahead and Export the file as well directly for your dribble design I'll see you guys later take care bye

Channel: AM Design

Views: 74,489

Keywords: animation, design, figma, jitter, scroll animation, ui, ux

Id: lWhzHtUwuZs

Length: 14min 9sec (849 seconds)

Published: Tue May 16 2023