Webflow Attribute Booster

Webflow GSAP Text Hover

Capture user attention with dynamic and beautiful GSAP text hover effects. No code, just simple attribute solutions for all designers and developers.

Preview Booster

Install with Boosters™

Getting Started

Add a GSAP hover effect to any text element in seconds

Transform your Webflow text elements with GSAP Hover Effects in seconds. These effects are ideal for drawing attention to important content, creating dynamic experiences, and adding that extra touch of creativity to your design.

These GSAP Hover Boosters can be added effortlessly using our Webflow Boosters App or manually by following the instructions below.

Install Instructions ✍️

1. Add the booster scripts to your project.

To enable the GSAP animations, you'll need to add the script to your Webflow project. Follow the instructions below to add the scripts to your project:

Copy the following script, or install it with the Free Boosters App
Paste it into the <head> section of your Webflow custom code settings. (Need help with custom code? Learn more here).

<!-- Flowbase Booster [Text Hover] --> 
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-gsap-text-hover@1/dist/gsap-text-hover.min.js" type="text/javascript"></script> 
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-gsap@3/dist/gsap.min.js" type="text/javascript"></script>

2. Apply Attributes to Your Text Elements

The core attributes listed below should be appled to all effects to initialize them and select the effect type. Optional attributes can control specific features of the animation, and if they aren’t added we will revert to the defaults. Additional effect-specific attributes are detailed below the effects.

These attributes are essential and must be applied to the text element you want to animate:

Required Attributes*

These attributes are essential and must be applied to the text element you want to animate:‍

fb-text-hover = true Default: true
Enables the highlight effect on the text element.
fb-text-hover-type = 1-5 Default: 1
Choose from 5 animation types for different visual styles.

Optional Attributes

These attributes are optional; if not specified, their default values will apply:

fb-text-hover-speed = 0.5-2 Default: 1
Adjusts animation duration: lower values are faster, higher values are smoother.

3. Select Your Effect

Browse through the effects below to preview and choose the one that fits your design. Some effects include specific attributes for customization, such as color and other elements. You’ll find these unique attributes detailed alongside each effect.

Effect #1: Text Stagger Flow

This effect staggers your text for a smooth and seamless hover transition. Preview Effect

fb-text-hover = true
fb-text-hover-type = 1
fb-text-hover-color-end = color (rgb | hex | name) Default: currentColor

Effect #2: Typewriter Blink Cursor

Add a stylish typewriter animation with a customisable trailing blinking cursor. Preview Effect

fb-text-hover = true
fb-text-hover-type = 2
fb-text-hover-class = class-name
Optional class that can be applied to the background element
fb-text-hover-cursor-color = color (rgb | hex | name) Default: currentColor
Optional attribute to adjust the color of the blinking cursor

Effect #3: Typewriter Background Fill

Adds a background fill effect along with a text scramble. Preview Effect

fb-text-hover = true
fb-text-hover-type = 3
fb-text-hover-multi-line = true|false Default: false
Optional attribute that allows for multi-line text
fb-text-hover-class = class-name
Optional class that can be applied to the background element
fb-text-hover-bg-color = color (rgb | hex | name) Default: #fff
Optional attribute to adjust the background color on hover
fb-text-hover-bg-inset = value (px | rem | em | %) Default: -2px -4px
Optional attribute to adjust the position of the background element

Effect #4: Random Character Color

Apply a random color to each character in the text string. Colors can be added to the attribute and seperated by a comma. Preview Effect

fb-text-hover = true
fb-text-hover-type = 4
fb-text-hover-colors = colors separated by comma (rgb | hex | name) Default: '#6ac9ff, #2dde68, #def54f, #fa7328’

Effect #5: Background Fill

Applies a background fill effect along with a text scramble. Preview Effect

fb-text-hover = true
fb-text-hover-type = 5
fb-text-hover-multi-line = true|false Default: false
fb-text-hover-class = class-name
Optional class that can be applied to the background element
fb-text-hover-bg-color = color (rgb | hex | name) Default: rgba(229, 222, 204, 0.1)
Optional attribute to adjust the background color on hover
fb-text-hover-bg-inset = value (px | rem | em | %) Default: -2px -4px
Optional attribute to adjust the position of the background element

4. Publish and Test

With the necessary attributes added to your text element and the scripts installed, you're all set to publish your site. Start by publishing your Webflow project to the staging domain, then test to ensure the animation is working as expected.

If you encounter any issues, open the Chrome Developer Console to check for errors or warnings that might help pinpoint the problem.

5. Install with the app

Easily add these effects—and more—directly using our Booster app. The app streamlines the process by managing and installing scripts and attributes for you. Plus, it keeps your setup up-to-date with automatic updates whenever we release new scripts or effects.

You can download the Booster app for free from the Webflow App Store.

6. Licence

These effects are available for both personal and commercial use. They are provided to you free of charge, with modifications made to the original code from Codrops and GSAP. The respective licenses are as follows:

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! 🌟

Boosters App

Add this booster + more with the official webflow application.

Install Booster Application

*Official Webflow booster application