About this ComponentTextScroll is a plug-and-play Framer component that animates your text colors as users scroll the page. Each character, word, or line transitions through a refined three-stage color flow — giving headlines and statements the polish of a custom-coded site, with none of the setup.
Built on GSAP ScrollTrigger and SplitType, it splits your text into visual units and tracks their animation against scroll position with smooth, frame-perfect timing.
The three-stage color flow is the heart of the component. Where typical scroll text components fade between two colors, TextScroll passes each unit through three distinct states — a resting Initial color, a brief Accent flash that lights up as the scroll passes through, and a settled Final color. The Accent Duration control lets you fine-tune that middle state from a punchy flash to a held, dramatic moment.
Choose how the text reveals to match your section's pacing:
- Character — each letter shifts through the color flow one by one for bold, dramatic statements.
- Word — words transition together for clean, readable body copy.
- Line — full lines fade through the color flow for cinematic paragraph reveals.
Toggle Pin Section to lock the text in place while the user scrolls. The section freezes while the color animation plays across the pinned scroll distance — perfect for hero statements and storytelling moments. Adjust Pin Start to control exactly where the section locks as it enters the viewport.
Typography is handled through native Framer font controls, so your text styles exactly like any other text layer. The component is optimized to only animate units that change per frame, keeping scroll smooth even on long paragraphs.
- Scroll-driven color reveal with smooth three-stage transitions
- Three reveal modes: Character, Word, Line
- Pin Section mode for cinematic scroll-locked reveals
- Adjustable Pin Start, Scroll Start, Scroll End, and Accent Duration
- Three-color flow: Initial → Accent → Final
- Native Framer font controls
- Optimized scroll performance — only animates changed units per frame
- Multiple instances run independently on the same page
