---
title: "Smart Footer Banner — Free Framer component · Best of Framer"
description: "Free Framer component · by John Valentine · Sections. Smart Footer Banner is a premium footer component that adds an interactive, scroll-aware callout to your site."
canonical: "https://framer.elliotli.dev/component/smart-footer-banner"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Smart Footer Banner

# Smart Footer Banner

[View on Framer](https://framer.com/marketplace/components/smart-footer-banner/?via=elliot-li)

![Smart Footer Banner preview image 1](https://framer.elliotli.dev/og/component/smart-footer-banner/0c822a1e00ae7853/1600x1200.jpg)

## Summary

Smart Footer Banner is a premium footer component that adds an interactive, scroll-aware callout to your site.

## Description

**Smart Footer Banner** is a premium footer component that adds an interactive, scroll-aware callout to your site. Hidden by default, it smoothly **slides up when users scroll near the bottom** of the page, and retracts when they scroll away.

**Features & Capabilities:**

-   **Scroll detection:** Set a custom threshold (e.g., 70–90% scroll) for when the footer appears.
    
-   **Smooth animations:** Choose from slide, fade, or combined reveal styles with adjustable speed and easing.
    
-   **Flexible content:** Add text, links, or full CTAs (button + description).
    
-   **Styling controls:** Colors, typography, padding, border radius, shadows, and background options.
    
-   **Sticky mode:** Keep the footer visible after first reveal or auto-hide when scrolling back up.
    
-   **Responsive:** Works seamlessly across desktop, tablet, and mobile layouts.
    
-   **Accessibility:** Keyboard-navigable buttons, ARIA labels for screen readers.
    

**Use Cases:**

-   Newsletter signup prompts
    
-   Limited-time offers or sales messages
    
-   Cookie consent or policy reminders
    
-   “Back to top” or quick link callouts
    

**How to use:**

1.  Place the component at the bottom of your page.
    
2.  The footer is **hidden by default** and will **slide up when users scroll down** past the reveal threshold (80% by default).
    
3.  It will **hide again when scrolling up**.
    
4.  Adjust the “Reveal Threshold” property (e.g., 50–90%) to control when it appears.
    
5.  Works best in **Preview or Published mode** — make sure your page has enough content to scroll.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4585

## Details

- **Author**: John Valentine
- **Published**: 2025-10-08
- **Updated**: 2025-10-08
- **Added**: 2025-10-02
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes