Kevin Powell - Community•3y ago

Animating Letters

How would I have my letters stay out of view until the animation bring them into view? https://codepen.io/ReallPanda_/pen/ZERoBvd

ReallPanda

CodePen

ZERoBvd

...

6 Replies

Myndi•3y ago

What do you mean exactly? :o Oh, I think I get it. You want the letters to not exist in the visible realm, and only appear when brought by the animation? Change the @keyframes and .letter to this:

.letter {
  translate: 0% -100%;
  tranform-origin: bottom;
}

@keyframes LettersIn {
    100% {
      translate: 0%;
    }
  }

.letter {
  translate: 0% -100%;
  tranform-origin: bottom;
}

@keyframes LettersIn {
    100% {
      translate: 0%;
    }
  }

I just added the relevant, the rest stays the same.

★𝖕𝖆𝖓𝖉𝖆☆OP•3y ago

this seems to make them go back down after the animation is done

Myndi•3y ago

Forgot this line, sorry. I will just paste it full.

.letter {
  display: inline-block;
  animation: LettersIn 3s ease forwards;
  animation-delay: calc(var(--n) * 1s);
  translate: 0% -100%;
}

@keyframes LettersIn {
    100%   {translate: 0%;}
  }

.letter {
  display: inline-block;
  animation: LettersIn 3s ease forwards;
  animation-delay: calc(var(--n) * 1s);
  translate: 0% -100%;
}

@keyframes LettersIn {
    100%   {translate: 0%;}
  }

★𝖕𝖆𝖓𝖉𝖆☆OP•3y ago

ahh i see, thank you! was banging my head for awhile on how to do this lol

Myndi•3y ago

Although the transform-origin would do nothing in this case. Just change the +- value of the 100% to change the position where it comes from.

★𝖕𝖆𝖓𝖉𝖆☆OP•3y ago

ahh ok

Gaming

Programming

Animating Letters