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.
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
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
Gap — Spacing between items (20–80px)
Scroll Speed — Scroll distance required to advance to the next item (100–500px)
Images — Show or Hide toggle
Width — Image width when visible (120–600px)
Radius — Corner radius for images (0–32px)
Colors — Title, Subtitle, and Accent color pickers
Font — Native Framer font selector with weight
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.
Aidan Looker
