Add GSAP Animations to your Webflow Project (2025)
Add beautiful GSAP animations to your Webflow project with one click.
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
- Start using GSAP with the Boosters App
- View Booster Documentation
- Preview GSAP Demos
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.
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=trueDefault: truefb-text-highlight-type=1-12Default: 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-2Default: 1- Adjusts animation duration: lower values are faster, higher values are smoother.
fb-text-highlight-once=true | falseDefault: false- Play the animation only once when scrolled into view
fb-text-highlight-direction=both | forwardDefault: 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=truefb-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=truefb-text-highlight-type=2
Effect #3: Custom Highlight Colors
Highlight text with customizable colors and shadows. Preview Effect
fb-text-highlight=truefb-text-highlight-type=3fb-text-highlight-color-end=color (rgb | hex | name)Default: #d686c1fb-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=truefb-text-highlight-type=4fb-text-highlight-color-end=color (rgb | hex | name)Default: #49af42fb-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=truefb-text-highlight-type=5fb-text-highlight-multi-line=true | falseDefault: 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: #6a5acefb-text-highlight-border-radius=px valueDefault: 8px- Optional class to adjust the highlight border radius
fb-text-highlight-inset=px valueDefault: -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=truefb-text-highlight-type=6fb-text-highlight-multi-line=true | falseDefault: 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: #dc764cfb-text-highlight-border-radius=px valueDefault: 8px- Optional class to adjust the highlight border radius
fb-text-highlight-inset=px valueDefault: -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=truefb-text-highlight-type=7fb-text-highlight-multi-line=true | falseDefault: 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: #dc764cfb-text-highlight-border-radius=px valueDefault: 8px- Optional class to adjust the highlight border radius
fb-text-highlight-inset=px valueDefault: -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=truefb-text-highlight-type=8fb-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=truefb-text-highlight-type=9fb-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=truefb-text-highlight-type=10fb-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=truefb-text-highlight-type=11fb-text-highlight-duplicates=number > 1Default: 8fb-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=truefb-text-highlight-type=12fb-text-highlight-multi-line=true | falseDefault: falsefb-text-highlight-class=class-namefb-text-highlight-bg-color=color (rgb | hex | name)Default: #6dd7e6fb-text-highlight-shadow-color=color (rgb | hex | name)Default: #ffdbf5fb-text-highlight-inset=px valueDefault: -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):
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-hover=trueDefault: truefb-text-hover-type=1-5Default: 1
Optional:
fb-text-hover-speed=0.5-2Default: 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|falseDefault: falsefb-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 valueDefault: -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|falseDefault: falsefb-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 valueDefault: -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=trueDefault: truefb-text-reveal-type=1-5Default: 1
Optional:
fb-text-reveal-offset=0-100Default: 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=truefb-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=truefb-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=truefb-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=truefb-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=truefb-text-highlight-type=5fb-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! 🌟
About Graphic Wolves
we're a pack of brand, web develop, and e-commerce nerds who love building sites and stores that actually grow the business behind them
View Our Services
