---
title: "Scroll Outline — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aidan Looker · Text. What is Scroll Outline?"
canonical: "https://framer.elliotli.dev/component/scroll-outline"
---

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

# Scroll Outline

Scroll-driven premium outline navigation

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

![Scroll Outline preview image 1](https://framer.elliotli.dev/og/component/scroll-outline/e35d5fa1aa058780/1600x1200.jpg)

## Summary

What is Scroll Outline?

## Description

## What is Scroll Outline?

Scroll Outline transforms standard menus into immersive, scroll-driven experiences. As users scroll, transparent outlined text smoothly fills with solid color while associated images elegantly crossfade in the background. It is highly customizable, fully responsive, and canvas-ready.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Outlined-to-filled text wipe animations synced to active states.
    
-   Smooth image crossfading with subtle scale and vignette effects.
    
-   Smart scroll, keyboard, and drag interactions with configurable thresholds.
    
-   Optional auto-rotate functionality for hands-free navigation.
    
-   Five built-in premium color themes plus full custom color support.
    

## Controls inside Framer

### Items & Content

-   Title, image, and link inputs (up to 15 items)
    

### Appearance & Typography

-   Theme presets (Obsidian, Midnight, Arctic, Ember, Custom)
    
-   Custom colors (Background, Text Fill, Outline)
    
-   Font family and size
    
-   Outline width and item spacing
    

### Image Layout

-   Position (Left, Right, Hidden)
    
-   Responsive width and height controls
    

### Animation & Interactions

-   Fill animation mode (Wipe Up, Instant, Fade)
    
-   Animation speed presets
    
-   Adjustable scroll distance sensitivity
    
-   Auto-rotate toggle and interval
    

## Best use cases

-   Premium design or photography portfolios
    
-   High-end brand landing pages and showcases
    
-   Editorial or magazine-style article indexes
    
-   Immersive product feature tours
    

Bring a state-of-the-art, award-winning feel to your next Framer project in seconds.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #9591

## Details

- **Author**: Aidan Looker
- **Price**: $9.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-13
- **Added**: 2026-05-27
- **Categories**: Text

## More like this

-   [Gradient Wave Text](/component/gradient-wave-text) — Syauqizaidan Khairan Khalaf · $5 — Bands of color sweep through text
-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Count Up In View](/component/count-up-in-view) — H SHIFT WORKS · Free — Numbers that count up in view
-   [BentoExpandGrid](/component/bentoexpandgrid) — Dulaj Design · $15 — About BentoExpandGrid brings a sophisticated, interactive layout system to your Framer projects.