Streaming live at 10am (PST)

How to make 'text showing up as texttyping'

#1

hello I want to show text as a texttyping effect with webflow… is this possible, anybody already tried?
look to this website to see what I want to make:

Thanks
Karel

#2

Yes, it is possible, you have to use custom code:

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

<script>
	var typed = new Typed('#typed-text', {
    strings: ['I am a Certified Scrum Product Owner'],
    typeSpeed: 75,
    backSpeed: 25,
    loop: true,
    cursorChar: '_',
    backDelay: 1000,
    startDelay: 1000
  });
  
  	var typed2 = new Typed('#typed-2', {
    strings: ['', 'content', 'assets', 'time'],
    typeSpeed: 75,
    backSpeed: 50,
    loop: true,
    backDelay: 1000,
    startDelay: 500
  });
</script>

Put the code Before </body> tag

Body #typed-text is the div in design dashboard where you can make the text settings, font, size, color etc.

Example https://typing-webfow.webflow.io/

Or you can use this project as a reference: https://webflow.com/website/Typing-Text-Typedjs

I hope it will help :slight_smile:

#3

Thanks I tried, but how to do more rows of text… ?
image


image

Between the text a wait, and the text may not disappear.
I found code: https://github.com/mattboldt/typed.js/


Thanks to help me to make 3 text-divs after each other on a different place coming up.

Karel

my preview https://preview.webflow.com/preview/karelrosseel-text-typed-js?utm_source=karelrosseel-text-typed-js&preview=bac3086362675cdb24966ebb852e5a28

#4

check also the effect here: yours is better… but how is this effect made?