Streaming live at 10am (PST)

How to create typewriter effect

#1

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
#2

Hi

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

or

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

Edit: sorry you wanted a tutorial.

#3

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:

1 Like
#4

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

#5

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.

#6

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