TextReveal is a plug-and-play Framer component that animates your text either immediately on page load or when it enters the viewport. Drop it into any section, type your copy, and get refined, on-brand motion without touching timelines, keyframes, or Code Overrides.
Built on GSAP and SplitType, it splits your text into real visual lines or words and animates each one with precise timing — giving your pages the polish of a custom-coded site, with none of the setup.
Choose from three reveal styles to match your section's mood:
Clip Path Reveal — lines slide up behind a clip-path mask for bold, editorial headlines.
Mask Reveal — words rise word-by-word inside hidden overflow for elegant, paced storytelling.
Blur Reveal — words fade in from blurred to sharp for softer, atmospheric intros.
Toggle Play On Scroll to decide how the animation fires:
On — the reveal plays when the text enters the viewport. No parent classes, no selectors, no extra setup. Each instance triggers itself.
Off — the reveal plays immediately on mount. Perfect for hero text that's already visible above the fold.
Typography is handled through native Framer font controls, so your text styles exactly like any other text layer. A built-in ResizeObserver automatically re-splits lines when the viewport width changes — responsive behavior is handled for you.
Fine-tune the reveal with a Trigger Point slider (0–100%) to control exactly when the scroll animation fires, and a Stagger control for the rhythm between lines or words.
Two playback modes: on scroll or immediately on load
Three reveal styles: Clip Path Reveal, Mask Reveal, Blur Reveal
Self-triggering on scroll — no Code Overrides or parent setup needed
Fully responsive — lines auto re-split on resize
Native Framer font controls
Adjustable Trigger Point slider (0–100%)
Stagger control for sequential timing
Multiple instances run independently on the same page
