Text Scroll Animate
Text Scroll Animate is a Framer component that animates your text word‑by‑word with elegant color, fade‑up, and blur effects—no custom code required.
Make it with Workshop
Build your own component with AI
About this Component
Bring your copy to life with scroll‑driven, word‑by‑word motion. Text Scroll Animate is a component that turns any headline or paragraph into a cinematic reading experience, using smooth Color, Fade Up, and Blur effects that react to scroll. Designed for modern hero sections, storytelling pages, and case studies, it gives you fine‑grained control over how each word enters, highlights, and exits—without writing a single line of code.
Features
Three premium animation modes: Color highlight, Fade Up entrance, and Blur‑to‑focus/blur‑away, all tuned to feel polished in real landing pages and editorial layouts.
Word‑level scroll control: Each word animates independently with adjustable scroll start/end percentages, word stagger, reversible behavior, and (for Blur) a dedicated blur‑strength slider.
Inline emphasis with simple syntax: Add italics and bold directly in the text property using lightweight asterisk syntax, so individual words stand out without extra layers or manual spans.
Typography‑first design: Works with any Framer font, fully respects size, weight, line height and alignment.
Canvas‑friendly behavior: Optimized to stay readable on the Framer canvas while still using true scroll‑based animation in preview and on your published site.
Drop‑in ready workflow: Drag the component in, paste your copy, pick an animation style, tweak a few sliders, and you’ve got expressive, scroll‑driven text in minutes.
