Layout & Design

Creating a fixed footer reveal in Framer

Creating a fixed footer reveal in Framer

Creating a fixed footer reveal in Framer

Joseph

·

6:25

·

6.7K views

·

About this lesson

If you’ve ever scrolled to the bottom of a page and noticed a footer that feels like it’s revealed from behind the content, this tutorial breaks down exactly how that effect works in Framer.

We’ll walk through the layout structure, positioning, and scroll behavior needed to create a fixed footer that stays hidden until the very end, without hacks or unnecessary complexity. A simple pattern that adds a lot of polish when used right.

Grab the remix on Framer Academy:

https://www.framer.com/academy/lessons/fixed-footer-reveal

https://www.youtube.com/watch?v=ohsEh5_pFH8&t=0s Intro

https://www.youtube.com/watch?v=ohsEh5_pFH8&t=16s The fixed footer concept

https://www.youtube.com/watch?v=ohsEh5_pFH8&t=60s Structuring the page content

https://www.youtube.com/watch?v=ohsEh5_pFH8&t=120s Positioning the footer behind content

https://www.youtube.com/watch?v=ohsEh5_pFH8&t=180s Controlling scroll and reveal behavior

https://www.youtube.com/watch?v=ohsEh5_pFH8&t=240s Adjusting the layout

https://www.youtube.com/watch?v=ohsEh5_pFH8&t=372s Wrap up

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00If you've ever scrolled down to the0:01bottom of a web page and discovered0:02[music] a footer that seems to be0:04revealed from behind the content of the0:06page, you may have wondered what would0:08be the easiest way to pull that off in0:10Framer. Today, I'll show you a method to0:12do it [music] in just a few steps. Let's0:15jump in.0:18Let's jump right into my example [music]0:20project here where I've got a simple0:22page. I've got some content here broken0:25into three sections. I've got this0:26header section. I've got these images0:29and then at the bottom I've got the0:32footer itself. Now for this I really0:35want this structurally to be broken into0:37two sections. Basically the footer by0:39itself and then everything else neatly0:42contained. So what I'm going to do is0:43with this header and the images section0:46selected. I'm just going to rightclick0:48and I'm going to choose to add a stack0:50which is going to wrap it in a new frame0:53with a stack layout. And then I'm going0:54to come over here and get rid of the gap0:56because it adds a default gap of 100:58pixels and I don't want that. And I'm1:01just going to rename this main. So I've1:03got my main stack of content on the1:07page. The desktop breakpoint itself is1:09also a stack. And that's going to allow1:11us to have the automatic height. So that1:13way as the page gets longer, the1:16breakpoint's going to make room. And if1:17the page gets shorter, the breakpoint is1:19going to stay snugged up to the content.1:22But now that we have this basic1:23structure, we can select the footer1:26itself. And the big thing here is1:28switching it from relative positioning1:30to fixed positioning. And fixed1:33positioning fixes the element to the1:36viewport. It fixes it to the browser1:39window. So we don't have a browser1:41window when we're editing our document1:43on the canvas. So we're going to have to1:45work with a preview on the canvas and1:47also preview mode to see what we're1:49really going to get here. Uh, but I1:51don't want this footer to be fixed to1:53the top. That would make sense for like1:54a navbar, but for the footer, we want it1:57fixed to the bottom of the browser. So,2:00I'm going to click into the field here2:01that represents how close we want the2:03footer to be to the bottom. I want it to2:05be 0 pixels from the bottom, the bottom2:08of the footer, flush with the bottom of2:10the viewport. And you'll notice on the2:12canvas, the footer just kind of2:14disappeared. So, I'm going to press2:15command 2 on my Mac to center it in2:18view. and it came up here, which might2:20seem a bit arbitrary, but if we look2:22below, it says viewport here. Again, we2:25don't have the viewport when we're2:27editing on the canvas. That's specific2:29to the browser window. So, here on the2:31canvas, we get this viewport preview,2:33and we can put it wherever we want. But2:36if we really want to see what this looks2:37like, we want to press command or2:39control P to go into preview mode. And2:41now you can see our footer is in fact2:44fixed to the bottom of the viewport, the2:46bottom of the browser window. but it's2:48on top. We don't want that. So, I'm2:51going to go back to the canvas here. And2:52again, with my footer selected, I'm2:54going to come down a little bit on the2:56properties panel to the styles section.2:58And you'll see that it has a zindex of3:01one. That z-index got applied3:03automatically when I switch this to3:05fixed positioning. But a z-index of one3:08puts it above everything else.3:10Everything defaults to zero. So one is3:13above zero, two is above one, three is3:16above that, etc., etc. What I really3:18want is the opposite. I want the footer3:20to be at zero, and I want everything3:22else to be above on layer 1. So I'm3:26going to switch this from one to zero.3:29You'll notice nothing happened on the3:30canvas. But now, if I select our main3:32section, I can come down to styles. And3:35you'll notice there's no z-index. I've3:36got to add a style for that. I'll add3:39z-index. And I'm going to set this to3:42one. So I've effectively reversed the3:44foreground background relationship3:46between the content and the footer. The3:48footer is now on top. And you could3:50already see a problem here. Uh we've got3:52some transparency between the foreground3:55and the background. So we can see the3:57footer through the cracks in between3:58these images. If I go into preview mode3:59here, you can see that the footer is4:02always just kind of lurking there in the4:04background, which is not what we want.4:05We want it to be obscured until it's4:07time for it to show up. So, with that4:09main section selected, I'm just going to4:11add a fill. A fill will do the trick.4:13So, I'll add a fill, and I will set that4:15fill to black, which was our original4:18background color there. Now, on to the4:20next issue. If I preview this again and4:23scroll down to the bottom, where we4:24expect our footer to peek out the4:26bottom, it doesn't peek out the bottom4:28cuz again, our desktop breakpoint is a4:30stack and it's fitting itself to the4:32content of the stack. Anything that's4:34set to an absolute position or a fixed4:37position isn't really considered part of4:40the stack. So, it's not making room for4:43our footer. A footer isn't really4:45content of the stack. So, what we need4:47to do is go back and add a little extra4:50space so that the footer has room to4:52poke out the bottom. So, with the footer4:54selected, one thing that I want to check4:56is how much space do we need? And the4:59answer is here under height. The height5:01of this footer is currently 345 pixels.5:04So mental note, we need an extra 3455:08pixels at the bottom of the desktop5:10breakpoint. So I'm going to select the5:11desktop breakpoint and I'm going to come5:13over here to padding and I don't want to5:16have padding all the way around. I just5:17want padding at the bottom. So I'm going5:19to click here to separate the sides. And5:21then I can come down here to bottom. And5:24that number, if I remember correctly,5:25was 345.5:27So, basically, I've just created an5:30extra 345 pixels of nothingness that5:34stick out the bottom. And that should5:35give us room for our footer to slide5:38into place, even though it's really this5:40blank space that's sliding over the5:43footer. So, I'll preview this again. And5:46as we scroll down, we're going to reach5:47the bottom of the content, but we're5:49going to have space for the footer5:51[music] to slide into view. And there5:54you have it. a clean way to create a5:56fixed footer that always [music] stays5:58tucked away until your content reveals6:00it with some nice layered depth. [music]6:03It adds a bit of polish to the very end6:04of a page, and it's flexible enough to6:06adapt to different layouts or [music]6:08footer designs as your site evolves.6:10That's it for this one. I'll see you in6:12[music] the next one.

Watch on YouTube ↗

‹ Free Domains with Framer: Go Build It

Building an Expanding Article Stack in Framer ›

More in this topic

8 Framer shortcuts you're probably sleeping on4:19
8 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Animating Vectors in Framer (Vectors Lesson 5)4:25
Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)6:58
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.