Text Reveal Effect

<div class="text-reveal-wrap">
  <h2 class="text-reveal">
    Creative Motion
  </h2>
</div>

.text-reveal-wrap{
  overflow:hidden;
  display:inline-block;
}

.text-reveal{
  margin:0;
  color:#ffffff;
  font-size:60px;
  font-weight:800;
  line-height:1.1;
  transform:translateY(110%);
  opacity:0;

  animation:textReveal 2.6s ease-in-out infinite;
}

@keyframes textReveal{
  0%{
    transform:translateY(110%);
    opacity:0;
  }

  30%{
    transform:translateY(0);
    opacity:1;
  }

  70%{
    transform:translateY(0);
    opacity:1;
  }

  100%{
    transform:translateY(-110%);
    opacity:0;
  }
}

How This Text Reveal Effect Works

The Text Reveal Effect creates a smooth masked animation by moving the heading vertically inside a wrapper with overflow: hidden.

The text starts below the visible area using translateY(110%) with opacity: 0, so it begins fully hidden.

At 30% of the animation, the heading moves into its normal position with translateY(0) and becomes fully visible with opacity: 1.

From 30% to 70%, the text stays centered and readable before beginning the exit motion.

At 100%, the heading moves upward with translateY(-110%) while fading back to opacity: 0, creating a clean slide-out transition.

You can learn more about controlling content outside an element’s visible area in the MDN Web Docs guide to overflow.

The full animation runs for 2.6s with ease-in-out timing and repeats infinitely, producing a continuous masked reveal without JavaScript.

Customizing This Text Reveal Effect

You can customize the Text Reveal Effect by changing a few CSS values while keeping the same HTML structure. The movement distance, timing, text size, and animation speed can all be adjusted.

• Entry distance: Change translateY(110%) to control where the text begins.
• Exit distance: Adjust translateY(-110%) to change how far the text moves upward.
• Animation speed: Change 2.6s for a faster or slower reveal cycle.
• Text size: Adjust 60px to fit different heading sizes.
• Visible duration: Change the 30% and 70% keyframes to control how long the text remains visible.
• Timing style: Replace ease-in-out with another timing function to change the feel of the movement.

Where to Use This Text Reveal Effect

The Text Reveal Effect works well for short headings and messages where a smooth entrance and exit can add motion without making the design feel busy.

• Hero headings: Reveal important titles with a clean sliding animation.
• Landing pages: Animate promotional messages or highlighted text.
• Portfolio websites: Use it for project names or creative headings.
• Loading screens: Display short rotating messages or status text.
• Section introductions: Add movement when presenting important content.
• Dark interfaces: The clean white text works especially well against darker backgrounds.

Because the effect uses CSS transforms, opacity, keyframes, and an overflow: hidden wrapper, it creates the masked reveal without requiring JavaScript.

If you want another smooth animated typography style, check out the Blur Reveal Text Effect, which combines blur, opacity, movement, and scale to reveal the text.

Frequently Asked Questions

Does the Text Reveal Effect require JavaScript?
No. The entire reveal and exit animation is created with CSS.

How is the masked reveal created?
The wrapper uses overflow: hidden, while the text moves vertically from outside the visible area into view.

Can I change how long the text stays visible?
Yes. Adjust the 30% and 70% keyframes to control the visible portion of the animation.

Can I make the reveal animation faster or slower?
Yes. Change the 2.6s animation duration to control the overall speed.

The Text Reveal Effect combines masked overflow, vertical movement, and opacity changes to create a smooth entrance and exit animation. Its CSS-only structure keeps it lightweight and easy to customize for hero headings, landing pages, portfolios, loading screens, and modern interfaces.