Text Effects

Typewriter con cursor parpadeante y letras que caen una por una. Los efectos de texto más usados en landings.

Typewriter

Letras que caen

Código

// Typewriter
function typeWriter(el, text, speed = 50) {
  let i = 0
  el.innerText = ""
  const interval = setInterval(() => {
    el.innerText += text[i]
    i++
    if (i >= text.length) clearInterval(interval)
  }, speed)
}

// Letras que caen
function splitLetters(el) {
  const letters = el.innerText.split("")
  el.innerHTML = letters
    .map(l => `<span>${l === " " ? "&nbsp;" : l}</span>`)
    .join("")

  gsap.from(el.querySelectorAll("span"), {
    y: -60,
    opacity: 0,
    duration: 0.5,
    stagger: 0.04,
    ease: "back.out(1.7)"
  })
}