How to record smooth mouse scrolls on a live website to present your projects 🎉

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.

This is a response to just a recent tweet where some people showed some interest. So I decided to record a loo.

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.

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.

So this will be broken down in two parts. 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.

You wanna post your work. 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.

I'll link it below wherever I post this. 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.

And the second, uh, this is what's gonna kind of bring it all home, is the scroll capture plugin. And this is gonna help us scroll down a page really smoothly.

So there's still those two things. 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.

So I promise it'll be super, super easy. So, okay, let's get started. Let's close all this out. 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.

Um, we already had some scroll animations already done, so when this scrolls into view, let me reload those animations. You know, when this scrolls into view, we just have things fading up here.

So we do that for just, just different sections and that's just something we did in Went flow. 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 the first thing we're gonna do is I said first we're gonna do like three times. This is probably the third thing we're gonna do now, but you know what I mean, <laugh>.

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.

And really the only things that we're gonna use here are this scroll capture animation, which is this icon. There are a couple nuances to all of this.

And I'll just say that this tool in itself will actually export a video. If you go over to the settings, you can see that you can change your window size here.

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.

And um, I will say there's a fault when you export this. 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.

I'm not sure why, but I have a workaround and it's a process that works good for me. 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?

And I know for me, I like a lot of mine to be around 1500 by 1000. That usually works for just the places that I am going to post.

So I have 1500 by a thousand set up now. And I'm gonna go back to our timeline. And the first thing I'm, gosh, I, I gotta keep saying for gotta quit saying first thing I'm gonna do, but <laugh>, here's what I'm gonna do next.

We are going to create our first scroll animation. 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.

I think this looks, this looks okay. 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.

And then we have these two other variables we can change. This one is the delay before it does that animation.

So we want it to stay up in the hero for let's say 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 I'm also gonna say this is just gonna be two seconds. The other variable that you have here is to choose the easing of the animation.

And 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.

I think that one will look good for what we're doing. So we have this animation set up, we have to go down the page and do this wherever we want it to stop.

So let's go down to the next one. Let's say we want it to stop right about, let's scroll just a little bit more right there.

We'll click to create the next scroll animation. It's gonna go down to 2,254 pixels. And let's make all these the same as above.

So we got two seconds, two seconds cubic ease in out, and we're gonna go down and do this again. Let's say this is, let's say this is a good stopping point.

Another scroll animation, two seconds, two seconds, Cubic EAs in out. We'll do this, I think just two more times. I think that's a good stopping point right there.

Two seconds. I'm gonna sound really repetitive cause that's pretty much what this is. I wanna do our last one. Well actually, almost last one I'll show you why.

Two seconds, two seconds cubic. And if you notice when I was showing that, um, the Twitter video or the dribble video, a lot of times those platforms will just loop your video.

So we wanna take this all the way back up to the top, um, just so that this will constantly loop and look nice wherever you post it.

So we're at the top now. We'll add one more scroll animation to go from all the way to the bottom, all the way to the top, which is gonna be on the y axis zero pixels.

And because we're traveling such a long distance, let's say that we want, um, we want to, to go from all the way in the bottom to the top.

Let's make it longer than two seconds. Let's say maybe three seconds this time, just so it doesn't seem really fast.

We wanted to stay down in that footer for two seconds and we'll keep it at cubic ease in out. Okay, so just a couple things to call out real quick.

The first is that, um, this, this recorder will also record your, your mouse movements. So just as an example, we have, we have our very first animation Staying in the Hero for two seconds and then moving down to the next section over the period of two seconds.

So let's say you wanted to show off something cool in the hero. Let's say you wanted to show off this button, for example, you like that hover and that's something you wanna show people.

You could make this say four seconds and you would have time in the hero. The animation would stay here for four seconds.

You could do a few things, um, different hover animations maybe that you have, and then it would go down to the next section for this use case.

I actually don't want my mouse to show it all. So you can hide that in one of two ways. You obviously can just hide that, um, using your style panel in web flow.

Or for me when I press record on this, I'm just gonna move my mouse out of the, out of the frame.

So we have all of our animations set up. And let's just go ahead and see what this, what this looks like.

I'm gonna record this and I'm gonna show you a the fault that I was talking about with this, with this Chrome extension.

So we want to reload our animations down here. So let's reload the page. So they'll trigger, and let's open up scroll capture again and everything should be saved.

One thing is you might wanna just go through and check all of these settings that you have. Two, two cubic down all the way down just because I have seen sometimes in the past it, for whatever reason, we'll just update things and just like that, this last one did not save.

So we're gonna change that back to two seconds. And we wanted it to be three seconds to go all the way to the top.

And we have this at Cubic Ease in out. Okay, so now all these should be good. We are going to really quickly record this and I'm gonna show you why I don't use the builtin Chrome extension recorder that they do.

So here we go. I wish I had some background music for you guys right now because we're just watching my screen.

But this all looks super smooth on our end. Hopefully it's coming through in the screen recording like that too. Um, it looks really smooth, just me looking, looking here on my screen.

So we're gonna go all the way back up to the top. So this will loop and then it's gonna stop.

And so it's basically going to tell you, Hey, you can download this video we just created for you. So I'm gonna download that and I'll show you why I don't ever use these.

And it's because watch on the left hand side when the stuff scrolls in and it glitches, you see that glitch, they'll do it again on the right hand side too, and it'll do that for literally every section for whatever reason.

A lot of times with the web play animations, this scroll capture just can't, I don't know if it's not keeping up.

Um, maybe it's my computer, but for whatever reason my workaround is to, is basically okay, I would, I would reload this again.

I would bring up my, bring up my timeline, I'd make sure all these are correct and let's see if that everything looks correct again.

And then I would actually use something like Loom to record a portion of my screen. And right now I'm using Loom to record this video.

So I can't show you exactly how I do that, but I will say, um, I am just using the Loom desktop app right here.

And when you click this icon to open up the, the little UI for for Loom, it would look something like this.

And let me zoom in on that for you. And you would essentially just be choosing custom size and I also like to record in 4k, uh, or record my screen in 4K or whatever the highest possible is for the, for the screen there.

And then once you choose that selection, it would basically just pop up and you would choose exactly what you want to record.

And so for me, I would wanna record just from Edge to edge on this browser. And once I had that selected, I'd start the Loom recording and then I would basically just press the start, um, start recording the scroll animation so that it would force the page to go down nice and smooth.

We're recording that portion of our screen in Loom and we're gonna have that output afterwards. Again, you want to, if you don't want your cursor in the picture, hide it in web flow or move it out of, uh, out of frame so we don't have it in the final footage.

So once you would do that with Loom for example, then we would, then we would go over to, you know, loom.com and let me sign in.

I thought I was signed in. And then we would have, I, I actually already already did this just a second ago and we would just go ahead and download it.

This is my screen recording that we just, that I did right before this. So, okay, now we have that, Now we have that download.

I'll show you what that looks like real quick and everything should be super, super smooth. I'll go ahead and play it.

Let me get rid of this. I'll play that for you. Oh good. You, you'll be able to hear me too.

And obviously we'll have to get rid of that, um, little UI popping down. We'll do that in After Effects. It'll be really easy.

But this is coming through really smooth on my screen. None of the hiccups that we just talked about that are kind of fault of the Chrome extension, hopefully it's coming through smooth in the screen recording as well.

I just can't promise that cause I haven't seen it yet. <laugh>, then we're gonna go to the top and everything will loop and this will be over.

So cool. And we'll have to cut that out with the footage too cause that's still part of the screen recording.

Okay, so now we have that, I have that in my downloads right now and I am just gonna drag this to my desktop.

So have everything in one spot. And this will be kind of our source file to open up after effects. I'm gonna, let's see, where is after effects here.

Thought I had it open. Sorry, gimme one second. Honestly, when I am screen recording or even recording those scrolls, I I actually try to close a lot of things on my computer just so it's not, uh, bogging it down.

I want everything to come, come through as smooth as possible. So, okay, we have a brand new project here. I'm gonna do new composition from footage.

And so we just completed the first, the first portion of this that was getting the screen recording. This is the second portion we're in After Effects.

It's super easy. And um, the stuff that we're gonna take first is we're just gonna bring that video in. So from our desktop we have the Legion Health Scroll recording.

That's when I downloaded just from Loom when we recorded a portion of our screen. And I'm gonna move my bubble over here so it doesn't get in the way.

All right, so we have a huge kind of mat or I'm not sure exactly what people call on NA effects, but this is enormous here.

We need to change our composition, um, settings to be something that's a little bit, um, a little bit smaller that we can post in more places.

So we're gonna go down up to composition, we're gonna gonna go to composition settings, and you can see it's at almost 3000 pixels wide.

We don't need it to be that big. Um, I'm gonna change this composition name just to Legion Health. And I wanna do an aspect ratio of four by three just because, um, I know that's what Dribble wants to see.

It works on Twitter, it works on Instagram. So I'm gonna do four by three. And so first I'm just gonna say 400 by 300 to get that aspect ratio, we'll lock that aspect ratio and let's do something like maybe 1440 by 10 80.

That'll be what our composition will be set up. And we don't need to worry about anything else on this page.

We don't need to change the background color or anything right now. We'll just leave it. But one thing you'll notice is that our screen recording is way bigger than our composition, Matt here.

So we wanna scale that down. So we'll do is we'll come over here, we'll click the little dropdown arrow, we'll go to transform and let's scale this.

And let's say we're gonna scale to, I'm making this up, let's say 34%. That's too small. Let's scale this up to maybe 42%, maybe 41%.

Maybe 40%. Okay, I think 40% looks good. All right, we'll close that. So we have our footage on our screen where we want it.

Let's just click it and we'll go over to this panel on the right hand side, we'll click the line, make sure that it's centered up.

Everything should be centered already. The next thing we wanna do is let's try and get those rounded corners. You don't have to do this, but this is something that I personally like when I'm doing it.

So in order to do that, we're gonna need to create a mask for this footage. And it's super easy. So we'll right click here, we'll go to new, and we're gonna just create a new shape layer.

And up here we wanna, we want a long click and go to a rounded rectangle tool. And then we're just going to, we don't want that color, Not that the color is actually going to matter <laugh>, but, uh, let's just get a little different color.

The color is not gonna matter for this, but, uh, we're gonna draw a rounded rectangle pretty much. All right, let's center that up everywhere.

And now I'm gonna zoom in and just get these right on the edges. I'll zoom in maybe to a 400% and I'm gonna use my hand tool so I can move around.

I'm gonna grab my selection tool and then I can move these points and get this to the edge. So that looks good.

Let's go down to here. That looks pretty good. If you want to get even closer, you definitely should. I'm just trying to be kind of quick for this video.

All of this looks nice here. All right, I'm gonna zoom back out to 100% and we now have, we now have this rounded rectangle.

Let's change the, let's actually rename this. I'm gonna right click on this layer, the rectangle we just created. I'm gonna go to rename and I'm gonna call this, uh, mask rectangle just so we have everything.

I can't ro rectangle. I can't spell rectangle. All right, let's, let's say we want these rounded edges to be a little more round just for what we're trying to do, and I think I probably do.

So we'll go to the drop down here. We'll open up rectangle one and you'll wanna go to rectangle path and we'll go to roundness.

That's where we're gonna change. Let's change that maybe to 32. Uh, maybe 34. Yeah, I think 34 is fine. And the way that we're going to mask this to the footage is we're gonna use this track mat column.

And if you don't see this track mat column, just toggle, use this down here and you can toggle it on and off.

And we're gonna go down to the footage and choose Alpha Matt mask rectangle, and then it's going to mask off all those edges for you.

So that looks really good so far. The next thing we wanna do is let's get a background color in here.

I know that we set a composition setting on the composition settings. We had, um, a different color. So up here in composition settings, we have it set to like this grayish white that is actually gonna, that's just for our use right now.

Um, if we were to export this right now, it would export this as black. So we wanna put a background solid in there.

So we have a background color. So I'm gonna right click here, I'm gonna go to new background. Uh, I'm gonna go to new solid.

And this is just gonna create a, basically a solid for the entire background and fill up the entire composition. And we don't really need to do anything here except for, let's name it, um, let's just call it BG color.

And we need to choose a color for the solid. And I should have Figma open. I just had a couple colors ready to go for this.

And it may already be, where did I go? There we go. It may already be the last one I selected.

Yeah, it is. So, okay, we're just gonna click okay. It's gonna create a solid for the entire background except that it's on top of all these layers.

We want it at the very bottom. So now we have it in the back. And the last thing we wanna do, just to make this look right, is we want to create that drop shadow.

The way we're gonna do that is a new shape layer. So we're gonna right click, go to new, we're gonna go to shape layer and we already have the rounded rectangle tool selected from last time.

But if it's not there selected, just long click and you'll cl choose rounded rectangle. So we are going to draw another rectangle.

You do not need to be like super precise with this or anything. This is usually about how I would draw it and I'll just make sure that it's centered up.

The color of this does not matter. It's only gonna be the color of the drop shadow that matters. So we have that in there and we have this new layer.

And let's rename this right click. We're gonna go to rename and we're just gonna call this, uh, drop shadow. And the drop shadow, of course, we would want to be behind the footage, but in front of the background solid.

So we'll bring that down here in our, our layers panel. And the way that we would add a drop shadow to this is over here on the right side, you'll see effects and presets.

We'll click that, we'll search for drop shadow, and then we will take this and we will drag it onto this layer.

And now we have that and you'll have these different settings open up for the drop shadow. So first thing, we're gonna choose our color for the drop shadow.

I'm gonna go back to, uh, Figma. I'm gonna choose this color that I already have pre-selected and let's add that color in.

And I want the direction of the drop shadow to go straight down at 180 degrees distance. I'm just gonna play with this.

You'll have to play with what looks best for you. But let's say a hundred. And I think that let's, I think that will end up being good softness.

Let's say 200 that looks decent. Let's change the opacity on this and go maybe down to 35. Let me see how that looks.

Um, I think that looks pretty good. Let's send you changes, softness to two 20 and maybe the opacity to maybe just 30.

Let me see how that looks. Yeah, I think that looks pretty good. I'm actually gonna go up to like 32%, but no big deal, by the way.

Okay, so we have our drop shadow, we have everything in there. Now we need to come down to our timeline.

And if you remember from our screen recording, we had some kind of weird stuff in there where I'll just show you as an example.

I'm gonna scrub through. This is the timeline indicator. We are going to, you'll see up here, we have these still in our screen recordings and we need to get those out of there.

So the way we're gonna do that is we're gonna take our timeline indicator and we are just gonna drag that until we see in this preview up here that it is gone.

And that's when we're gonna start our recording. So it's gone right about here, and I'm gonna go down here to this little slider and it's gonna zoom me in.

Um, so I can see all these, all the different frames within this, within the footage. And I'm gonna, on my keyboard, I am going to press, I'm gonna press in.

Yeah, that's the shortcut. And it's going to essentially, I'm gonna zoom back out here. It's going to take this work area so that you can drag this all the way to where you want.

That's one way to do that. So you just drag this to where your time indicator is where you want this entire competition to actually start.

You can do it that way, or you can bring your time indicator on the timeline where you want it, and you can press in on the keyboard and it's gonna bring your work area all the way to that spot.

And I just, I told you guys bad information, so I'm going to command Z and undo that <laugh>. And instead of in, it's going to be B.

And that will bring the beginning of the footage to your time indicator. So we did that for the first one, and now we need to end the composition in the right spot as well.

So if you remember from our screen recording, we also have kind of, we also have some of, we also have this up here.

We want to get that out of there as well. So let's just zoom in and we'll scroll to the frame that we think it's going to be where that's gone.

All right, so that's gone there. And we, again, you can drag your, you can drag your work area to the time indicator or you can press in and it will bring that over there for you too.

So, all right, now that we have that, we have our work area defined. The easiest way to basically trim everything and just make the composition in between the work area is we're gonna go up to composition.

We're gonna trim composition to the work area we just defined. All right, so now I got rid of all of those gaps in the beginning of the end.

And let's just, let's just real quick, let's just look to make sure this starts where we want it. So we have it starting in the hero it's gonna go through and then we want this to end in the hero as well.

Okay, that looks good. So everything's ready actually to export. Now, um, again, I am not an expert in exporting stuff from After Effects.

This is the way I do it. If anybody has a better way, uh, or you think there's better settings, please just comment.

Let me know, uh, so I can learn and get better at this as well. So the way I do it is I go up to composition.

I am going to add to Adobe Media and Coder q, and this is going to take a second to open this up.

Typically just gimme one sec. So it will take a second to actually loaded media and coder once it opens as well.

Okay, so we have it here in median coder. I'm going to, I'm gonna change a couple things. First, I wanna change it as, let's call it Legion Health Final.

And I'm gonna, I'm gonna save this to the desktop instead. And then we want H 2 64, which is just an MP four, um, file.

And you can play around with, if you click into here, you can play around with different settings. Again, I'm not an expert here, I just know what has worked for me in the past.

Um, I'm just gonna export this one as is. If you need to change some of the settings, I'll call out some that you can.

For example, one, I don't ever export the audio. I don't know if that helps file size or not, but I know I don't need audio on it, so I never check it.

You could come down here and you could uncheck this, um, uncheck the, the size of the composition and you could change the width and the height.

And right now it's giving an estimated file size of 30 megabytes. If you go down, you can change these bit rates and the lower you go, the lower the file size it's going to be, I'm gonna leave it as is for this.

I will just call out that the main, the main reason I'm leaving it as is right now is because I know that these screen recordings, um, sometimes can be just cause we're trying to do a bunch of things at once.

I want this to come through as high quality as possible at the end when I show you the end result.

But if you're posting this to example, say dribble, I know they have a 20 megabyte limit, so you're not gonna be able to post it there with these settings right here.

You may need to lower the frame rate or you may have need to create a smaller composition or something like that.

So I'm gonna leave everything as is here. I'm gonna click okay. And I will just say this is one thing I played with.

I don't know if this is gonna be the right answer for everybody that's trying this out, but the renderer, sometimes if I use software only, I feel like it doesn't export as smooth.

So I just use their recommended, um, playback engine using GPU acceleration. So that's what I use. We are going to, we have all this ready.

Now we are going to finally render this out. We'll press go. And so this is probably going to take about a minute.

So you guys are just gonna have to sit here with me and bear with it because I, uh, this is my first memory really recording anything.

And if I go and try and pause this and say, Hey, I'll come back at the end, I'll probably mess it up and you guys will be gone.

We won't have the end of this video. So just hang all with me for <laugh> just one more minute. And I will say if, if I didn't explain something very well or if anybody has any questions or something's not working for 'em, whatever I post, just, just comment at me or DM me on Twitter, whatever.

And I would be more than happy to help. I mean, this is my first time I've ever put anything out there like this, so I'm sorry it's not super elegant or I may not have explained everything perfectly.

So let's go over to our desktops where we save this. Uh, is it actually done? Let me see. Yeah, thought it was done.

Let's see. Yeah. All right, let's see how this comes through for everybody. I hope that it looks smooth on your end.

I'll let you know if it looks smooth on my end. Uh, just cuz we are recording a screen that looks good to me.

That looks good to me. Looks good. All right, let's get back up to the top and then we'll know that everything would've looped.

Cool. Yeah, that looks really good. Um, so let's say you wanted to upload this to Twitter or something just to show that you how this would loop.

I'll go over to, I'll just go to Twitter real quick and we will tweet something out. I'll grab the final right here that we just did.

I'll upload it and I think it will loop here. Yeah, it should loop right here as well. So let's play this and I won't, I won't force you guys to watch the whole thing.

I'll scroll ahead. Let's just make sure that this is, this will loop for us. Yep. So we have a nice kinda, um, smooth scroll and perfect loop.

So that is how I kind of go from, you know, live websites to something that you can present wherever you show off your work.

Again, if anybody has any questions, please let me know and I will be happy to help you. Thanks.