---
title: "Scroll Navigator — Framer component · Best of Framer"
description: "$5.00 · Framer component · by sherwin · Text. The Dynamic Scroll Navigator is a highly versatile, animation-driven UI component designed to guide users through long-form content."
canonical: "https://framer.elliotli.dev/component/scroll-navigator"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Scroll Navigator

# Scroll Navigator

Dynamic Scroll Navigator

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

![Scroll Navigator preview image 1](https://framer.elliotli.dev/og/component/scroll-navigator/bcbbc46f9a4feac2/1600x1200.jpg)

## Summary

The Dynamic Scroll Navigator is a highly versatile, animation-driven UI component designed to guide users through long-form content.

## Description

**The indicator now supports hyperlinks, transforming it from a simple scroll tracker into an interactive element.**

The **Dynamic Scroll Navigator** is a highly versatile, animation-driven UI component designed to guide users through long-form content. It serves as both a visual cue and an interactive tool.

**Key Features:**

-   **Four Adaptive Layouts:** Seamlessly switch between a rotating text ring, a clean vertical stack, a minimalist icon, or a stylized badge.
    
-   **Scroll-Aware Behavior:** Automatically hides or reveals the component based on a custom scroll-depth threshold to ensure a clutter-free experience.
    
-   **Interactive Motion:** Features fluid, physics-based entrance animations and customizable "hover-to-pause" behavior for the circular layout.
    
-   **Smooth Navigation:** Built-in anchor link support allows users to jump directly to specific section IDs with a smooth scroll effect.
    
-   **Visual Customization:** Full control over typography, icon selection (including custom SVG uploads), and component sizing to match your design system.
    

### Implementation Tips

-   **For Performance:** When using the "Hide on Scroll" feature, ensure your `hideAfterPx` value is calculated based on the height of your hero or landing section for the best user experience.
    

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

-   All · #6398

## Details

- **Author**: sherwin
- **Price**: $5.00
- **Published**: 2026-06-25
- **Updated**: 2026-10-03
- **Added**: 2026-06-25
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing