Here is a Typing Effect in javascript.

I could only implement a very simple one:

DynamicModule[{s = ""},
   If[Length[s] > 10, s = "", s = s <> "x"],
   TrackedSymbols :> {}, UpdateInterval -> 0.5]]]

How can I do that exactly the same?



typingEffect[str_String, secPerLetter_: 0.3] := 
   Clock[{0, StringLength@str, 1}, StringLength@str secPerLetter]]]

(thanks @SjoerdC.deVries)

So this gives an animation

typingEffect["hello my dear"]

Other effects can be implemented with the same idea, such as

typingEffect2[str_String] := 
       Mod[(First@#2 - 0.5)/StringLength@str + Clock[], 1]]] &, 
| improve this answer | |
  • $\begingroup$ as would my 3 years old son say: "but why?" ;-) $\endgroup$ – chris Nov 19 '12 at 17:48
  • $\begingroup$ @chris, I wouldn't know exactly what to explain to your 3 year old son :P. What part does he not understand? $\endgroup$ – Rojo Nov 19 '12 at 17:50
  • $\begingroup$ well that's the thing: it doesn't matter what I explain to him... He always comes up with that question! $\endgroup$ – chris Nov 19 '12 at 17:51
  • $\begingroup$ @chris, don't worry, he'll soon grow up like all of us and forget he never got his answer $\endgroup$ – Rojo Nov 19 '12 at 17:52
  • $\begingroup$ @Rojo, typing StringLength@str/.slen_:> and then slen twice takes just as many characters as simply typing StringLength@str twice, but is perhaps more confusing. $\endgroup$ – VF1 Nov 19 '12 at 18:22

Implementation with ScheduledTask. When the Type button is pushed, a scheduled task is started that increases the display length of the temporary string temp. It can be paused (Stop) and continued (Type again).

text = StringTake[ExampleData[{"Text", "LoremIpsum"}], 120]

temp = ""; task = None; n = 0;
Row@{Button["Type", If[task =!= None, RemoveScheduledTask@task]; 
   task = RunScheduledTask[
     If[n > StringLength@text, RemoveScheduledTask@task; n = 0, 
      temp = StringTake[text, n++]], 0.01]],
  Button["Stop", If[task =!= None, RemoveScheduledTask@task]]}

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.