Trying to find an easier way to make an jQuery "writing" animation

Question

So my own solution to this is. However, this would become tedious if the text is too long.

var typeThis = "blablablablabla:";
var displayText = "";

function type(fullString, typedSoFar) {
  if (fullString.length != typedSoFar.length) {
    typedSoFar = fullString.substring(0, typedSoFar.length + 1);
    document.getElementById(".animatedTyping").innerText = typedSoFar;
    setTimeout(function() {
      type(fullString, typedSoFar)
    }, 100);
  }
}

document.getElementById(".animatedTyping").innerHtml = typeThis;
var element = document.createElement('span');
element.innerHTML = typeThis;
typeThis = element.textContent;
type(typeThis, displayText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2><span class="animatedTyping"></span></h2>

Please check ]this answer](http://stackoverflow.com/a/38222236/3863146) also where js has been used to have a typing effect which works for any sentence length. — Sahil, Dec 21 '16 at 09:18
Can I suggest you rollback your edit so the question will make sense to future readers. — John C, Dec 21 '16 at 12:19

score 3 · Answer 1 · answered Dec 21 '16 at 09:15

3

You can use Typelt

$('.1').typeIt({
     strings: 'This is a simple string.',
     speed: 50
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 

<script src="https://cdn.jsdelivr.net/jquery.typeit/4.3.0/typeit.min.js"></script>
<p><span class="1"></span></p>

answered Dec 21 '16 at 09:15

theoretisch

1,718
5
24
34

Great solution. But I looking for one that doesn't require a plugin – suonpera Dec 21 '16 at 09:19

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

jQuery feels a bit overkill. You could use plain javascript to achieve the same effect. Simply start with your full string, then in a loop take a substring of it and set a timeout to run the function again until the whole string is typed. To escape HTML encoded data you can create a new element add your text as HTML and then pull the text out (credit https://stackoverflow.com/a/9609450/1173776) -

var typeThis = "My typing speed is &lt; fast.";
var displayText = "";

function type(fullString, typedSoFar) {
  if (fullString.length != typedSoFar.length) {
    typedSoFar = fullString.substring(0, typedSoFar.length + 1);
    document.getElementById("animatedTyping").innerText = typedSoFar;
    setTimeout(function() {
      type(fullString, typedSoFar)
    }, 100);
  }
}

document.getElementById("animatedTyping").innerHtml = typeThis;
var element = document.createElement('span');
element.innerHTML = typeThis;
typeThis = element.textContent;
type(typeThis, displayText);

Watch me type -<span id="animatedTyping"></span>

edited May 23 '17 at 10:29

Community

1
1

answered Dec 21 '16 at 09:25

John C

3,052
3
34
47

Would this also work with symbols? e.g. < and ⁄ ??? Would the computer be able to read those as individual characters? – suonpera Dec 21 '16 at 09:34
@suonpera With typelt you can use this symbols, but if you want to use js you have to implement them extra I think – theoretisch Dec 21 '16 at 10:01
1

@suonpera [**HERE**](http://stackoverflow.com/questions/5796718/html-entity-decode) you can see how to do it without jquery – theoretisch Dec 21 '16 at 10:51
Thanks @theoretisch I've updated my answer to avoid jQuery – John C Dec 21 '16 at 11:04
@suonpera In your code you're referencing your element by class whereas in my code I'm using the elements ID which in this case I would argue is the better approach if your text is being added to a specific element. – John C Dec 21 '16 at 12:09

Trying to find an easier way to make an jQuery "writing" animation

2 Answers2