Typewriter effect in Hype

Thank you so much for your help. You are amazing!

2 Likes

Very helpful many thanks!!

Hi -
How do I reset the type script when I leave the scene?

Thanks,
-J

Given no other modifications, you’d create an On Scene Load handler that is set to Run JavaScript… with this code:

window.speakIndex = 0;

(this will reset when going to the scene with the typewriter text… if you want you can also use On Scene Unload for leave the scene purposes)

Sorry, I’ve inserted my question in the wrong place, regarding my question below:

How do I reset the type script when I leave the scene?

Thanks,
-J

My answer shows how to reset the script; are you having problems with it?

I cannot get it to work.
This the code I am using:

var typed = new Typed(".typed", {
        strings: ["Some text should appear here"],
        typeSpeed: 1
      });

Can you post of zip of your .hype document? The code I sent applies to the last posted solution but I think your code is from a different library (this is a long thread).

Hello @MarkHunte!
I’m using the “chat” version of your code but in slightly different way. Need sequence of text lines to show one after another which is done. The problem comes when I put a timeline action to start the timeline animation from the beginning to play everything on loop. Then it seems have to put some line or something to kill the previously loaded script and to reload it again, because everything is overlapped. Will be appreciated if you could help me with that!

Here is the hype document. I cleaned the rest of elements, but all scripts I’m using are still there. typewritter_issue.hype.zip (18.6 KB)

Thank you!

1 Like

Hi,

Just add this block after the Array in the code

  ///-- RESET IF WE WANT TO REPEAT CONVERSATION AGAIN
  if (window.speakIndex >=  boxPeopleConversation.length){
   window.speakIndex = 0
   for (i = 0; i < boxPeopleConversation.length; i++) { 
 	hypeDocument.getElementById(boxPeopleConversation[i].boxID).innerHTML = '' 
}
  
  }

… ie

would look like this

var boxPeopleConversation = [
  {boxID:"textBox1",speed:80,ttext:"text 1"},
  {boxID:"textBox2",speed:80,ttext:"text 2"},
  {boxID:"textBox3",speed:80,ttext:"text 3"},
  {boxID:"textBox4",speed:80,ttext:"text 4"}]
  
  
 ///-- RESET IF WE WANT TO REPEAT CONVERSATION AGAIN
  if (window.speakIndex >=  boxPeopleConversation.length){
   window.speakIndex = 0
   for (i = 0; i < boxPeopleConversation.length; i++) { 
 	hypeDocument.getElementById(boxPeopleConversation[i].boxID).innerHTML = '' 
}

}

3 Likes

Awesome! Thank you very much!

1 Like

Thank you

Does anyone has ever done a typing, then erasing text script?

I am getting some strange results from this. When the scene is loaded off screen the letters comes out wrong. I have tested using both Adpiler and Adform preview. Also using different browsers. Here is the link to Adpiler.

Wait a few seconds before scrolling down to the bottom.

https://preview.adpiler.com/JEYGUBSEKQ

Screenshot:
Screenshot 2021-04-07 at 11.19.59

Can you post the project.

It is from the project file you postet earlier in this thread:

"TypeText_Dialogue Example.hypetemplate.zip"

Granted.
But I would really want to see how you have added it to you project...