Create the Typewriter Effect with JavaScript

This is a clever bit of code that allows you to create and customize your own typewriter effect in Webflow using attributes.

How to use this code:

First, copy and paste the script above into the page settings before the body tag in your Webflow project.

Next, you'll want to highlight the text that you want the effect on, and wrap it in a span. Give that span a class of "typer".

Here's and example:

‍

After that, use the spacebar to create another blank space (right next to the span with a class of "typer") and wrap that in a span. Give it a class of "cursor", and an id of "first-typer".

‍

Okay great - we've set up the classes, now it's time for the attributes.

Here's a list of the data attributes we can use to customize our typewriter effect:

Attributes for the class "typer"

• data-words ___ A comma-delimited list of words to be typed. Example: 'Orange,Apple,Banana,Grape'
• data-delay ___ The time delay (in milliseconds) between typed characters. Default: 200
• data-loop ___ The number of repetitions through the word set, or a Boolean representing whether to loop infinitely or once. Default: true (loop infinitely)
• data-delete-delay ___ The time delay (in milliseconds) before a completed word is de-typed. Default: 800
• data-colors ___ A comma-delimited list of colors to cycle through. One color per word. Default: black Example: 'Orange,Red,Yellow,Purple' (you can also use hex codes to get the exact color you want Example: '#ff0000,#00ff00,#ef51d0')

Attributes for the class "cursor"

• data-cursor-display ___ What character the cursor is Default: _   (Some prefer to use this character |)

So how does this work then? Simple:

Just click on the element we're adding these attributes to, and go to the settings panel for that element. There you should see a section that says "Custom Attributes". Create a new attribute for each thing you want to customize. The data attribute goes in the top portion, and within the equals sign goes the value. For example:

data-words="Developer,Expert,Designer" - That would tell the code to write those words for you.

You would do this for any/all of the parts you want to customize.

Once you're finished, publish the website to your Webflow.io or custom domain and that's it - a lightweight typewriter effect!

Here's a video of someone implementing it in Webflow.

Here's the typer.js original documentation.