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:
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.
Add this booster + more with the official webflow application.
Join our community and
claim free products
No Spam. Only sweet content and updates of our products.
Join 55,000+ other creators in our community
