Streaming live at 10am (PST)

Animated Text Drawing


#1

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. http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web-page

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>

#2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.