Does anybody have any experience with drawing text using Snap or any other solutions? I have a calligraphy script that I’d like to draw itself on page load. javascript - How can I animate the drawing of text on a web page? - Stack Overflow
This is the code snippet I’ve found, but I’m having trouble implementing it with Webflow.
var s=Snap('svg');
var text='Some Long Texts'
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-dasharray':230,
'stroke-dashoffset':230
})
$('tspan').each(function(index){
$(this).stop(true, true).delay(500* index).animate({
'stroke-dashoffset':0
}, 800);
})
<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>