# Creating a fixed footer reveal in Framer

Source: https://www.youtube.com/watch?v=ohsEh5_pFH8
Recap page: https://rapidrecap.app/video/ohsEh5_pFH8
Generated: 2026-02-04T18:06:01.069+00:00

---
## Quick Overview

The video demonstrates how to create a fixed footer reveal effect in Framer by setting the footer section's position type to Fixed, pinning it to the bottom of the viewport (0px from bottom), and assigning it a Z Index of 1, ensuring it stays above the main page content until the user scrolls past the main content area, which is contained within a stack set to fit its content.

**Key Points:**
- The technique involves setting the footer section's position type to "Fixed" and pinning it 0 pixels from the bottom of the viewport (01:31).
- The main content area (the 'Main' stack) must be set to 'Fit' height so it can push the fixed footer out of view when scrolling (01:10, 04:31).
- A Z Index of 1 is applied to the fixed footer to ensure it renders above the main content layer (03:01).
- The presenter starts with a page structure divided into Header, Images, Footer, and Content sections, all nested under a primary 'Main' stack (00:25, 01:06).
- The footer's initial height was 345 pixels, but it is set to be obscured by the content above it (05:03).
- The final result shows the fixed footer remaining visible at the bottom until the user scrolls far enough down, at which point the content layer slides up, revealing the footer (04:25, 05:54).

![Screenshot at 00:21: Demonstration within the Framer canvas showing the page structure layers panel, highlighting the 'Section - Footer' selected within the 'Desktop' view, while the main canvas displays the 'SHIPPED' hero section.](https://ss.rapidrecap.app/screens/ohsEh5_pFH8/00-00-21.jpg)

**Context:** Joseph Todaro, representing Education at Framer, provides a tutorial on implementing a specific UI pattern: a fixed footer that is revealed or slides into view only when the user scrolls down past the main content of the page. This effect is achieved using Framer's design tools, focusing primarily on positioning, stacking context, and Z-indexing properties for the footer element.

## Detailed Analysis

The tutorial explains how to achieve a fixed footer reveal effect in Framer, where the footer stays fixed at the bottom of the viewport until the main content scrolls up and passes underneath it, pushing the footer out of sight. The presenter begins with an example page structure consisting of a Header, Images section, Footer section, and Content section, all wrapped in a main stack. The crucial first step is selecting the 'Section - Footer' layer and changing its 'Position' Type from 'Relative' to 'Fixed', then setting its bottom offset to 0 pixels (01:31). Next, the presenter sets the Z Index of the footer to 1 to ensure it stays above the content layer (03:01). The main content container ('Main' stack) must have its height set to 'Fit' so that its content determines the scrollable area (04:31). When the presenter previews the page and scrolls, the content scrolls over the fixed footer until the footer is completely obscured by the content scrolling up from below, achieving the desired reveal effect by utilizing the fixed positioning context relative to the viewport rather than the document flow.

### Page Structure Setup

- Project broken into Header, Images, Footer, and Content sections
- Footer section is selected for modification
- Initial footer height is 345 pixels (00:25, 05:03)

### Fixing the Footer

- Footer position type switched from Relative to Fixed
- Bottom position set to 0 pixels to fix it to the viewport bottom (01:31, 01:58)

### Layer Stacking

- Footer Z Index set to 1 to ensure it overlays the main content stack (03:01, 03:42)

### Content Behavior

- The main 'Desktop' stack must be set to 'Fit' height so content pushes the scroll boundary correctly (04:31)

### Final Result Testing

- Preview mode confirms the fixed footer stays visible at the bottom until the main content scrolls up and obscures it entirely, demonstrating the reveal effect (04:21, 05:44)

![Screenshot at 00:00: The initial Framer project view showing the 'SHIPPED' header and a grid of image placeholders, illustrating the starting design.](https://ss.rapidrecap.app/screens/ohsEh5_pFH8/00-00-00.jpg)
![Screenshot at 00:24: The Layers panel is open, showing the hierarchical structure of the page sections: Header, Images, Grid, and Footer \(00:25\).](https://ss.rapidrecap.app/screens/ohsEh5_pFH8/00-00-24.jpg)
![Screenshot at 01:33: The Position panel in the right sidebar showing the 'Type' dropdown set to 'Fixed' for the selected footer element.](https://ss.rapidrecap.app/screens/ohsEh5_pFH8/00-01-33.jpg)
![Screenshot at 02:38: The shortcut overlay indicating Command+P \(Mac\) or Ctrl+P \(Windows\) to enter Preview mode.](https://ss.rapidrecap.app/screens/ohsEh5_pFH8/00-02-38.jpg)
![Screenshot at 03:38: The Styles panel showing the Z Index control for the selected element, where the value is being changed from 0 to 1.](https://ss.rapidrecap.app/screens/ohsEh5_pFH8/00-03-38.jpg)