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.
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
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
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)
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.
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.
Set the semantic HTML tag (h1–h6, p, div, span) directly from the panel for correct document hierarchy and accessibility.
Optional first-line indent for editorial and editorial-style layouts.
GSAP SplitText handles all DOM splitting. GPU-accelerated CSS transforms. Smooth 60fps rendering across all modern browsers with no layout thrashing or reflow.
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
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
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.
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
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
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)
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.
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.
Set the semantic HTML tag (h1–h6, p, div, span) directly from the panel for correct document hierarchy and accessibility.
Optional first-line indent for editorial and editorial-style layouts.
GSAP SplitText handles all DOM splitting. GPU-accelerated CSS transforms. Smooth 60fps rendering across all modern browsers with no layout thrashing or reflow.
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
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
