Scroll Text Fade

What is 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.

Scroll-driven text reveal with fade