Add GSAP Animations to your Webflow Project (2025)

Add beautiful GSAP animations to your Webflow project with one click.

June 17, 2025

Min Read

Resources

Peter B

Product & Development

@flowbase

Add GSAP Animations to any Webflow Project (2025)

In late 2024, Webflow announced an exciting development: an acquisition and an official integration with GSAP (GreenSock Animation Platform), the wildly popular animation library trusted by developers worldwide. While we eagerly anticipate how this will revolutionize interactions within the Webflow Designer, we didn’t want to wait to bring the magic of GSAP to the Webflow community.

That’s why we’ve teamed up with the brilliant minds at Codrops to bring Webflow users a huge collection of pre-made GSAP animations. From text hovers and reveals to stunning highlights, these animations are designed to elevate your projects and can be added instantly to any project with a single click.

Useful Links

No Code, No Complexity – Just Add Attributes

Our GSAP-powered animations have been simplified for Webflow users. There’s no need to write a single line of code or deal with complex technical setups. Using our Booster app, you can apply these animations with ease by simply adding attributes to your text elements. That means you can customise the colors, speed and more directly through attributes. You can also add the scripts and attributes manually and without our app if that’s more your style - all the information to do this is provided in the article below.

Lean and Efficient Code with Smart Tracking

The Booster app takes care of everything for you. With a single installation of the GSAP script, the app dynamically loads only the dependencies you need for your specific effect. This means your Webflow project stays lean, avoiding unnecessary bloat and ensuring fast loading times.

With the booster app all the customisation is directly made in Webflow

‍

1. GSAP Text Highlight Effects

Our GSAP text highlight effects offer truly unique and beautiful effects for any text element in Webflow. These animations work best on headlines or attached to text spans within your text content. Some effects require additional attributes to customize features such as text color or background color. Refer to the details below for the specific attributes needed for different effects.

Install GSAP Highlight Scripts:

To get started, include the following scripts in the <head> of your Webflow custom code settings. Be sure to include only one version of the script, even if you use multiple effects

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

‍

Text Highlight Attributes (Default):

The core attributes listed below should be applied 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.

Required:

fb-text-highlight = true Default: true
fb-text-highlight-type = 1-12 Default: 1

Optional:

fb-text-highlight-offset = 0-100 **Default: 0
Controls the position on the page where the effect triggers.
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 direction, or forward only

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-border-radius = px value Default: 8px
Optional class to adjust the highlight border radius
fb-text-highlight-inset = px value Default: -2px -8px
Optional class to adjust the position and size 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-border-radius = px value Default: 8px
Optional class to adjust the highlight border radius
fb-text-highlight-inset = px value Default: -2px -8px
Optional class to adjust the position and size 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-border-radius = px value Default: 8px
Optional class to adjust the highlight border radius
fb-text-highlight-inset = px value Default: -2px -8px
Optional class to adjust the position and size 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: #49af42

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
fb-text-highlight-class = class-name
fb-text-highlight-bg-color = color (rgb | hex | name) Default: #6dd7e6
fb-text-highlight-shadow-color = color (rgb | hex | name) Default: #ffdbf5
fb-text-highlight-inset = px value Default: -2px -8px
Optional class to adjust the position and size of the background element

‍

2. GSAP Text Hover Animations

Our GSAP text hover animations offer engaging and unique hover effects for any text element in Webflow. These animations work best on CTA elements like buttons or nav links. Some effects require additional attributes to customize features such as text color or background color. Refer to the details below for the specific attributes needed for different effects.

Install GSAP Text Hover Scripts:

To get started, include the following scripts in the <head> of your Webflow custom code settings. Be sure to include only one version of the script, even if you use multiple effects

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

‍

Text Hover Attributes (Default):

Required:

fb-text-hover = true Default: true
fb-text-hover-type = 1-5 Default: 1

Optional:

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

Effect #1: Text Stagger Flow

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

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-class = class-name
Optional class that can be applied to the background element
fb-text-hover-cursor-color = color (rgb | hex | name) Default: #FFFFF
Optional class 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-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: #FFFFF
Optional class to adjust the background color on hover
fb-text-hover-inset = px value Default: -2px -8px
Optional class to adjust the position and size 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-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-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: #FFFFF
Optional class to adjust the background color on hover
fb-text-hover-inset = px value Default: -2px -8px
Optional class to adjust the position and size of the background element

‍

3. GSAP Text Reveal Effects

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.

GSAP Reveal Scripts:

To get started, include the following scripts in the <head> of your Webflow custom code settings. Be sure to include only one version of the script, even if you use multiple effects

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

‍

Text Reveal Attributes (Default):

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.

Required:

fb-text-reveal = true Default: true
fb-text-reveal-type = 1-5 Default: 1

Optional:

fb-text-reveal-offset = 0-100 Default: 0
Controls the position on the page where the effect triggers.

Effect #1: Blur Reveal

Adds a blur reveal effect across 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

Did you find this helpful? 💕

Your support means the world to us! In just 10 seconds, you can make a big difference:

Join our community Discord Channel.
Download our Free Webflow Booster App.
Share what you built with us on Twitter! We re-post to thousands!

Thank you for being awesome! 🌟

Add GSAP Animations to your Webflow Project (2025)

Add GSAP Animations to any Webflow Project (2025)

1. GSAP Text Highlight Effects

Effect #1: Warp and Bend

Effect #2: Shimmer Animation

Effect #3: Custom Highlight Colors

Effect #4: Ripple Animation

Effect #5: Smooth Background Block

Effect #6: Left-to-Right Reveal

Effect #7: Staggered Top Fill

Effect #8: Falling Text

Effect #9: Disappearing Text Replacement

Effect #10: Sparkle Animation

Effect #11: Staggered Fade-In Duplicates

Effect #12: Space-Age Line Highlights

2. GSAP Text Hover Animations

Effect #1: Text Stagger Flow

Effect #2: Typewriter Blink Cursor

Effect #3: Typewriter Background Fill

Effect #4: Random Character Color

Effect #5: Background Fill

3. GSAP Text Reveal Effects

Effect #1: Blur Reveal

Effect #2: Soft Blur Reveal

Effect #3: Line Divider Reveal

Effect #4: Slanted Blur Reveal

Effect #5: Color Text Reveal

Did you find this helpful? 💕

Recommended Articles

Introducing the Flowbase Icon Library

Top 20 Free Fonts for UI Designers 2025

Introducing the Webflow Boosters App

Add GSAP Animations to your Webflow Project (2025)

Add GSAP Animations to any Webflow Project (2025)

1. GSAP Text Highlight Effects

Effect #1: Warp and Bend

Effect #2: Shimmer Animation

Effect #3: Custom Highlight Colors

Effect #4: Ripple Animation

Effect #5: Smooth Background Block

Effect #6: Left-to-Right Reveal

Effect #7: Staggered Top Fill

Effect #8: Falling Text

Effect #9: Disappearing Text Replacement

Effect #10: Sparkle Animation

Effect #11: Staggered Fade-In Duplicates

Effect #12: Space-Age Line Highlights

2. GSAP Text Hover Animations

Effect #1: Text Stagger Flow

Effect #2: Typewriter Blink Cursor

Effect #3: Typewriter Background Fill

Effect #4: Random Character Color

Effect #5: Background Fill

3. GSAP Text Reveal Effects

Effect #1: Blur Reveal

Effect #2: Soft Blur Reveal

Effect #3: Line Divider Reveal

Effect #4: Slanted Blur Reveal

Effect #5: Color Text Reveal

Did you find this helpful? 💕

Recommended Articles

Introducing the Flowbase Icon Library

Top 20 Free Fonts for UI Designers 2025

Introducing the Webflow Boosters App

Join our community and claim free products

Join our community and
claim free products