How to create typewriter effect

Design help Animations & Interactions
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)

2 Likes
2

Hi

Check this javascript out: Typewriter JS - A simple yet powerful native javascript plugin for a cool typewriter effect.

or

Udesly: Typewriter - Udesly

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:

2 Likes
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.

7

Hey thank you for this awesome help!

I’m trying to make this effect work on this intro text: (https://preview.webflow.com/preview/pennyblack?utm_medium=preview_link&utm_source=designer&utm_content=pennyblack&preview=8c26ce8fb5ab621f4d3ddcf431c6d3ad&workflow=preview) but having trouble getting it to work cleanly… perhaps I’ve designed the div blocks/text blocks incorrectly?!

Sorry, I’m not great with code so may have made an error in adjusting that to read ‘Hi, we’re Penny Black’…

Many thanks for any help here,
Hamish

8

Two more resources (typedJS) to make the list complete :slight_smile:

1 Like