Upvote 1

Animate text input (typewriter)

Under Consideration Armin Seltz ● ago

Sometimes its nice to be able to enter text in a prototype, but especially in testing or presenting, its sometimes not feasable to use actual text input. But you somehow need to show that text is being input somewhere.
Right now you can set the value of a text input on tap for example, but its instant, which is not convincing or understandable.
A cool way to show text being input, would be to have a "typewriter" animation type. It means that one letter after the other is revealed and it looks like someone is typing. You specify the overall length and it will look like its typing the text in that time.
Take a look at this, to see what I am talking about: https://css-tricks.com/snippets/css/typewriter-effect/
Thanks for considering.
ps: just tried a HTML widget with the HTML and CSS code from the website and it already kind of works, but I guess is a bit harder for multi-line. Is there a better way to author HTML widgets, with CSS and maybe even JS/jQuery?

Replies (1)

Victor Conesa ●

Take a look at this example https://www.dropbox.com/s/dq5e8nftx1mguw9/typewritereffect.vp?dl=0

Armin Seltz ●

Thanks for your reply. Interesting to see how you can concat inputs. I actually want to animate just text that I have written beforehand. So during a presentation or testing, you can click on a field and it triggers the animation.

eggroll ●

Sorry, Armin, just saw this. If you haven't already found a solution, I do this exact thing to simulate a login, with email and password populated simply by clicking on each of the input boxes. I use the "on Tap" event (my prototype is mobile), and my event looks as follows:

It continues until the complete text has been output.

So, for example, if you wanted to output "Hello World", the first "Set Value" sets the value to the first letter of the desired text ("H"), the second "Set Value" sets the value to the first and second letters of the text ("He"), and so on. My pauses, which create the simulated text entry effect, are set to 100ms, which you can obviously vary to taste.

Hope this makes sense and helps.

Cheers,

Tim

P.S. Clearly handling long passages of text this way would be extremely tedious, but it works fine for shorter segments. A time saver is to create and copy a combined pair that contains a "Set Value", with the value set to the entire text, and a "Pause", and then paste that combo once for every letter in your text. Then all you have to do is go into each "Set Value" and delete the characters that shouldn't yet appear in that step.