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).
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!
<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!
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?
@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/
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!
Can you try adding any of these between the words where you want the spaces to show up:
Adds One space -
Adds Two spaces -  
Adds Four spaces -  
So it would look something like this: strings: ['What can brown do fo', 'What can we do for you?'],
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?
Hi Noah !
Thank you for this. I tried several times but its not working
I really really want this animation !!
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 !!
