About Text Reveal Animated
Text Reveal Animated — Scroll & On-Load Text Animation for Framer
A scroll-triggered and on-load text reveal component for Framer. Animate headings, paragraphs, hero text, and CTAs with masked line reveals, per-word stagger, and per-character entrance effects — all without writing a single line of code.
Trigger Types
On Load / Appear — animation fires the moment the page renders
On Scroll / Layer in View — triggers when the element enters the viewport
Scroll start position — choose top, center, or bottom of viewport
Replay — resets and re-triggers every time the element scrolls back into view
Split Modes
Lines — classic masked line reveal with overflow hidden
Words — word-by-word stagger entrance
Characters — per-character animation, ideal for short headings and single words
Animation Properties
Opacity fade-in (0–1)
Y offset / slide up, slide down (px)
X offset / slide left, slide right (px)
Rotation entrance (±360°)
Scale entrance (0–2×)
Motion blur (0–20px)
Stagger delay between each element (0–2s)
Transitions:
Uses Framer's built-in Transition property control — the same transition picker you already use across your project. Set spring or tween, duration, easing, delay, damping, stiffness, mass, and bounce. No custom inputs, no learning curve.
Eyebrow Label:
Add an optional inline label with its own font, size, color, weight, and margin — perfect for section tags, eyebrow text, category labels, or decorative text sitting alongside your main heading.
HTML Tag Control:
Set the semantic HTML tag (h1–h6, p, div, span) directly from the panel for correct document hierarchy and accessibility.
Text Indent:
Optional first-line indent for editorial and editorial-style layouts.
Performance:
GSAP SplitText handles all DOM splitting. GPU-accelerated CSS transforms. Smooth 60fps rendering across all modern browsers with no layout thrashing or reflow.
Use Cases:
Hero headings · Landing page headlines · Scroll storytelling · Portfolio introductions · Feature section headings · About pages · Product descriptions · Agency websites · SaaS marketing pages · App landing pages · Personal sites · Coming soon pages · Event pages · eCommerce headers
Technical
Built with GSAP + SplitText
Framer Motion + React
Fully responsive, adapts to any text length
60fps GPU-accelerated transforms
All modern browsers supported
Zero external dependencies at runtime