001 Blur Reveal
002 Fade in
003 Change color
004 Scale reveal
005 Random Stagger
006 Random Scale
007 Overscale
008 Slide
MORE
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.
BUILT WITH FRAMER