Snake animation in text with SVG

Question

Snake animation in text with SVG

Navigation

#1 by (5 votes)

8

I'm trying to reproduce the same effect someone did here - > link , this frame is animated by scrolling, so you need to scroll down a bit until a text with a snake animation will appear.

I'm trying to play this animation, but I'm having a hard time. I already looked for some jquery plugins, and I was able to find:

Arctext.js
CircleType
This one

But none of these was very helpful to me as you can imagine. I realized that whoever did it used the Canvas, so I went back to see if I found tutorials, and anyway .. I did not find anything.

What I've been able to do so far is a static 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><divid="container"></div>

link

I'm stuck in the animation part, can you help me?

Thank you.

javascript svg

asked by anonymous 21.05.2015 / 04:45

1 answer

What are isomorphic applications? Differences between listeners and adapters in swing

score 5 · Accepted Answer

You can do this 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: link

What you need to animate is the startOffset attribute of textPath .