Add this in seconds with the Boosters app, or install it manually with the guide below.
Add some interest to your page with a glitched text effect that animates text when the user hovers over it, or it comes into view. This is a simple, but cool effect for portfolios and tech sites when used in creative ways.
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.
For this Booster, attributes must be added to a text element. You can add any type of text element in Webflow and style it as you require. Review the table below to see the available attributes so you can decide on which ones are important for you. If you aren't sure how to add attributes in Webflow, you can learn more.
true or false
Simple on/off method for the animation
hover or view
Set the trigger to be on hover, or in view
forward or all
Scramble all letters at once, or move forward by each letter
Set how fast the scramble iterations are
Set how many scramble iterations are made
3. 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.
No-code content to your inbox
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
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.