---
title: "Logo on Scroll v1 — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Hasan Wali · Navigation. Scroll reveal into a live navbar"
canonical: "https://framer.elliotli.dev/component/logo-on-scroll-v1"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Logo on Scroll v1

# Logo on Scroll v1

Scroll reveal into a live navbar

[View on Framer](https://framer.com/marketplace/components/logo-on-scroll-v1/?via=elliot-li)

![Logo on Scroll v1 preview image 1](https://framer.elliotli.dev/og/component/logo-on-scroll-v1/c9f66dea74dbf687/1600x1200.jpg)

## Summary

Scroll reveal into a live navbar

## Description

**About this Component**

Logo on scroll creates a responsive scroll-driven transition where a large centered logo shrinks into a fully functional navigation bar while the surrounding panel expands to fill the viewport.

Use a text logo or upload your own image, choose between solid, image, or video backgrounds, and fine-tune the animation for desktop and mobile independently.

**Perfect For**

Creative portfolios, agencies, studios, editorial sites, landing pages, brand showcases, and websites that need a strong transition from hero content into navigation.

**Key Features**

-   Scroll-driven panel expansion
    
-   Logo-to-navbar transition
    
-   Image or text logo support
    
-   Solid, image, and video backgrounds
    
-   Up to 4 customizable navigation links
    
-   Optional persistent navbar
    
-   Independent mobile animation toggle
    
-   Mobile link Reveal / Always / Hide modes
    
-   Adjustable mobile logo positioning
    
-   Responsive desktop and mobile layouts
    
-   Custom typography and spacing
    
-   Scroll smoothing and animation distance controls
    
-   Canvas preview control
    
-   Static renderer support
    
-   Offscreen animation pausing
    
-   Organized property controls
    

**How It Works**

Place the component inside a sticky viewport-height frame within a taller scrolling section. As the page scrolls, the panel expands while the logo scales down and docks into the navbar. Choose **Scroll Away** to keep the navigation tied to the section, or **Stay Fixed** to keep the completed navbar visible throughout the rest of the page.

Mobile behavior can use the same reveal animation or skip directly to the completed navigation layout.

**Questions?**

Reach out at [**hasanwali6890@gmail.com**](mailto:hasanwali6890@gmail.com)

**Refund Policy**

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that cannot be reasonably resolved. Refunds are not provided for buyer's remorse, aesthetic preference, or post-purchase modification requests. Report confirmed technical failures with supporting evidence within **14 days of purchase**.

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

-   All · #7954

## Details

- **Author**: Hasan Wali
- **Price**: $9.00
- **Published**: 2026-09-07
- **Updated**: 2026-09-07
- **Added**: 2026-09-07
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation