JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/WashingtonGuedes/jquery-bubble-text/master/jquery.bubble.text.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="bubble">Hello, World!</div>
CSS
#bubble {
font-size: 25px;
font-family: Comic Sans MS, Verdana, monospace;
color: #2d509b;
font-weight: bold;
}
JavaScript
$(document).ready(function() {
var $element = $('#bubble');
var phrases = [
'This is how bubbleText works.',
'Animating each letter in a friendly way',
'Thanks for seeing it :)',
'It really matters to me ...',
'Regards,',
'Guedes, Washington L.',
];
var index = -1;
(function loopAnimation() {
index = (index + 1) % phrases.length;
bubbleText({
element: $element,
newText: phrases[index],
letterSpeed: 70,
callback: function() {
setTimeout(loopAnimation, 1000);
},
});
})();
});