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.