Streaming live at 10am (PST)

Typing animation


#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


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

#5

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:


#6

Thank you, amazing! This works!

One additional question if you don’t mind: 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 again


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

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


#8

Thanks @J_Canan, that fixed it…! I had indeed forgotten to rename the id on the new span.


#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


#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


#15

Not a problem! Anytime!