Text snake animation with SVG

Question

I’m trying to reproduce the same effect that someone did here -> http://bit.ly/1FCtQSQ , this frame is animated by scroll, therefore it is necessary to descend a little until a text with an animation in snake will appear.

I’m trying to play this animation, but I’m having a hard time. I’ve looked for some jquery plugins, and I’ve been able to find:

Arctext.js
Circletype
This one

But none of these have been as useful to me as you can imagine. I realized that whoever did, used Canvas, so I went to see if I could find tutorials, and anyway.. I couldn’t find anything.

What I’ve been able to do so far is a statics curve using 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

I’m stuck in the animation part, so help me?

Thank you.

Answer 1

You can do it with native JS like this:

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/

What you need to cheer up is the attribute startOffset of textPath.