This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Edward Sanchez
Posted Aug 29 - Read on Facebook

Any suggestions on how to simulate text being typed?

18 Comments

Mike Feldstein

You'll want to set the .html of a layer to the string, one letter at a time, separated by a delay. You can try this: https://gist.github.com/msfeldstein/af29b3499c9ba8267eb4

George Kedenburg III

Here's a working codepen: http://codepen.io/gk3/pen/rAJgK

Edward Sanchez

Woop! Thank you!

Andreas Wahlström

it might be nice to add some randomness to the delay to make it more realistic. eg. Math.random()*40+50

Edward Sanchez

Yeah Andreas, was thinking that, good solution!

George Kedenburg III

Andreas / Edward, I messed with that but I ran into letters being typed out of order. Didn't have time to figure out a fix :)

Andreas Wahlström

George Kedenburg III try Mike's solution. think it should work.

Edward Sanchez

lol, just had the same problem as you George Kedenburg III

Edward Sanchez

This does work! Thanks!
http://www.codeshare.io/3NsLS

Mike Feldstein

awesome, and that solution should be more tolerant of random timings, since it doesn't queue up the next character until the current one is typed

George Kedenburg III

Good call! I updated mine with a global timer so it works now as well http://codepen.io/gk3/pen/rAJgK

Edward Sanchez

I also replaced typeCharacter() with Utils.delay(2, typeCharacter), so it starts 2 seconds after the Click event.

Kevin Cannon

Interesting approach with the delay. You can also use the Interval function. I"m doing something similar now to simulate a loading loop. Here you can see a basic Interval example:
http://pastebin.com/L4Ug9z3P

Nick Bewley

Awesome. Any ideas of how to add a cursor to this?

Edward Sanchez

cursor meaning the blinking thing?

Nick Bewley

Edward Sanchez yes. Any thoughts?

Edward Sanchez

if isDragging==false
string = "Edward"
index = 0
typeCharacter = () ->
if isTyping==true
Name.html = string[0..index]+"|"
index++
if index < string.length
setTimeout typeCharacter, Math.random()*400+50
else
isTyping=false
Utils.delay(2, typeCharacter)

Edward Sanchez

I added +"|" to the end of the html string - it doesn't blink, but that was ok for my purposes.

Read the entire post on Facebook