Typewriter effect in Hype


#61

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


(Stephen G) #62

Very helpful many thanks!!


(Jose Lizardo) #63

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

Thanks,
-J


(Jonathan Deutsch) #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)


(Jose Lizardo) #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


(Jonathan Deutsch) #66

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


(Jose Lizardo) #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
      });

(Jonathan Deutsch) #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!


(Mark Hunte) #70

Hi,

Just add this block after the Array in the code

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

}


#71

Awesome! Thank you very much!