Eu quero ter uma página da web que tenha uma palavra centralizada.

Quero que essa palavra seja desenhada com uma animação, de modo que a página "escreva" da mesma maneira que gostaríamos, ou seja, começa em um ponto e desenha linhas e curvas ao longo do tempo, de modo que o resultado final seja um glifo.

Não me importo se isso é feito com <canvas>ou o DOM, e não me importo se é feito com JavaScript ou CSS. A ausência do jQuery seria boa, mas não necessária.

Como posso fazer isso? Eu procurei exaustivamente sem sorte.

Eu quero que essa palavra seja desenhada com uma animação, de modo que a página "grave" a palavra da mesma maneira que gostaríamos

Versão Canvas

Isso irá desenhar caracteres únicos mais como se fosse escrever à mão. Ele usa um longo padrão de traço em que a ordem on / off é trocada ao longo do tempo por caractere. Também possui um parâmetro de velocidade.

^{Exemplo de animação (veja a demonstração abaixo)}

Para aumentar o realismo e a sensação orgânica, adicionei espaçamento aleatório de letras, deslocamento y delta, transparência, uma rotação muito sutil e, finalmente, usando uma fonte já "manuscrita". Eles podem ser agrupados como parâmetros dinâmicos para fornecer uma ampla variedade de "estilos de escrita".

Para uma aparência ainda mais realista, os dados do caminho seriam necessários, o que não é por padrão. Mas este é um código curto e eficiente que aproxima o comportamento escrito à mão e fácil de implementar.

Como funciona

Ao definir um padrão de traço, podemos criar formigas marchando, linhas pontilhadas e assim por diante. Aproveitando-se disso, definindo um ponto muito longo para o ponto "desligado" e aumentando gradualmente o ponto "ligado", ele dará a ilusão de desenhar a linha quando pressionada enquanto anima o comprimento do ponto.

Como o ponto desativado é tão longo, o padrão de repetição não será visível (o comprimento varia de acordo com o tamanho e as características do tipo de letra que está sendo usado). O caminho da carta terá um comprimento; portanto, precisamos ter certeza de que cada ponto está cobrindo pelo menos esse comprimento.

Para letras que consistem em mais de um caminho (ex. O, R, P etc.) como um é para o contorno, um é para a parte oca, as linhas parecerão ser desenhadas simultaneamente. Não podemos fazer muito sobre isso com essa técnica, pois exigiria o acesso a cada segmento de caminho a ser traçado separadamente.

Compatibilidade

Para navegadores que não suportam o elemento canvas, uma maneira alternativa de mostrar o texto pode ser colocada entre as tags, por exemplo, um texto estilizado:

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

Demo

Isso produz o traçado animado ao vivo ( sem dependências ) -

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

Eu criei uma biblioteca javascript que pode criar animações realistas. É fácil de usar e requer um arquivo JSON especial que atua como fonte.

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>

Confira a página do Github para obter documentação e exemplos. E Codepen

Resposta Anterior

O exemplo abaixo usa snap.js para criar tspanelementos dinamicamente e animar cada um deles 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>

Resposta Anterior

Você pode fazer algo assim 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>

Sem keyframesanimação, você pode fazer algo assim

<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>

E para suporte ao IE, você pode 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>

Somente 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>

Após muitos testes, aqui estão algumas notas. O objetivo é exibir dados de texto rápidos da maneira menos obstrutiva, em páginas pesadas do DOM que exigem interações dos usuários.

É claro que existem muitas maneiras de conseguir a mesma coisa. Neste exemplo, as diferenças podem não ser óbvias, elas realmente se aplicam a interfaces complexas.

Mais lento : innerHTMLestilo em linha. O DOM é recalculado a cada iterações. O navegador está trabalhando duro para manter o trem. Ele falhará rapidamente, causando vazamentos e congelamentos de memória:

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

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

Muito melhor : Usando textContent, requestAnimationFrameea API de animação web. Isso fica mais suave, é óbvio nas páginas pesadas do DOM. As interações do usuário não bloqueiam as repetições. Algumas repetições podem ser ignoradas, para manter a interface bem responsiva.

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>

No exemplo acima, o DOM ainda está sendo recalculado para o excesso de texto. Podemos ver o depurador piscando bastante. Isso realmente importa em elementos em cascata! Isso ainda pode atrasar a rolagem de javascript e usuário.

Potência total : é possível usar o css sozinho para atualizar os dados com a contentregra css e as variáveis ​​css. O texto não será selecionável.

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>

Meus testes mostram grandes melhorias, o mecanismo javascript está pulando rapidamente em outras tarefas. Às vezes, pode começar um pouco mais lento que o exemplo acima. Mas, além disso, isso não bloqueia a rolagem dos usuários, e o depurador também está gostando, sem mais pulos.