Typing animation

Community resources Webflow Tips
1

Hi,

This question was asked back in 2015 and got a few quality answers, unfortunately one of the links provided back then is no longer up to date and the question was closed hence I am asking the question again.

I’d like to know how to animate text (i.e. I’d like the page to type out a headline, select it, delete it, and then write a new headline), and apparently it is as simple as copying/pasting a few custom code lines per the answer provided back then (see link below).

Unfortunately, the JS link that was included in the code (https://raw.githubusercontent.com/mattboldt/typed.js/master/js/typed.js) is no longer active.

Could anyone advise whether an updated link exists / can be provided? As you’ve probably gathered I have no coding experience so any simple answer would be appreciated!

Thanks

PS: Link to original question: Typing Animation in Webflow

1 Like
2

@bkmat maybe this can help you

3

Thanks but I don’t think this does the trick. This only enables letters to appear at different points in time.

4

Use the official cdns

Your link from the start was wrong (this is very famous js libary - the project still live & update - use the officials cdns)

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

Hey, @bkmat I made a cloneable project you can use.

Clone: https://webflow.com/website/Typing-Text-Typedjs?s=typedjs

typedjs
typedjs1680×948 1020 KB

Here is the code:

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

    <script>
    	var typed4 = new Typed('#typed-text', {
        strings: ['Look ma I\'m typing.', 'This is awesome!', 'Let\'s do it again. Weee!'],
        typeSpeed: 75,
        backSpeed: 25,
        bindInputFocusEvents: true,
        loop: true,
        cursorChar: '_',
        backDelay: 1000,
        startDelay: 1000
      });
    </script>

Just replace the strings with your own text/sentences. Be sure if you have a " ’ " in a sentence you are writing like “Hey I’m…” to include a backslash before the " ’ " so it doesn’t break the code The symbol with the | key underneath the delete button). Hope this helps make things easy! :slight_smile:

12 Likes
6

Thank you, this works.

One additional question: how can I apply this to one word within a sentence, rather than have it as a whole sentence on its own? I’ve tried creating a text span for a specific word (and naming it “typed-text”), but this doesnt seem to work?

Thanks

7

@bkmat I added another variation so you can see what it looks like with typed text between other text as you mentioned. You can view it live here: http://typedjs.webflow.io/

It is the same cloneable link. You will just have to clone it again.
Clone Link: https://webflow.com/website/Typing-Text-Typedjs

I bet what you forgot to do was either two things:

  1. Forget to rename the id on the new span or clear the id from the entire text.
  2. Forgot to rename the new variable (like the photo below).

21%20PM
21%20PM3360×1898 457 KB

Either way I would suggest thoroughly reading through the documentation on GitHub that Matt Boldt has supplied as it is really useful! Hope this clears that up!

-Noah

2 Likes
8

Thanks @Noah-R, that fixed it.I had indeed forgotten to rename the id on the new span.

1 Like
9

Awesome! Glad that took care of it!

10

The typeface I am using (bebas) pushes the words close together. do you know how to add additional spacing between the words?

11

Can you share your read-only link please? And maybe a screen shot to help me out… Thanks!

12

https://preview.webflow.com/preview/dougs-spectacular-project-8f1ed7?utm_source=dougs-spectacular-project-8f1ed7&preview=75ac0bb219bb52e1a1a67d7197d845b8

Capture
Capture1920×1080 153 KB

13

Can you try adding any of these between the words where you want the spaces to show up:

  • Adds One space - &nbsp;
  • Adds Two spaces - &ensp;
  • Adds Four spaces - &emsp;

So it would look something like this:
strings: ['What &nbsp; can &nbsp; brown &nbsp; do &nbsp; fo', 'What &nbsp; can &nbsp; we &nbsp; do &nbsp; for &nbsp; you?'],

Let me know if that helps :slight_smile:

14

That worked man, thanks so much

1 Like
15

Not a problem! Anytime!

17

Hey Noah,
I implemented this script into my webflow portfolio project. It’s working the way i want it to however whenever the type animation rolls out the page would shift down and up again. Do you have a solution for this?

This is my website link: https://graces-portfolio-40fd26.webflow.io/

50%20PM
50%20PM2516×1258 388 KB

Thanks a lot!

18

Hi Noah !
Thank you for this. I tried several times but its not working :frowning:
I really really want this animation !!:slight_smile:
I’ve put your code in the footer code area and put typed-text class on my heading.
But nothing is happening… Can you help me ? Here is my site : https://nashmy-77553b.webflow.io/
Thank you very much !!

20

Do you have Zoom? Would make it much easier :slight_smile:

1 Like
21

So sorry I missed this… are you still having trouble with it?

22

Yeahhhh :slight_smile: thank you so much
Meeting ID : 557 298 4305