Animação de cobra em texto com SVG

Question

Eu estou tentando reproduzir o mesmo efeito que alguém fez aqui -> http://bit.ly/1FCtQSQ , esse quadro é animado por scroll, portando é necessário descer um pouco até que um texto com uma animação em cobra vai aparecer.

Eu estou tentando reproduzir essa animação, mas estou com bastante dificuldade. Eu já procurei alguns plugins de jquery, e fui capaz de achar:

Arctext.js
CircleType
This one

Mas nenhum desses me foi muito útil como podem imaginar. Eu percebi que quem fez, usou o Canvas, então eu fui atrás pra ver se achava tutoriais, e enfim.. não achei nada.

O que eu consegui fazer até o momento é uma curva estatica usando o Konvajs:

var stage = new Konva.Stage({
  container: 'container',
  width: 1000,
  height: 1000
});
var layer = new Konva.Layer();

stage.add(layer);

var textpath = new Konva.TextPath({
  x: 0,
  y: 50,
  fill: '#333',
  fontSize: 16,
  fontFamily: 'Arial',
  text: 'Testando esse é um texto em curva, muito bacana, agora eu quero anima-lô',
  data: 'M 100 200  C 200 100 300 0 400 100   C 500 200 600 300 700 200  C 800 100 900 100 900 100'
});

layer.add(textpath);
layer.draw();

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #F0F0F0;
}

<script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>
<div id="container"></div>

http://codepen.io/anon/pen/BNLQZB

Estou presa na parte da animação, podem me auxiliar?

Obrigada.

Answer 1

Podes fazer isso com JS nativo assim:

var textPath = document.getElementById('texto'),
    comprimento = textPath.getAttribute('startOffset');

var animador = setInterval(function () {
    comprimento--;
    textPath.setAttribute('startOffset', comprimento);
}, 30);

<svg>
    <defs>
        <path id="minhaPath" d="M 100 200  C 200 100 300 0 400 100   C 500 200 600 300 700 200  C 800 100 900 100 900 100" />
    </defs>
    <text x="10" y="100" style="stroke: #000000;">
        <textPath startOffset="240" id="texto" xlink:href="#minhaPath">Testando esse é um texto em curva, muito bacana, agora eu quero anima-lô</textPath>
    </text>
</svg>

jsFidle: http://jsfiddle.net/omcjvm44/

O que precisas animar é o atributo startOffset da textPath.