Streaming live at 10am (PST)

Typing animation

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

@bkmat maybe this can help you

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

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

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

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

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:

10 Likes

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

@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).

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

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

1 Like

Awesome! Glad that took care of it!

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

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

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

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:

That worked man, thanks so much

1 Like

Not a problem! Anytime!

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/

Thanks a lot!

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 !!

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

1 Like

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

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