Getting Started 📇
Easily add a typewriter animation to your Webflow site in seconds, simulating a typing effect that transitions smoothly between multiple words.
This Booster can be added directly into your Webflow projects with our official Webflow App. You can install the official Boosters App. The Boosters app will add all the attributes and elements you need directly in your Webflow project.
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.
<!-- Flowbase Booster [Typewriter] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-typewriter@1.0.1/dist/typewriter.min.js" type="text/javascript"></script>
2. Add the typewriter wrapper
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.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
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
