Quiero tener una página web que tenga una palabra centrada.

Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos, es decir, comienza en un punto y dibuja líneas y curvas con el tiempo de modo que el resultado final sea un glifo.

No me importa si esto se hace con <canvas>DOM o no, y no me importa si se hace con JavaScript o CSS. La ausencia de jQuery sería agradable, pero no es obligatorio.

¿Cómo puedo hacer esto? He buscado exhaustivamente sin suerte.

Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos

Versión de lona

Esto dibujará caracteres individuales más como uno escribiría a mano. Utiliza un patrón de guión largo donde el orden de encendido / apagado se intercambia con el tiempo por char. También tiene un parámetro de velocidad.

^{Ejemplo de animación (ver demo a continuación)}

Para aumentar el realismo y la sensación orgánica, agregué un espaciado aleatorio de letras, un desplazamiento y delta, transparencia, una rotación muy sutil y finalmente uso una fuente ya "escrita a mano". Estos pueden envolverse como parámetros dinámicos para proporcionar una amplia gama de "estilos de escritura".

Para una apariencia aún más realista, se requerirían los datos de ruta que no son por defecto. Pero este es un código corto y eficiente que se aproxima al comportamiento escrito a mano y fácil de implementar.

Cómo funciona

Al definir un patrón de guión, podemos crear hormigas marchantes, líneas punteadas, etc. Aprovechando esto definiendo un punto muy largo para el punto "apagado" y aumentando gradualmente el punto "encendido", dará la ilusión de dibujar la línea cuando se acaricia mientras se anima la longitud del punto.

Dado que el punto de desconexión es tan largo, el patrón repetitivo no será visible (la longitud variará con el tamaño y las características del tipo de letra utilizado). La ruta de la letra tendrá una longitud, por lo que debemos asegurarnos de que cada punto cubra al menos esta longitud.

Para las letras que consisten en más de una ruta (por ejemplo, O, R, P, etc.) como una es para el contorno, una es para la parte hueca, las líneas aparecerán dibujadas simultáneamente. No podemos hacer mucho al respecto con esta técnica, ya que requeriría el acceso a cada segmento de ruta para ser trazado por separado.

Compatibilidad

Para los navegadores que no admiten el elemento de lienzo, se puede colocar una forma alternativa de mostrar el texto entre las etiquetas, por ejemplo, un texto con estilo:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

Manifestación

Esto produce el trazo animado en vivo ( sin dependencias ):

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "STROKE-ON CANVAS", x = 30, i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed;                                         // reduce dash length
  ctx.strokeText(txt[i], x, 90);                               // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop);             // animate
  else {
    ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen;                                      // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
    ctx.rotate(Math.random() * 0.005);                         // random rotation
    if (i < txt.length) requestAnimationFrame(loop);
  }
})();

canvas {background:url(http://i.imgur.com/5RIXWIE.png)}

<canvas width=630></canvas>

Editar 2019

Creé una biblioteca de JavaScript que puede crear animaciones realistas. Es fácil de usar y requiere un archivo JSON especial que actúe como fuente.

var vara = new Vara("#container", "https://rawcdn.githack.com/akzhy/Vara/ed6ab92fdf196596266ae76867c415fa659eb348/fonts/Satisfy/SatisfySL.json", [{
  text: "Hello World!!",
  fontSize: 48,
  y:10
}, {
  text: "Realistic Animations",
  fontSize: 34,
  color:"#f44336"
}], {
  strokeWidth: 2,
  textAlign:"center"
});

#container {
  padding: 30px;
}

<script src="https://rawcdn.githack.com/akzhy/Vara/16e30acca2872212e28735cfdbaba696a355c780/src/vara.min.js"></script>
<div id="container"></div>

Pedido de la página de Github para la documentación y ejemplos. Y Codepen

Respuesta anterior

El siguiente ejemplo usa snap.js para crear dinámicamente tspan elementos y luego animar cada uno de ellos stroke-dashoffset.

var s = Snap('svg');
var text = 'Some Long Text'
var len = text.length;
var array = [];
for (var x = 0; x < len; x++) {
  var t = text[x]
  array.push(t);
}
var txt = s.text(50, 50, array)
$('tspan').css({
  'font-size': 50,
  fill: 'none',
  stroke: 'red',
  "stroke-width":2,
  'stroke-dasharray': 300,
  'stroke-dashoffset': 300
})

$('tspan').each(function(index) {
  $(this).stop(true, true).delay(300 * index).animate({
    'stroke-dashoffset': 0,
  }, 300, function() {
    $(this).css('fill', 'red')
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
</svg>

Respuesta anterior

Puedes hacer algo como esto usando svg's stroke-dasharray

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 8s forwards;
}
@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 8s forwards;
  -moz-animation: draw 8s forwards;
  -o-animation: draw 8s forwards;
  -ms-animation: draw 8s forwards;
  animation: draw 8s forwards;
}
@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50">Some text</text>
</svg>

Sin keyframes animación puedes hacer algo como esto

<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="5" font-size="50"  stroke-dasharray="1000"
  stroke-dashoffset="1000">Some text
  <animate attributeName="stroke-dashoffset"
    from="1000"
    to="0" 
    dur="8s"
      fill="freeze">
          
      </animate> </text>
</svg>

Y para el soporte de IE puede usar jquery / javascript

$('text').animate({
    'stroke-dashoffset':'0'
},8000)

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50" 
 >Some text
  </text>
</svg>

Solo CSS:

@keyframes fadein_left {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

#start:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0%;
  opacity: 0.7;
  height: 25px;
  background: #fff;
  animation: fadein_left 3s;
}

<div id="start">
  some text some text some text some text some text
</div>

Después de muchas pruebas, aquí hay algunas notas. El objetivo es mostrar datos de texto rápidos de la forma menos bloqueante, en páginas pesadas DOM que requieren interacciones de los usuarios.

Por supuesto, hay muchas formas de lograr lo mismo. En este ejemplo, las diferencias pueden no ser obvias, realmente se aplican a interfaces complejas.

Más lento : innerHTMLy estilo en línea. El DOM se recalcula en cada iteración. El navegador está trabajando duro para mantener el tren. Fallará rápidamente, causando pérdidas de memoria y congelaciones:

setInterval(function(){
  out.innerHTML = `<span style="position:fixed;top:${~~(Math.random() * 220)}px">${Math.random() * 1000}<span>`
},1)

<h1 id="out"></h1>

Mucho mejor : El uso textContent, requestAnimationFramey la API de animación web. Esto va mucho más suave, es obvio en páginas pesadas DOM. Las interacciones del usuario no bloquearán los repintes. Se pueden omitir algunas reparaciones para mantener la interfaz bien receptiva.

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.textContent = Math.random() * 1000
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)

#out{
position: fixed}

<h1 id="out"></h1>

En el ejemplo anterior, el DOM todavía se está recalculando para el desbordamiento de texto. Podemos ver que el depurador parpadea con fuerza. ¡Esto realmente importa en los elementos en cascada! Esto todavía puede ralentizar javascript y los desplazamientos de los usuarios.

Potencia total : es posible usar css solo para actualizar los datos con la contentregla css y las variables css. El texto no será seleccionable.

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.setAttribute('data-before', Math.random() * 1000)
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)

#out{
  position: fixed
  
  }
#out:before {
   content: attr(data-before)
 }

<h1 id="out"></h1>

Mis pruebas muestran grandes mejoras, el motor de JavaScript se salta rápidamente en otras tareas. A veces puede comenzar un poco más lento que el ejemplo anterior. Pero además de eso, esto no bloquea los desplazamientos de los usuarios, y al depurador también le gusta, no más saltos.