Skip to content

component

WebX Scroll Reveal

By Bode Chris

Details

Summary

Reveal text beautifully on scroll

Description

Bring long-form headlines, statements, and storytelling sections to life with a smooth, scroll-driven text reveal. Scroll Text Reveal progressively changes each word or character from a muted color to its active color as visitors move through the page. Choose the reveal direction, adjust the animation range and smoothing, and customize the typography directly inside Framer. You can also highlight a specific phrase with a background color. The highlight follows the natural flow of the text and wraps cleanly across multiple lines, making it useful for emphasizing important ideas, benefits, or calls to action. Features: • Word-by-word or character-by-character reveal • Forward and reverse reveal directions • Selectable phrase highlighting • Background highlights that wrap with the text • Custom active and inactive text colors • Adjustable highlight color, opacity, padding, and corner radius • Responsive typography with fluid sizing controls • Custom font, weight, alignment, and line height • Adjustable scroll range and animation smoothing • Reduced-motion support • Static Framer Canvas and export fallback • Offscreen animation pausing for better performance • Fully customizable in Framer • No code required Ideal for hero statements, editorial layouts, portfolio introductions, feature sections, manifestos, and any moment that deserves more emphasis.

Introduction

Reveal text beautifully on scroll

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300135959/89/99/119/139/15
  • All · #3034