Text Reveal Animated: Free Typography Component by Daniyal Habib

Reveal text line by line, word by word, or character by character — on load or on scroll. Masked line reveals, stagger timing, blur, rotation, scale, offset & spring transitions. Hero sections, headlines, CTAs, landing pages, portfolios & more.

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