I first tried textillate to get it work with snap.svg. Jquery is selecting text properly and even modifying it properly. After looking at Textillate, I found its using animate.css internally for animations. So, I decided to use animate.css directly to see if it works.
Code eg. :
var text = s.text(500,500,"sample text");
text.attr({
fontSize :44,
fill : 'red',
"id" : "myText"
});
and then :->
$(document).ready(function(){
$("svg").ready(function(){
$('#myText').text("hello");
$('#myText').addClass('animated bounceOutLeft'); //animate.css part
});
});
Animate.css and Textillate are working fine on normal html elements. Since, jquery is selecting svg text element properly and even changing text, I am not sure problem exists in which part of the code.
More info :
1)From the direct css, I have added "class" and set properties in css like color etc, and it works.
2) if I add "class" : "animated bounceOutLeft" directly in svg, it works.
Edit :
jsfiddle :
