Animate text input (typewriter)

Armin Seltz shared this idea 3 months ago
Under Consideration

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?

Comments (2)

photo
1

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.

photo