Scroll Text Fade

What is Scroll Text Fade?

Scroll Text Fade is a scroll-driven component that cycles through a list of text sections as the user scrolls. The focused item stays centered in the viewport at full brightness while surrounding sections smoothly fade out, creating a clean editorial reading experience. Perfect for feature highlights, product walkthroughs, company values, and storytelling sections on landing pages.

Core Features

• Smooth scroll animation

• Active item stays centered in the viewport

• Optional per-item image upload — mix image and text-only sections freely

• Accent effects that animate in sync with scroll progress

• Fully responsive and resizable across all breakpoints

Controls inside Framer

Content

• Items — Add up to 12 sections, each with a title, subtitle, and optional image

• Alignment — Center or Left

• Accent — None, Underline Draw, or Glow Halo

Layout

• Gap — Spacing between items (20–80px)

• Scroll Speed — Scroll distance required to advance to the next item (100–500px)

Images

• Images — Show or Hide toggle

• Width — Image width when visible (120–600px)

• Radius — Corner radius for images (0–32px)

Style

• Colors — Title, Subtitle, and Accent color pickers

• Font — Native Framer font selector with weight

Best use cases

• Feature highlight sections on SaaS and product landing pages

• Company values or mission statements on About pages

• Step-by-step product or service walkthroughs

• Editorial storytelling and long-form content sections

Add polished scroll-driven text animation to any Framer site in seconds — just drop in the component, add your content, and publish.