Typewriter effect in Hype

Using JavaScript with Hype
29

Hi,

Good catch.

Basically a new time is firing overtime the scene loads thus producing multiple texts.

Change the main code to :

	var charS = "Here is some text to type out @ And this is a second line. @@@ this is a third line with 3 returns above"
	
	var charArray = charS.split('');
	
	var textElement = hypeDocument.getElementById('text');
	var counter;
	var i=0;

 window.thisFire =   setInterval(function(){
	 
	 if (i == charArray.length){
	 clearInterval( window.thisFire);
	  return;
	 }
     var charItem = charArray[i];
     
     if (charItem == "@"){

     charItem = "\<br\>";

     }

	 textElement.innerHTML =  textElement.innerHTML + charItem;

  		i++;

	 }, 200);

So all we are doing there is making the variable that holds the timer into a global one.

window.thisFire

Than ad a new javascript function to the Scene unload Actions and add :

clearInterval( window.thisFire);

This will cancel the timer.

1 Like