About this snippet

Grab attention instantly with this slick text reveal. By animating the text position inside a masking container, the headline appears to slide up from nowhere, which is perfect for hero sections.

Size
1.0 KB
Uses
HTML, CSS
Loads
Nothing external
Views
687
<div class="reveal-container">
  <h1 class="reveal-text">
    <span>DESIGN</span>
  </h1>
  <h1 class="reveal-text">
    <span>DEVELOP</span>
  </h1>
  <h1 class="reveal-text">
    <span>DEPLOY</span>
  </h1>
</div>
.reveal-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #111827;
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reveal-text {
  font-size: 4rem;
  color: white;
  margin: 0;
  line-height: 1.1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  overflow: hidden;
}
.reveal-text span {
  display: block;
  transform: translateY(100%);
  animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
/* Staggered Delays */
.reveal-text:nth-child(1) span { animation-delay: 0.2s; }
.reveal-text:nth-child(2) span { animation-delay: 0.4s; }
.reveal-text:nth-child(3) span { animation-delay: 0.6s; }

@keyframes reveal {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source

Keyboard shortcuts

Save