Type writing effect

(Achim Goebel) #1

hi there, i´m looking for a solution for the following scenario:
user is typing any key on his keyboard but a pre-given text appears in the textfield.
this feature is needed for a movie production where actors just hit any keys on the keyboard an the right text appears.
any ideas folks, would be very happy about it

(Mark Hunte) #2

Do you need a flashing cursor?

(Achim Goebel) #3

that would be step 2 :wink: but my major problem is how to type a pre-given text while hitting any key. i.e. the text is “hello world” but your keystrokes are like "hvhjergogöjrlthjlg."
you get what i mean?

(Mark Hunte) #4

Give me a min…

(Achim Goebel) #5

any time you need:blush:

(Mark Hunte) #6

Here is a simplified version of one I put up on the site a while ago. I have stripped it down as it was all auto type and blinking cursor.

I would need to redo the cursor to suit this version…

Simple_Type_Text_KeyDOWN.hype.zip (46.4 KB)

(Achim Goebel) #7

you saved my day, great work thank´s a lot.
this is really what i need:-)

(Mark Hunte) #8

No Problem,

Here is one with a cursor.

Simple_Type_Text_Keydown_blinking_Cursor.hypetemplate.zip (47.2 KB)

(Achim Goebel) #9

you´r the one:+1: thank´s a million times

(Björn) #10

Dear Mark,
I am not very familiar with Hype yet and I need some help with the “simple type text…blinking cursor” file.
I found out how to change sizes, colors etc.
Now I tried to fill out a rectrangle box with a longer text by activating the scroll function.
If the cursor reaches the bottom of the box it leaves the box and the box content does not scroll automatically to where the cursor position is. I can of course scroll manually.
Is there existing any solution or any script to scroll automatically?
Kind regards

(Mark Hunte) #11


Can you post yyou version with your setup…

(Mark Hunte) #12

Actually found it.

Using the last file I posted

Add this as the last line in the type() function


(Björn) #13

That works. Thank you so much!


@MarkHunte Didn’t know this existed - thanks for yet another useful tip!

(Björn) #15

Dear Mark,
one more question concerning the type function:
is it possible to add a fixed passage of text before the actual typing starts.
Kind regards

(Mark Hunte) #16

You have not said how you want the text added, So I will assume you add your text to the rectangle’s innerHTML using the editor.

Then in the startBlinker() function change the line,

window.textElement.innerHTML = window.blinker


window.textElement.innerHTML += window.blinker

(Björn) #17

Thanks again. Just one more thing before Easter holiday: how can I hide the scrollbar at all?

(Mark Hunte) #18

No prob…

Do a search for it on google. You will most likely need to use css to do it. There may be something on the site already but not 100%.

Have a good one…


Just thought and tested. if you set the overflow to hidden the text will still show because you have the .scrollIntoView()

But note you will not be able to scroll manually using a scroll wheel. But selecting inside the text and arrow keys allow to scroll…

Edit 2

Scroll on Auto ( in example above at least )

css style.


  padding-right: 30px;

Increaase ofr decrease as needed.

(Björn) #19

Where do I have to place the lines?

(Mark Hunte) #20

In the head file…