Scroll Outline

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.

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.