Revelo - The Ultimate Text Reveal Component for Framer

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

cooked

and

served

darkroom.engineering

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

the ultimate

text-reveal component

for framer

scroll to discover

the ultimate

text-reveal component

for framer

scroll to discover

the ultimate

text-reveal component

for framer

scroll to discover

the ultimate

text-reveal component

for framer

scroll to discover

the ultimate

text-reveal component

for framer

scroll to discover

CHOOSE

BETWEEN

SCROLL PROGRESS

OR

TRIGGER-

BASED

ANIMATIONS.

CHOOSE

BETWEEN

SCROLL

PROGRESS

OR

TRIGGER-

BASED

ANIMATIONS.

you're free

to mix

Fonts,

styles,

colors,

OR

paragraphs

however

you want.

you're free

to mix

Fonts,

styles,

colors,

OR

paragraphs

however

you want.

split

text

by

lines,

words,

letters,

with their own motion, all playing in sync.

play

with

position

scale

blur

skew

opacity

color

stroke

rotation

apply

custom

easings,

stagger origin,

stagger

origin,

duration

&

delay.

apply

custom

easings,

stagger origin,

stagger

origin,

duration

&

delay.

apply

custom

easings,

stagger origin,

stagger

origin,

duration

&

delay.

apply

custom

easings,

stagger origin,

stagger

origin,

duration

&

delay.

apply

custom

easings,

stagger origin,

stagger

origin,

duration

&

delay.

[01]

animation modes

⨁

[01]

animation modes

[01]

animation modes

[01]

animation modes

[01]

animation modes

progress mode:

The animation syncs with the scroll progress of the linked section.

trigger mode:

The animation is triggered when the linked section enters the viewport.

[02]

Styling Freedom

⨁

[02]

Styling Freedom

[02]

Styling Freedom

[02]

Styling Freedom

[02]

Styling Freedom

Style text however you want:

mix weights, fonts, colors, paragraphs.
all inside the same text layer.

full support of Framer text styles:

enable seamless responsive behaviour with breakpoints and rem sizes.

[03]

Parallel Animation

⨁

[03]

Parallel Animation

split text into: Lines, Words or letters.

get independent animation controls for each layer.

Parallel animations across layers combine into a synchronized motion experience.

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

get revelo on framer marketplace ↗

[04]

Animated Properties

⨁

[04]

Animated Properties

animate everything:

control Mask, color, stroke, opacity, position, scale, blur, rotation, skew, per layer.

Each property supports "from" and "to" values with ranges and units.

[05]

Animation Settings

⨁

[05]

Animation Settings

[05]

Animation Settings

tune it your way:

Adjust duration, delay, stagger, easing, and origin (start, center, end, edges or random). again, per layer.

choose from 25 easing curves presets, powered by GSAP.

[06]

…and more

canvas: Preview animations on Framer canvas.

pERFORMANCE: Only triggers when needed. Zero layout shift. GPU-accelerated.

ACCESSIBILITY: Text remains selectable, readable, and screen-reader safe.

SEO: Text remains in the DOM, with invisible fallback for indexing.

[04]

Animated Properties

⨁

animate everything:

control Mask, color, stroke, opacity, position, scale, blur, rotation, skew, per layer.

Each property supports "from" and "to" values with ranges and units.

[05]

Animation Settings

tune it your way:

Adjust duration, delay, stagger, easing, and origin (start, center, end, edges or random). again, per layer.

choose from 25 easing curves presets, powered by GSAP.

[06]

…and more

canvas: Preview animations on Framer canvas.

pERFORMANCE: Only triggers when needed. Zero layout shift. GPU-accelerated.

ACCESSIBILITY: Text remains selectable, readable, and screen-reader safe.

SEO: Text remains in the DOM, with invisible fallback for indexing.

[04]

Animated Properties

⨁

animate everything:

control Mask, color, stroke, opacity, position, scale, blur, rotation, skew, per layer.

Each property supports "from" and "to" values with ranges and units.

[05]

Animation Settings

tune it your way:

Adjust duration, delay, stagger, easing, and origin (start, center, end, edges or random). again, per layer.

choose from 25 easing curves presets, powered by GSAP.

[06]

…and more

canvas: Preview animations on Framer canvas.

pERFORMANCE: Only triggers when needed. Zero layout shift. GPU-accelerated.

ACCESSIBILITY: Text remains selectable, readable, and screen-reader safe.

SEO: Text remains in the DOM, with invisible fallback for indexing.

[03]

Parallel Animation

⨁

[03]

Parallel Animation

[03]

Parallel Animation

[03]

Parallel Animation

split text into: Lines, Words or letters.

get independent animation controls for each layer.

Parallel animations across layers combine into a synchronized motion experience.

[04]

Animated Properties

⨁

[04]

Animated Properties

[04]

Animated Properties

[04]

Animated Properties

animate everything:

control Mask, color, stroke, opacity, position, scale, blur, rotation, skew, per layer.

Each property supports "from" and "to" values with ranges and units.

cooked

and

served

darkroom.engineering