Typewriter effect in Hype

If you are talking about my code,

Then you can do this with the end of setInterval() functon.

As shown in this snippet.

 var thisFire =   setInterval(function(){
    	 
    	 if (i == charArray.length){
    	 clearInterval( thisFire);
    	  return;
    	 }
         var charItem = charArray[i];
         
         if (charItem == "@"){
    
         charItem = "\<br\>";
    
         }
    
    	 textElement.innerHTML =  textElement.innerHTML + charItem;
    
      		i++;
    
    	 }, 200);

The timer is measured in milliseconds.

So 1000 = 1second

I initially set it 200 which is 200th of a second.

But I also found it looks better a about 165

Change the 200 to what ever speed works for you.

1 Like

Ahhhh! You the Man!

I guess a little Javascript training on Lynda is in order for me.

Thanks again!

1 Like

@meehanfp,

Originally, I posted the document that used the typed.js script. This is where the

bit came from. Mark posted a separate script that essentially does the same job but doesn't have the other effects that the first script has but as you only need the typewriter style on one text then that doesn't matter.

@colinredwilliams,

What happens if you have other elements next to the text?

It's a simple approach and worth using. One thing I would be aware of is my question above and instead of moving the box I would perhaps animate the width so that nothing else would be effected. :wink:

Summary

There are many ways to skin a "insert preferred animal here".

D

1 Like

I have to agree D, there are many ways to skin… I think if you were creating a complete web page using Hype then my process may present a problem, however if I was just creating a section of a page using Hype and inserting that Hype doc. into an HTML page then this would work. :smile:

Hi Mark,

I have s problem with this code. When I refresh the page too fast or go to another and come fast back, it types not from the beginning and sometimes not the text which I wrote, but different letters without any sense. Thank you!

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

I have added a version here with a blinking cursor

1 Like

I’m not quite sure why neither of these options seem to work with me. I’ve tried typed.js, have examined their Github, tried different functions they have listed, have to set to work on load, and it still doesn’t work.

I have also tried Matt’s option and attempted it with and without the blinking cursor and it also doesn’t start. Is there something I’m missing? Is there a way to tie to to specific animations or text that I may have missed? I believe I have all the steps right, it’s just not starting properly or at all. I appreciate any help! I’ve been going around on this for hours.

Can you share what you have? Did you start with one of the downloadable examples like this one?

I’ve downloaded all the examples actually. I was trying typed.js for awhile but the last thing I tried was the example you linked.

function type (hypeDovument, element, event) {
 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);

Then my head has:

<head>
<meta name>="viewpoint" content="user-scalable=yes, width=600" />
<script type="text/javascript" src="${resourcesFolderName}/typed.js"></script>
<script type="text/javascript" src="${resourcesFolderName}/jquery.js></script>

So after this I have the type function set to run on load. I have my text set with a class of ‘text’ and I have in my timeline action on a keyframe to ‘Run Javascript’ and have it set to the type function. I apologize as I am pretty new to Hype I may have missed something very simple I need to be doing. Thanks!

Can you share your .hype file as a zip so we can take a look?

Here is my .hype file. I’m trying to get the first heading to type out first then move on to the next paragraphs as they go. This is an effect I’ll want to duplicate often so I was really trying to figure it out. Thanks!

TypeWriting.hype.zip (861.5 KB)

1 Like

This is a quick hack of your example. Implementing typed.js and adding a few options to show you how you can snowball the effects as if it’s typing out multiple texts. And also a call to another animation using the Hype API. Any questions let me know. The function is loading on the Main Timeline just before your animation finishes.

TypeWriting-vDBear.hype.zip (859.8 KB)

2 Likes

I took a look at your example and it does make sense to me. It seems with this method I’ll do doing a custom function per each text area I want to have type. My only issue is that I still don’t have any animation displaying? Perhaps there is an error with my Hype? I see the two separate timelines but I do not see any typing animation on either the box-animation timeline or the main timeline.

The typing animation will happen when you preview your project in a browser. You won’t see anything within Hype as the typing animation is controlled by Javascript

1 Like

I see! Wow, how could I overlook at. Thank you for the help. I really appreciate it. :smile:

I look for a solution to insert the text form a normal hype text field.
So that I do not have to type the text inside the javascript.

I was only able to add aditional text but not to show only the text field text animated and nothing else.
May there is somebody how can help me to adjust the code:

var charArray = "this should show the text form the hype text elment.".split('');
var textElement = hypeDocument.getElementById('text');
var counter;
var i=0;

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

 		textElement.innerHTML =  textElement.innerHTML + charItem;

		i++;

}, 200);

Hi,

A little lost understanding what you want.
Are you asking how to just change the text of a text box without the typing effect?

Hi,

sorry for my english.

I like to use the typing effect.
But I try to change the text at the hype scene (hype.element) and not inside the javascript.

In the sample the text is written inside the js at the point "var charArray =…"
But I can not use the hype.element “text” to change the text with typing effect.

Hope you understand what I mean.
Kind regards
Jonas

If understand you, you do not want to use JS to do the typing.

Then you just need to use timeline properties. innerHTML.

Have a look at how the original poster of this post did it. The example project they posted does this. Ignore my input about JS later on and what the thread is originally about