Text Reveal Animated

Text Reveal Animated — Scroll & On-Load Text Animation for Framer A scroll-triggered and on-load text reveal component for Framer.

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 Properties

Lines, words & chars – scroll or on load