jQuery: CSS text animation for different text lengths

Question

This is my animation:

.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.ani span:nth-child(1) {
  animation-delay: .1s;
}

.ani span:nth-child(2) {
  animation-delay: .2s;
}

.ani span:nth-child(3) {
  animation-delay: .3s;
}

.ani span:nth-child(4) {
  animation-delay: .4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ani"><span>h</span><span>e</span><span>l</span><span>l</span><span>o</span></div>

I will have different texts (not only »hello«) that should have this animation. So it would be great to have it as jQuery function. There should be calculated the text length, automatically placed <span></span>, and a fitting animation-delay.

How is it possible to code that?

Would be sooooo thankful for help.

I will have different
...
with different text and would need a jQuery function to automatize it. — Anna_B, May 10 '20 at 16:51
You mean breaking a work to `this` form? Did you try any code? — Vinay, May 10 '20 at 16:54
Yes, and automatically add a fitting "animation-delay". I tried a lot, but it doesn't work as expected. — Anna_B, May 10 '20 at 16:55
"_fitting "animation-delay"_" would be just an arithmetic progression based on how many letter you have — Vinay, May 10 '20 at 17:02
Would you like to have the second ani-element to start with animation-delay: .1s; for the first character or should it start with an animation-delay that takes the previous ani-element into account, e.g. start with .6s if the previous word contains 5 characters? — matthias_h, May 10 '20 at 17:19

score 2 · Accepted Answer · answered May 10 '20 at 17:24

You could do it like this:

var div, aniDivs, i,j;
aniDivs = document.querySelectorAll("div.ani");

for (var i = 0, len = aniDivs.length; i < len; i++) {
  div = document.querySelectorAll("div.ani")[i];
  let span = "";
  for (j = 0; j < div.innerText.length; j++) {
    if (div.innerText[j] !== " ") {
      span += "<span style='animation-delay:." + (j + 1) + "s'>";
      span += div.innerText[j];
      span += "</span>";
    }
  }
  div.innerHTML = span;
}

.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.ani span:nth-child(1) {
  animation-delay: .1s;
}

.ani span:nth-child(2) {
  animation-delay: .2s;
}

.ani span:nth-child(3) {
  animation-delay: .3s;
}

.ani span:nth-child(4) {
  animation-delay: .4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ani">Welcome</div>
<div class="ani">again</div>

For this answer I incorporated this answer How to wrap each character from a string in spans given by Danny Fardy Jhonston Bermúdez.

@Anna_B Glad that I was able to help :) – matthias_h May 10 '20 at 17:41 — matthias_h, May 10 '20 at 17:41

Vinay · Answer 2 · 2020-05-10T18:05:20.870

This should work for string of arbitrary length

$aniDivs = $('.ani'); // collect all the divs that have 'ani' class

//loop over each
$aniDivs.each(function(divIndex, div){
 
   //HTML part

   var divTxt = $(div).text(); 
   // get the text that's inside the ani div (ie. "hello" )

   var lettersArr = divTxt.split(''); 
   // make an array of letters that constitute the word (ie. ["h", "e", "l", "l", "o"] )

   var spanContent = ''; 
   // a bucket to hold the spans that we create dynamically
 
   $.each(lettersArr, function(letterIndex, letter){
     spanContent+= '<span>'+letter+'</span>';
   });

   // Now we have <span>h</span><span>e</span><span>l</span><span>l</span><span>o</span>

   $(div).html(spanContent); 
   // put it inside current ani <div>


   //CSS part

   var delay = 0.1;
   //now we collect the the <spans> that we just created and appended and increment the animation-delay in a progression

   $(div).find('span').each(function(spanIndex,span){
     $(span).css('animation-delay', delay.toFixed(1)+'s' );
     delay=delay+0.1; // displace every subsequent div to .1 second from previous
   });
});

.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ani">Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphioparaomelitokatakechymenokichlepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon</div>

jQuery: CSS text animation for different text lengths

2 Answers2