Issue On Fading In a Text From Left To Right

Question

Can you please take a look at this code and let me know how I can add fade-in from left to right of text so the text be shown like First S, then t , then r , ... and finally the last letter g?

$(".btn").on("click", function() {
  $(".str").addClass('present');
});

.str {
  opacity: 0;
  font-size: 32px;
  font-weight: bold;
  /*CSS3 transitions for animated effect*/
  transition: all 0.35s;
}
.present {
  opacity: 0.9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Display</button>
<div class="str">String</div>

For letters to fade in one by one you'd need to wrap them each in a span of their own. (*Edit:* This is for a pure CSS solution). — Harry, Jan 09 '16 at 09:23
Possible duplicate of [CSS fade left to right](http://stackoverflow.com/questions/12686738/css-fade-left-to-right) — Michał Perłakowski, Jan 09 '16 at 09:25
Thanks Gothdo, I am going to say actually doesn't really matter! I just need to do that with JS or CSS is not important! — Behseini, Jan 09 '16 at 09:26
The accepted answer in the thread linked as duplicate looks like anything but a fade-in to be honest. — Harry, Jan 09 '16 at 09:28
how about using a plugin? https://jschr.github.io/textillate/ — Khanh TO, Jan 09 '16 at 09:31

Harry · Accepted Answer · 2016-01-09T11:06:52.913

You can use a small bit of JS (uses jQuery) like in the below snippet to split the content of the element into individual characters, wrap them all into separate spans and add the class to each of them one by one. This would produce the effect of each character fading in one by one.

This answer is very similar to Farzad's answer in the sense that it uses multiple span characters but there is a significant difference between the two. While the other answer manually adds the delay and thus makes it difficult to adapt to varying length texts, the snippet in this answer uses transitionend event which adds the class to the next sibling span as soon as the transition for the current span is completed. Thus, it can automatically adapt itself to varying text lengths also.

$(document).ready(function() {
  $this = $('.str');
  var characters = $this.text().split("");
  $this.empty();
  $.each(characters, function(i, el) {
    $this.append("<span>" + el + "</span");
  });

  $(".btn").on("click", function() {
    $(".str span:nth-child(1)").addClass('present');
  });
  $('.str span').on('transitionend', function() {
    if ($(this).next('span').length != 0)
      $(this).next('span').eq(0).addClass('present');
  });
});

.str span {
  opacity: 0;
  font-size: 32px;
  font-weight: bold;
  transition: all 0.35s;
}
.str .present {
  opacity: 0.9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Display</button>
<div class="str">String</div>

Note: The code for splitting the contents into individual characters is not my own. It was picked from a Stack Overflow answer long time back and I don't have the link to it at present.

Issue On Fading In a Text From Left To Right

1 Answers1