Demo 3

Dynamic text with Snap.svg

Dynamic text with Snap.svg

1

This is an example how to animate text with Snap.svg. Create svg tag with ID, and add class if you would like to style it in CSS:

    <svg version="1.1" id="svgText" class="svg04" xmlns="http://www.w3.org/2000/svg">
                

2

Use . setTimeout for a sequence of animation:

    var demoText = Snap("#svgText");
    // Text holder
    var text = 'Place Your Text';
    
    var textArray = text.split(" ");
    var len = textArray.length;
    var timing = 1200;

    for( var index=0; index < len; index++ ) {

        (function demo() {

            var svgTextElement = demoText.text(300,160, textArray[index]).attr({ fontSize: '80px', fill: '#FFF', opacity: 0, "text-anchor": "middle" });

            setTimeout( function() {

                    Snap.animate( 0, 1, function( value ) {
                        // svgTextElement.transform('demoText' + value);     
                        // Animate by transform
                        svgTextElement.attr({ 'font-size': value * 80,  opacity: value });
                    }, timing, mina.bounce, function() { svgTextElement.remove() } );
                                }
            ,index * timing)
        }());
    };
                

3

Style your content with CSS if necessary:

    .svg04 {
        width: 600px;
        height: 300px;
        margin: 0 auto;
        padding-top: 50px;
        background-color: #AD054D;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    }