Morph de texto

TextPlugin + GSAP

Texto que cambia con ritmo controlado

Una palabra

DISEÑO

TextPlugin, carácter a carácter

Frase completa

Mueve el mundo

Borrado y escritura con el mismo timeline mental

Contador

000

gsap.to con snap para números enteros

velocidad

text-morphing.js

gsap.registerPlugin(TextPlugin);

function morph(el, words, state) {
  state.index = (state.index + 1) % words.length;

  gsap.to(el, {
    duration: state.speed,
    text: { value: words[state.index], delimiter: '' },
    ease: 'none',
    onComplete: () => setTimeout(() => morph(el, words, state), 1200)
  });
}

gsap.to(counter, {
  value: 999,
  duration: 1.4,
  snap: { value: 1 },
  onUpdate() {
    output.textContent = String(counter.value).padStart(3, '0');
  }
});

delimiter: '' anima por carácter. snap evita decimales en contadores. En una pieza real, lo importante es decidir ritmo y legibilidad antes de encadenar efectos.