And let's make all these the same as above. We'll click to create the next scroll animation. Let's say we want it to stop right about, let's scroll just a little bit more right there.
So we have this animation set up, we have to go down the page and do this wherever we want it to stop. I think that one will look good for what we're doing. The other variable that you have here is to choose the easing of the animation.Īnd I can't remember what I did the first time I did this, but I think I'm going to just do, I'm gonna do cubic Ease in out. So I'm also gonna say this is just gonna be two seconds. And then this is the amount of time you want the, the animation to actually take from going from the hero to the next section. So we want it to stay up in the hero for let's say two seconds. This one is the delay before it does that animation. We'll set a scroll animation by clicking this icon and you'll see it's, it's basically just saying move down this page 1,175 pixels.Īnd then we have these two other variables we can change. And so we're already starting in the hero here and we want it to go down to, let's just say this is the first stop on our, on our list. We are going to create our first scroll animation. And the first thing I'm, gosh, I, I gotta keep saying for gotta quit saying first thing I'm gonna do, but, here's what I'm gonna do next. That usually works for just the places that I am going to post. So, okay, first thing I like to do is, is kind of set my screen size, like what do I want this recording to be?Īnd I know for me, I like a lot of mine to be around 1500 by 1000. I'm not sure why, but I have a workaround and it's a process that works good for me. A lot of times if you have web flow animations, if you export from this Chrome extension, which I'll show you, a lot of times these scrolls come out really jagged. You can change if you want, what type of file you want it to export as I choose H 2 64, which is an MP four.Īnd um, I will say there's a fault when you export this. If you go over to the settings, you can see that you can change your window size here. There are a couple nuances to all of this.Īnd I'll just say that this tool in itself will actually export a video. Um, we're gonna click on this scroll capture Chrome extension I was just talking about, and it's gonna bring up this tiny little ui.Īnd really the only things that we're gonna use here are this scroll capture animation, which is this icon. This is probably the third thing we're gonna do now, but you know what I mean. So the first thing we're gonna do is I said first we're gonna do like three times.
So, okay, the first thing we wanna do here is we want to basically set up our scrolls, these smooth scrolls that we keep talking about. So we do that for just, just different sections and that's just something we did in Went flow. You know, when this scrolls into view, we just have things fading up here. Um, we already had some scroll animations already done, so when this scrolls into view, let me reload those animations. And the first thing that we want to do is just bring up our website and one thing to call out about this website that we build over at Unfold. In addition to that, the other tool tools that I'll be using are, I am using the Loom Desktop app and I'm gonna be using After Effects and if After Effects scares you, uh, I promise don't be scared I'm in, I'm definitely not an expert and even I can do it. And this is gonna help us scroll down a page really smoothly. And as you'll see in this screen recording, there's no scroll bar and that just, that just, um, makes it visually look better in my opinion.Īnd the second, uh, this is what's gonna kind of bring it all home, is the scroll capture plugin.
So to start, I'll just say the two things that I, that I'm gonna use to make this all work are when you use hide scroll bars, just a Chrome extension. The first is getting the screen recording, and the second is, you know, getting it on a map and adding this drop shadow rounding the corners to make it as presentable as possible, uh, forever. So this will be broken down in two parts.
So the goal is just to take a live website and turn it into something that is very presentable for maybe places like Twitter or Dribble and kind of get to something that is like this. Um, the goal of this is to kind of go from, you know, if you have a static website that's already built, um, and people are screen recording and showing off their work afterwards and we're just using our mouse to scroll down and we can't get that, you know, perfect spot to stop in and we can't move our mouth as smooth as maybe a program to get down to that section. This is a response to just a recent tweet where some people showed some interest. Hey, what's up everyone? Uh, today I just wanted to show you, um, how I kind of get a smooth scroll from a live website.
0 kommentar(er)
