El.oz El.oz - 7 months ago 12
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

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



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


var setTO = setTimeout(function AnimTxt() {
stInt = setInterval(function () {
if (i <= spn.length) {
i += 1;
$('.spn').eq(i).css({
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>
</span>




Answer

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() {
    $(el).css({
      color: "red",
      marginTop: "-10px"
    });
    if (index == (text.length - 1)) {
      setTimeout(function() {
        $('p').show();
      }, 1000);
    }
  }, 100 * index);
});

Please refer this fiddle.

EDIT

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

display: inline-block;

and then animated using 'transform' property.

Updated fiddle.