El.oz El.oz - 2 years ago 68
Javascript Question

how to animate text without dividing letters in spans?

i'm trying to animate text in element dynamically but i cant find a way to do that, there is what i tried so far https://jsfiddle.net/yup55u9f/3/ but its not the best way.

i have tried some methods like

text into array and push letters in span but it doesn't work.

var i = -1,
spn = document.querySelectorAll('.spn'),

var setTO = setTimeout(function AnimTxt() {
stInt = setInterval(function () {
if (i <= spn.length) {
i += 1;
color: "red",
marginTop: "-10px"

return false;
}, 100);
}, 2000);

.spn {
position: absolute;
transition: all 1s ease;
top: 8px;
left: 5px;
text-transform: uppercase;
letter-spacing: 0px;
margin-top: 40px;

.spn:nth-of-type(2) {
left: 16px

.spn:nth-of-type(3) {
left: 27px

.spn:nth-of-type(4) {
left: 42px

p {
margin-top: 30px;
display: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<span class="placeholder-cont">
<span class="spn">t</span>
<span class="spn">e</span>
<span class="spn">x</span>
<span class="spn">t</span>

Answer Source

I tried separating letters into span tags for now. As for this - it will be better without separating in new elements - I can't find a way to achieve this without separating letters into span.

for (i = 0; i < text.length; i++) {
   $(".placeholder-cont").append("<span class='spn'>" + text[i] + "</span>");

And then animating them using .each() and setTimeout() instead of setInterval

$(".spn").each(function(index, el) {
  setTimeout(function() {
      color: "red",
      marginTop: "-10px"
    if (index == (text.length - 1)) {
      setTimeout(function() {
      }, 1000);
  }, 100 * index);

Please refer this fiddle.


In order to remove position: absolute I have added to span tags -

display: inline-block;

and then animated using 'transform' property.

Updated fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download