My Framer Site

A motion system crafted for modern typography. Animations that guide the eyes and elevate your storytelling.

Each preset is built from the same Text Reveal engine, ensuring consistent timing, easing, and behavior.

Perfect for hero intros, section transitions, case studies, and long-form content.

001 Blur Reveal

Every effect comes fully pre-configured. Just drop it into your page, change the text, adjust a few settings if you want, and it’s instantly ready to use, no setup or animation work required.

002 Fade in

Every effect comes fully pre-configured. Just drop it into your page, change the text, adjust a few settings if you want, and it’s instantly ready to use, no setup or animation work required.

003 Change color

Every effect comes fully pre-configured. Just drop it into your page, change the text, adjust a few settings if you want, and it’s instantly ready to use, no setup or animation work required.

004 Scale reveal

Every effect comes fully pre-configured. Just drop it into your page, change the text, adjust a few settings if you want, and it’s instantly ready to use, no setup or animation work required.

005 Random Stagger

Every effect comes fully pre-configured. Just drop it into your page, change the text, adjust a few settings if you want, and it’s instantly ready to use, no setup or animation work required.

006 Random Scale

Every effect comes fully pre-configured. Just drop it into your page, change the text, adjust a few settings if you want, and it’s instantly ready to use, no setup or animation work required.

007 Overscale

Every effect comes fully pre-configured. Just drop it into your page, change the text, adjust a few settings if you want, and it’s instantly ready to use, no setup or animation work required.

008 Slide

Every effect comes fully pre-configured. Just drop it into your page, change the text, adjust a few settings if you want, and it’s instantly ready to use, no setup or animation work required.

AND
MORE

How to use

Edit Content & Font Settings

Edit Content & Font Settings

Change the text directly inside the Text field.

Change the text directly inside the Text field.

Font Setting

Font Setting

Choose any font using Framer’s Font control.

You can customize: Font family, Weight, Size, Line height, Letter spacing.

Choose any font using Framer’s Font control.

You can customize: Font family, Weight, Size, Line height, Letter spacing.

Color control

Color control

Base Color

Base Color

This is the starting color of each line, word, or character before it animates.

This is the starting color of each line, word, or character before it animates.

Reveal Color

Reveal Color

This is the final color the text transitions to when fully revealed.

It should represent the intended, readable state of your typography.

This is the final color the text transitions to when fully revealed.

It should represent the intended, readable state of your typography.

Reveal Mode

Reveal Mode

Choose animation level:

Per Lines. Animates each line as a block.

Per Lines. Animates each line as a block.

Per Words. Animates each word individually.

Per Words. Animates each word individually.

Per Chars. Animates every single character for expressive effects.

Per Chars. Animates every single character for expressive effects.

Trigger reveal

Trigger reveal

Choose trigger to reveal:

Choose trigger to reveal:

Viewport-Based Triggering

Viewport-Based Triggering

Animations start when the component layer enters the viewport.

Animations start when the component layer enters the viewport.

Section-Based Triggering

Section-Based Triggering

Animations start exactly when a section enters the viewport by using Scroll Section and assigning its Section ID.

Animations start exactly when a section enters the viewport by using Scroll Section and assigning its Section ID.

Viewport Position

Viewport Position

Choose where the reveal starts:

Choose where the reveal starts:

Viewport Anchor (Top / Center / Bottom)

Viewport Anchor (Top / Center / Bottom)

Animation triggers the moment the component crosses your chosen viewport position.

Animation triggers the moment the component crosses your chosen viewport position.

Custom Viewport Position

Custom Viewport Position

Set a precise trigger position anywhere from 0–100% of viewport height.

Useful for fine-tuning staggered reveals or syncing with other scroll effects.Useful for fine-tuning staggered reveals or syncing with other scroll effects.

Set a precise trigger position anywhere from 0–100% of viewport height.

Useful for fine-tuning staggered reveals or syncing with other scroll effects.Useful for fine-tuning staggered reveals or syncing with other scroll effects.

Replay Animation

Replay Animation

Choose Replay Animation:

Choose Replay Animation:

Replay = Yes

Replay = Yes

Animation follows scroll direction both forward and backward.

Animation follows scroll direction both forward and backward.

Replay = No

Replay = No

Animation plays once when revealed and does not rewind on scroll-up.

Animation plays once when revealed and does not rewind on scroll-up.

Duration & Ease

Duration & Ease

Duration

Duration

Controls how long the reveal animation takes for each fragment.

Short durations feel snappy and modern; longer durations feel smooth.

Controls how long the reveal animation takes for each fragment.

Short durations feel snappy and modern; longer durations feel smooth.

Ease

Ease

Determines how the animation accelerates and decelerates over time.

Smooth: a gentle, natural ease suitable for most text animations.

Back: creates a slight overshoot for a punchier, energetic motion.

Elastic: bouncy and expressive; great for playful or creative moments.

Linear : no easing, creating uniform motion from start to finish.

Determines how the animation accelerates and decelerates over time.

Smooth: a gentle, natural ease suitable for most text animations.

Back: creates a slight overshoot for a punchier, energetic motion.

Elastic: bouncy and expressive; great for playful or creative moments.

Linear : no easing, creating uniform motion from start to finish.

Masking & Overflow

Masking & Overflow

Overflow Behavior

Overflow Behavior

Overflow is applied per fragment according to your selected mode — Lines, Words, or Chars — ensuring only those individual units are clipped during the reveal.

Overflow is applied per fragment according to your selected mode — Lines, Words, or Chars — ensuring only those individual units are clipped during the reveal.

Motion Controls

Motion Controls

These settings define how each fragment (line, word, or character) behaves before and during the reveal animation.

These settings define how each fragment (line, word, or character) behaves before and during the reveal animation.

Opacity

Opacity

Sets the starting transparency of each fragment before it animates.

Lower opacity creates a smoother fade-in; higher opacity produces a sharper, more instant reveal.

Sets the starting transparency of each fragment before it animates.

Lower opacity creates a smoother fade-in; higher opacity produces a sharper, more instant reveal.

Blur

Blur

Applies a pre-reveal blur value.

Useful for soft, atmospheric transitions or more dramatic, depth-like effects.

Applies a pre-reveal blur value.

Useful for soft, atmospheric transitions or more dramatic, depth-like effects.

Scale

Scale

Defines the starting scale of each fragment.

Use values slightly under 1 for a smooth pop-in effect, or values above 1 for a zoom-down reveal.

Defines the starting scale of each fragment.

Use values slightly under 1 for a smooth pop-in effect, or values above 1 for a zoom-down reveal.

Offset X/ Offset Y

Offset X/ Offset Y

Moves each fragment in a specific direction before the reveal.

Perfect for directional motion such as sliding up, drifting sideways, or dropping down.

Moves each fragment in a specific direction before the reveal.

Perfect for directional motion such as sliding up, drifting sideways, or dropping down.

Random Order

Random Order

Random Stagger

Random Stagger

Enable to animate fragments in a randomized sequence.

Enable to animate fragments in a randomized sequence.

Random Amount

Random Amount

Control how chaotic or subtle the randomness should feel.

Control how chaotic or subtle the randomness should feel.

MADE BY SANG DO

BUILT WITH FRAMER

Create a free website with Framer, the website builder loved by startups, designers and agencies.