JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<link rel="stylesheet" href="http://jschr.github.io/textillate/assets/animate.css">
         <svg id="svgC" width="100%" height="100%" viewBox="0 0 1500 777"></svg>

JavaScript

var s = Snap("#svgC");
 var tt = s.text(500,500,"sample text");
 

 tt.attr({

fontSize :44,
fill : 'red',
 "id" : "mytext",
//"class" :  "animated bounceOutLeft" // this works

 });


$(document).ready(function(){
   $("svg").ready(function(){
       
       // works
 $('#mytext').text("new sample text");

       
       
       
// not working
       
$('#mytext').addClass('animated bounceOutLeft');

});
});

/*
not including textillate.js as I believe, it will work if we are able to get it work using simple css.

*/