Webflow Booster

Webflow Typewriter Animation

Add a typewriter effect to your Webflow projects. Communicate various messages with a cool typewriter effect

Add this in seconds with the Boosters app, or install it manually with the instructions below.

Getting Started 🫧

Add a typewriter animation to your Webflow sites in seconds. Follow the simple instructions below, or install the official Boosters App for the most simple install and setup possible.

Install Instructions ✍️

1. Add the booster script to your project.

Copy the script source listed below, and add it to the <head> tag of your custom code settings. If you aren't sure about custom code in Webflow, you can click here to learn more.

<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-typewriter@1.0/dist/typewriter.min.js"></script>
2. Add an element to wrap your typewriter text

Firstly, add a div-block to wrap your typewriter text. Inside this wrapper is where we will add our text, you can add as many text elements inside this wrapper. Add the following attributes to this wrapper as shown in the list and image below.

  • fb-typewriter = true
  • fb-typewriter-speed = 100
  • fb-typewriter-delay = 300
  • fb-typewriter-loop = true
3. Add the text elements into the wrapper

You're pretty much done! Now you just need to add your text strings inside the wrapper we created in the step above. You can add as many text strings as you like, the important thing is that one of them is visible, and the others are hidden. We recommend just creating a class for example 'Typewriter Text' and then copying this and creating a class 'Typewriter Text Hidden'. That's basically it, set your hidden strings to display:none, and let the magic of the Booster to the heavy lifting.

4. Here is the full list of attributes you can use:
Attribute Name Attribute Value Description
fb-typewriter true or false The primary attribute, and an on/off toggle
fb-typewriter-speed eg. 100 Specify the speed that the text is written at
fb-typewriter-delay eg. 300 Specify the delay between new words/strings
fb-typewriter-loop true or false Specify if you want the typewriter effect to loop

‍

5. Save time and set it up with our free application (Optional)

Of course if you don't want to follow this guide, you can use our Booster app and add this to your project in seconds.

‍

6. Publish & Test 🚀

Once you've followed the steps above and have added both the script and the attributes, you can publish your page. View your live staging domain to test the Booster in action.

Boosters App

Add this booster + more with the official webflow application.

Install Booster Application
*Official Webflow booster application