Creating a fixed footer reveal in Framer

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

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.