Typewriter Text Effect

A Bit Tricky
Typewriter Text Effect

This is a commonly used effect on the headers of homepages to change between different features or target audiences that the product or service is for. You can set as many different strings on text that you want, and make the strings as long as you want.

You can add this globally if that suits, but I would reccommend just adding it to just the specifc page you want to use it on.

Here's the code to put before the </body> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
<script>
var typed = new Typed(".typed-words", {
strings: ["Sentence 1", "Sentence 2", "Sentence 3"],
typeSpeed: 80,
backSpeed: 40,
backDelay: 2000,
startDelay: 500,
loop: true,
showCursor: false,
cursorChar: "|",
attr: null,
});
</script>

With this code, you'll want to add in a empty div with the class "typed-words", and then put it on your page where you want the text to show.

Feel free to preview it first in your staging domain (yourwebsite.webflow.io) to test that it is working, and then you can change the strings to whatever you want them to be. You can then play around with the settings to change speed.

Download Assets
See an Example Website

Other Code Snippets

Learn the Secrets to Supercharge Your Webflow Website

The newsletter with 0% spam, and 110% good tips and tricks.

Nice! You're in the loop. Talk soon.
Oops! Something went wrong while submitting the form.