Framer code component

Reveal any text with a block wipe, clip, mask or blur.

Drop in any text and it animates into view. Seven styles, four directions, and you can reveal it all at once — or one line, word or letter at a time.

7 animation styles

Use your own text

Nothing to install

Respects motion settings

Effects

Seven ways for text to arrive

Every tile below is the same component — only the Effect menu is different. They replay each time they scroll onto the screen.

01 — From left

Block wipe

02 — From left

Clip reveal

03 — From bottom

Mask slide

04 — From bottom

Slide fade

05 — From bottom

Blur in

06 — From centre

Scale in

07 — From bottom

Flip in

08 — Any layer

Drag any text layer onto the component and it animates the text inside.

Pacing

Reveal the line, the word, or the letter

One setting decides whether the text arrives all at once, or a line, word or letter at a time. It can run forward, backwards, from the middle out, or shuffled.

All at once

The whole block arrives together.

Line by line

Each line arrives in turn, even when the text wraps differently on a smaller screen.

Word by word

Every word takes its own moment.

Letter by letter

One letter at a time.

When it plays

In view, on load, on hover, on click

Choose what makes it play, how much of it has to be on screen first, and whether it replays every time it comes back.

Click to replay

Click the words to play it again

Settings

Everything is a setting

No code to touch. Everything below lives in the panel on the right, and you can set it differently on every copy.

Your text

Use a text layer you already have, or type it straight into the panel and pick the font and colour.

Animation style

Block wipe, clip, mask slide, slide fade, blur, scale or flip.

Direction

Which side it comes in from — left, right, top or bottom.

Reveal by

All at once, line by line, word by word, or letter by letter.

Order

Forward, backwards, from the middle out, or shuffled.

Sweeping blocks

One or two coloured blocks sweep across before the text appears. Both colours are yours to pick.

Timing

Speed, the pause between pieces, a delay before it starts, and seven ready-made easing curves.

When it plays

On scroll into view, on page load, on hover or on click — once, or every time.

Motion settings

Visitors who ask their device for less motion simply see the finished text, with no animation.

Block Reveal Text

One component — nothing to install — works with any text in Framer