Animate

Here's an example of animating text individually


var s = Snap("#svgout"); 
var myCharArray, textElArray, myTrans;
var offsetY = 50;

var myTextStringArray = ["Lorem ipsum dolor sit amet, consectetur adipisicing elit",
                        "sed do eiusmod tempor incididunt ut labor et dolore magna aliqua.",
                        " Ut enim ad minim veniam, quis nostrud exercitation ullamco" ];

var myGroup = s.g().attr({ fill: "red", "font-size": "20px" });

for( var a=0; a<myTextStringArray.length; a++) {

        myCharArray = myTextStringArray[a].split('');
        textElArray = myGroup.text(200, 120, myCharArray).attr({ opacity : 1, y: (a * 20 + offsetY) });
        
};

myTspans = myGroup.selectAll("tspan").attr({
        opacity: 0
});

function animFunc( element ) {
        Snap.animate(0,1, function( value ) {
                element.attr({ opacity: value, rotate: (value * 360) });
        }, 1000 );
}

for( var i=0; i < myTspans.length; i++ ) {
        setTimeout( 
                        animFunc.bind(null, myTspans[i]) 
                , i * 100);
}

   


        
The actual svg markup looks like this (when you've clicked on run)....