Webflow Attribute Booster

Webflow GSAP Text Highlight

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

Preview Booster

Install with Boosters™

Getting Started

Add a GSAP highlight effect to any text element in seconds

Transform your Webflow text elements with GSAP Highlight 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 Highlight 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 Highlight] --> 
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-gsap-text-highlight@1/dist/gsap-text-highlight.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

To animate your text element (or span), simply add the following attributes. Any effect-specific attributes will be detailed under their respective effect headings below.

Required Attributes*

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

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

Optional Attributes

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

fb-text-highlight-offset = 0-100 Default: 0
Controls how much of the element (in percentage) is visible in the viewport to trigger the effect.
fb-text-highlight-speed = 0.5-2 Default: 1
Adjusts animation duration: lower values are faster, higher values are smoother.
fb-text-highlight-once = true | false Default: false
Play the animation only once when scrolled into view.
fb-text-highlight-direction = both | forward Default: both
Play the animation when scrolling in both directions, or forward only.

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: Warp and Bend

This effect dynamically warps and bends text into position, perfect for short snippets or emphasizing specific phrases. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 1

Effect #2: Shimmer Animation

Adds a subtle shimmer across the text for a sleek and modern effect. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 2

Effect #3: Custom Highlight Colors

Highlight text with customizable colors and shadows. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 3
fb-text-highlight-color-end = color (rgb | hex | name) Default: #d686c1
fb-text-highlight-shadow-color = color (rgb | hex | name) Default: #ffdbf5

Effect #4: Ripple Animation

Applies a ripple effect with dual-color customization. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 4
fb-text-highlight-color-end = color (rgb | hex | name) Default: #49af42
fb-text-highlight-color-end-alt = color (rgb | hex | name) Default: #4252af

Effect #5: Smooth Background Block

Adds a smooth background fill around text. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 5
fb-text-highlight-multi-line = true | false Default: false
Optional attribute that allows for multi-line text
fb-text-highlight-class = class-name
Optional class that can be applied to the background element
fb-text-highlight-bg-color = color (rgb | hex | name) Default: #6a5ace
fb-text-highlight-bg-radius = value (px | rem | em | %) Default: 8px
Optional attribute to adjust the highlight border radius
fb-text-highlight-bg-inset = value (px | rem | em | %) Default: -2px -8px
Optional attribute to adjust the position of the background element

Effect #6: Left-to-Right Reveal

Combines text and background animation with a smooth left-to-right reveal. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 6
fb-text-highlight-multi-line = true | false Default: false
Optional attribute that allows for multi-line text
fb-text-highlight-class = class-name
Optional class that can be applied to the background element
fb-text-highlight-bg-color = color (rgb | hex | name) Default: #dc764c
fb-text-highlight-bg-radius = value (px | rem | em | %) Default: 8px
Optional attribute to adjust the highlight border radius
fb-text-highlight-bg-inset = value (px | rem | em | %) Default: -2px -8px
Optional attribute to adjust the position of the background element

Effect #7: Staggered Top Fill

Fills text from the top with a staggered animation. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 7
fb-text-highlight-multi-line = true | false Default: false
Optional attribute that allows for multi-line text
fb-text-highlight-class = class-name
Optional class that can be applied to the background element
fb-text-highlight-bg-color = color (rgb | hex | name) Default: #dc764c
fb-text-highlight-bg-radius = value (px | rem | em | %) Default: 8px
Optional attribute to adjust the highlight border radius
fb-text-highlight-bg-inset = value (px | rem | em | %) Default: -2px -8px
Optional attribute to adjust the position of the background element

Effect #8: Falling Text

Each word falls into view for a playful animation style. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 8
fb-text-highlight-color-end = color (rgb | hex | name) Default: #c3c58c

Effect #9: Disappearing Text Replacement

Replaces original text with a highlighted version while fading the original characters into a smooth smoke-like effect. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 9
fb-text-highlight-color-end = color (rgb | hex | name) Default: #a86088

Effect #10: Sparkle Animation

Applies a random sparkle or glow to individual characters of the text. Perfect for playful or celebratory designs. You can specify multiple colors separated by commas. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 10
fb-text-highlight-colors = colors seperated by comma (rgb | hex | name) Default: #ff0000

Effect #11: Staggered Fade-In Duplicates

Creates duplicates of the text and animates them into view with a staggered fade effect. Great for creating a layered, dynamic look. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 11
fb-text-highlight-duplicates = number > 1 Default: 8
fb-text-highlight-color-end = color (rgb | hex | name) Default: #fff

Effect #12: Space-Age Line Highlights

Adds animated lines around the text, combined with a blur effect through the text for a futuristic aesthetic. Ideal for tech-inspired designs or eye-catching headers. Preview Effect

fb-text-highlight = true
fb-text-highlight-type = 12
fb-text-highlight-multi-line = true | false Default: false
Optional attribute that allows for multi-line text
fb-text-highlight-class = class-name
fb-text-highlight-bg-color = color (rgb | hex | name) Default: #6dd7e6
fb-text-highlight-bg-inset = value (px | rem | em | %) Default: 0px -4px
Optional attribute to adjust the position of the background element
fb-text-highlight-shadow-color = color (rgb | hex | name) Default: #ffdbf5

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