Typewriter effect in Hype

Using JavaScript with Hype
38

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
39

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

40

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);
41

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?

42

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

43

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

44

Hi Mark,

I was looking to your typewriter Javascript function. One question: can I extract the text to be typed from a (hidden) text field on the active scene instead of having the text inside the Javascript function (to fill the charS variable with data extracted from a text field)?

Thank you!

45

Do you mean a form text input. You should just be able to get the forms value. There are plenty of examples of retrieving form input on the site. This should be pretty simple. And you would for example set var charArray to the value returned.

46

Yes of course, Mark… This was not a very clever question. Thank you for the reply.

47

Hi DBear, I have tried to rebuild your solution to this but am unable to get it working. Could you have a look at the file for me please?
texttype.zip (19.0 KB)

48

You have the latest version of Matt Boldt’s script which unfortunately uses ECMAScript which is not natively accepted in browsers yet so you would have to compile it with Babel (others are available) to make it compatible in browsers.

Here is the copy that I used back with the original post. When the script was in a compatible form.

typed.js.zip (4.4 KB)

2 Likes
49

Well, I don’t know what’s going on here (well nothing actually!) I copied your document but cannot get it working. Could you cast an eye over it please?

Typewriter.zip (23.5 KB)

1 Like
50

If I used this code for init I can get it mostly working:

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

This is what I found on the typed.js site

The cursor isn’t positioned correctly though, I don’t know why that is.

51

Thank yo Jonathon. I have noticed that when using the downloaded .js file it is 36kb and doesn’t work but when I copy the .js file in the example document it is 14kb and does work!

Ian

52

I suspect the code you had before might have been from a different (older?) version, so it probably was correct at some point!

53

Hi @ianben

Apologies for the delay as I have been away for a few months.

As mentioned before and when I posted the original examples I was using an older version which has a slightly different syntax as to the now “updated” typed.js which is now in a newer version to when this example was written. This is why the code that Jonathan has posted would work as the syntax has changed. This, unfortunately can happen when threads are quite old. :slight_smile:

The newer version of typed.js looks to be incorporating the new trend of using installers to install it into an environment that would probably use it as a module and would have a compiler and such to transform the ECMAScript into the Javascript equivalent. Not to say it can’t be used standalone but it would mean a change in approach to making it work in Hype.

cc @jonathan

54

I will put this up on the extensions page shortly .

This combines my codes for Typing text in Auto or on keydown, including iOS.
I am unable to test other devices.

Here is an example template with it in use.

TypeTextExtension_v110.hypetemplate.zip (48.8 KB)

Construtor Examples

   var textElement = document.getElementById('textRect');
 
hypeDocument.TypeTextExtension({
	textElement:textElement,
	typeType:"auto",
	autoSpeed:200,  
	hasCursor: true,
	cursor:"|", 
	cursorColor:"red",
	typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
	})

    var textElement = document.getElementById('textRect');
     
    hypeDocument.TypeTextExtension({
    	textElement:textElement,
    	typeType:"auto",
    	autoSpeed:200,  
    	typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
    	})

var textElement = document.getElementById(‘textRect’);

hypeDocument.TypeTextExtension({
	textElement:textElement,
	typeType:"keydown",  
	hasCursor: true,
	cursor:"✍️", 
	typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
	}

var textElement = document.getElementById('textRect');
 
    hypeDocument.TypeTextExtension({
    	textElement:textElement,
    	typeType:"keydown",  
    	typeString:"Here is some text to type out <br> And this is a second line. <br><br><br> this is a third line with 3 returns above"
    	}

Construtor object break down

  • textElement: = {Element} : The {Element} that is the typed text target. Must be entered

  • typeType: = {String } : {{“auto”/“keydown”} The type of typing behaviour. Auto type or on Key down. If not entered default will be ‘auto’

  • autoSpeed: = {Number} : {Number} The speed of the auto typing text. If not entered default will be 200

  • hasCursor: true: = {BOOL} : only really need true bool

  • cursor: = {String} : {String} The characture you want to use asthe Blinking cursor symbol, can be emojis also. If not entered default will default will be ‘|’

  • cursorColor: = {String} : {String} The colour of the cursor. If not entered default will default will be ‘white’

  • typeString: = {String} to be typed. Use <br> as break points/newlines

3 Likes
55

really cool! :slight_smile:

1 Like
56

The Extension and latest Version with New Options can be found now on the

1 Like
57

Thanks for the wonderful script. I’m a complete amateur, but do you have any suggestions on how I can indent the first line of the type string? Maybe by 5 to 10 px?

You made the line break code extremely easy to execute. Does indentation have a simple code too that I’m not aware of?