Typewriter effect in Hype

Using JavaScript with Hype
61

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

2 Likes
62

Very helpful many thanks!!

63

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

Thanks,
-J

64

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)

65

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

66

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

67

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
      });
68

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).

69

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
70

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
71

Awesome! Thank you very much!

1 Like
72

Thank you

73

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

74

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

75

Can you post the project.

76

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

"TypeText_Dialogue Example.hypetemplate.zip"

77

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

78

@MarkHunte

Hi! I am using TypeText_Dialogue Example.hypetemplate.zip, how can I have the same effect in scene 2, scene 3, etc. too? It seems to only work with the first scene!

79

The code is using IDs.

You would need to give the Person text box a class name.

Then use that to get the id.

You will also need to then get each scene to query for the class on the elements and get the id of matching elements ( Person ) text box.

Each scene would need to reset the window.speakIndex to 0.

The example you are using is old and I really do not have time to go over it and iron out any bug ( there are some ) It itself was a quick edit

This is a quick edit of a quick edit.
sceneType.hype.zip (43.8 KB)

But as I say the example has bugs. Well one I notice which is long strings go askew
I do not really have time to figure that ouy=t and I may have already done so else where regarding this ?.

80

@MarkHunte

Thanks!

What kind of bugs for example? Your example seems OK! Does that mean it shouldn't be used? If so, do you recommend any alternatives to have this effect?

Thanks again!