<h1> 'rising up from behind a wall' entrance animation-CodePudding

I'm trying to achieve the same entrance animation of the "A digital design studio..." on the website https://dashdigital.studio/, where the text rises from an invisible wall. Could someone please point me in any documentation relevant, or the name of the animation itself? I'm completely lost

I've attempted to find such an animation online but any rising animation doesn't show the same 'behind the wall effect.

CodePudding user response：

Here's a snippet doing the trick. You need a mask with overflow: hidden so that the text can come from below where its hidden.

Edit

I forgot to mention that instead of common spaces to separate the words I used non breaking spaces (  or opt spacebar on MacOS) because it trims trailing spaces automatically.

h1 {
  display: flex;
}

/* Mask with overflow hidden */
.word-mask {
  overflow: hidden;
}

.word {
  position: relative;
  top: 2rem;
  animation: move-up .4s ease-in forwards;
}

.word-2 {
  animation-delay: .1s
}

.word-3 {
  animation-delay: .2s
}

@keyframes move-up {
  0% {
    top: 2rem;
  }
  100% {
    top: 0;
  }
}

<h1>
  <div >
    <div >Hope </div>
  </div>
  <div >
    <div >it </div>
  </div>
  <div >
    <div >helps! :)</div>
  </div>
</h1>