Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Typewriter effect in html Canvas with a dynamic text box

Explorer ,
Jun 17, 2019 Jun 17, 2019

I want a create a typewriter text animation on effect like this https://typeitjs.com/  in canvas.

I have been searching online for a long time and just can't find an answer... if anyone has an idea I would love to hear from you!

5.1K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jun 17, 2019 Jun 17, 2019

use the ticker's framerate or interval. eg,

createjs.Ticker.framerate=10;

(but i suspect that will affect your entire projects framerate).  if that's not a problem, use it or, at least, try it.

if it's a problem, use setItnerval:

var s = 'this is your text';

var F = f.bind(this);

var fI;

clearInterval(fI);

fI=setInterval(F,400);

function f(e){

if(this.tf.text.length<s.length){

this.tf.text+=s.charAt(this.tf.text.length);

} else {

clearInterval(fI);

}

}

Translate
New Here ,
Oct 10, 2021 Oct 10, 2021

You made this in 2019 and I just want to say thanks!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Mar 10, 2022 Mar 10, 2022

Hello kglad, 

 

Sorry, I posted this question in the wrong place.  Thanks so much for this information.  I am not good at coding, however, I was able to incorporate this into my Animate file without a problem.  I really appreciate your assistance. 

 

However, I do have one question.  I tried speeding the typing effect up by changing the }.bind(this), 1000 / (cps ? cps : 12)); as well as the framerate in my document. 

 

Will you please tell me how to speed up the effect?  I spent a lot of time trying to figure it out for myself, but I just can't.   I will be extremely grateful for your patience and assistance. 

 

Sincerely, 

Terri

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines