Webflow Attribute Booster

Webflow GSAP Text Reveal

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 reveal effect to any text element in seconds

Our GSAP text reveal effects offer advanced animation effects for any text element in Webflow. These effects are perfect for bodies of text, and provide a subtle fade and reveal as they are scrolled into view.

These GSAP Reveal 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 Reveal] --> 
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-gsap-text-reveal@1/dist/gsap-text-reveal.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-reveal = true Default: true
Enables the reveal effect on the text element.
fb-text-reveal-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-reveal-offset = 0-100 Default: 0
Controls how much of the element (in percentage) is visible in the viewport to trigger the effect.

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: Blur Reveal

Adds a blur reveal effect accross the whole text as its scrolled in view. Preview Effect

fb-text-reveal = true
fb-text-reveal-type = 1

Effect #2: Soft Blur Reveal

Adds a blur to the whole text, and reveals it as its scrolled in view. Preview Effect

fb-text-reveal = true
fb-text-reveal-type = 2

Effect #3: Line Divider Reveal

Draws a soft line for each line of text and then reveals it as its scrolled in view . Preview Effect

fb-text-reveal = true
fb-text-reveal-type = 3

Effect #4: Slanted Blur Reveal

Applies a slanted text effect and a blur to reveal it as its scrolled in view. Preview Effect

fb-text-reveal = true
fb-text-reveal-type = 4

Effect #5: Color Text Reveal

Apply a custom color over the base color when the element scrolls into view. Preview Effect

fb-text-reveal = true
fb-text-highlight-type = 5
fb-text-reveal-color-end = color (rgb | hex | name) Default: currentColor

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