Streaming live at 10am (PST)

How to create typewriter effect

http://type-effect.webflow.io/

I seen this, but where is the tutorial on how to create it?


Here is my public share link: LINK
(how to access public share link)

1 Like

Hi

Check this javascript out: https://safi.me.uk/typewriterjs/

or

Udesly: https://www.udesly.com/shop/typewriter/

Edit: sorry you wanted a tutorial.

You can also check > https://webflow.com/website/Typing-Text-Typedjs

Clone and explore. Here’s the js script he’s using

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

<script>
	var typed = new Typed('#typed-text', {
    strings: ['Look ma I\'m typing.', 'This is awesome!', 'Let\'s do it again. Weee!'],
    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>

Piter :webflow_heart:

2 Likes

Thanks for the Javascript, how do i add JS to my website?

Thanks for sharing this, i open the Webflow project, but i really have no idea how you’ve done it

In the project, when i click preview mode it doesn’t do typewriting effect.

More importantly, i cann’t see what changes you’ve made on your text to get this effect.

So i looked in typography, in effects, etc… and nothing was there to show you did anything special,

So i’m still unsure how your getting this effect.

Here you go, check out the way of adding custom code into your projects.