ANIMATED LOOPING TEXT

Site URL: https://gabriel-vargas.com/

Hi,

I would like to create a loop on my text animation "Hi👋, I'm Gabriel!" , that repeats itself infinitely. I attached the photo of the page where you can find the text animation.

Thanks!

You mean this effect? https://codepen.io/marudhupandiyang/pen/jLEdLR

Yes that one!

Add a Code Block on top of "UI/UX Designer..." text >> paste this code

<span class="title-holder">
 <span class="title">
  Hi, I'm Gabriel!  
 </span>
</span>
<style>
  .title-holder {
  top: 50%;
  left: 40%;
  position: absolute;
}
.title {
  font-family: 'Lato', sans-serif;
  font-size: 30px;
  color: #f9d566;
  width: 0;
  overflow: hidden;
  white-space: no-wrap;
  display:block;
  border-right: 3px solid #f9d566;
  animation: typewriter 5s steps(7) infinite, blinking-cursor 0.8s infinite;
  animation-fill-mode: forwards
}

@keyframes typewriter {
  0% { width:0 }
  25% { width: 70% }
  48% { width: 100% }
  50% { width: 100% }
  55% { width: 100% }
  75% { width: 70%; }
  85% { width: 30%; }
  100% { width: 0; }
}

@keyframes blinking-cursor {
  from { border-color: transparent }
  to { border-color: #f9d566 }
}
</style>

Also, It looks like you used special character after text "Hi"? It doesnt show on my laptop (Dell/Chrome)