Add Gsap Animations To Your Webflow Project (2025)

If you want your Webflow website to look polished and professional with great animations, GSAP is what you need. Whether your work is design or development, GSAP helps you design custom animations that are both powerful and perform better than the animations Webflow provides. Users will look for exciting experiences by 2025 and GSAP allows you to do just that when they start with your site. You are able to change the behavior of your elements using animated texts, scroll effects and hover functionality.We’ll show you how to connect GSAP to your Webflow project without needing to write code. Just a couple of script embeds and some intelligence in your code can make your site more engaging. Make your website captivate and inspire your users with your new project—after all, a site that moves is what you and your users want.

‍

1. Highlighting text animations made with GSAP

Highlighting key words or phrases with GSAP helps grab people’s attention on your Webflow website. Animating the background, color or underline of particular lines in your text can make your website look clean and impressive. The user experience is shaped by you, since these animations can be launched on scroll, hover or page load. Embed the GSAP script in Webflow’s HTML tab and then create custom code blocks to focus on your text. Animating the background can help the headline move across or create a color change effect for words you intend readers to click. They make it easy for your visitors to follow your content, as the motion isn’t too overwhelming to your design.

‍

‍

Install the GSAP Highlight Scripts to use GSAP

The first step to include GSAP highlight scripts is to put the GSAP CDN link in your project settings. Go to your Webflow dashboard, click on the settings and paste the GSAP script in the section “Before </body> tag.” A link to the latest GSAP CDN can be found on the GreenSock website. Following activation, publish your site to enable the script. After that, use a custom JavaScript code embed block to handle your animation logic on your page. You can use these options to make your highlights work by altering the background, animate the underscore or only show text as users scroll down.

‍

‍

Text Highlight Default

The default text highlight settings in GSAP control how your text animation highlights texts. Usually, the attributes found in these are background color, duration, easing and delay. You could have a yellow background slide in to form the backdrop of your text in 0.5 seconds with a smooth transition. GSAP gives you the default option to animate such styles using either the .to() or .fromTo() methods. It is possible to use several attributes together, including opacity and scale, to make your results more interesting. You can quickly make changes to these attributes in your code which allows you to match your site’s design and logo.

‍

‍

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

The "Warp and Bend" effect uses GSAP to distort text dynamically, giving your content a wavy or elastic motion for a playful and engaging animation style.

‍

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

‍

‍

Effect #2: Shimmer Animation 

Shimmer Animation creates a glowing light sweep across your text, using GSAP to mimic a reflective, moving highlight for visual appeal.

‍

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

‍

‍

Effect #3: Custom Highlight Colors

Custom Highlight Colors let you choose unique background shades for text highlights using GSAP, matching your brand’s look and style easily.

‍

• 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

Ripple Animation creates expanding circular waves from a point, simulating water ripples to enhance interactive visual feedback.

‍

• 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

Smooth Background Block adds a softly blended color or gradient behind content, creating depth and a polished, modern visual 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

‍

‍

2. GSAP Text Hover Animations

When users hover over your site’s text, GSAP Text Hover Animations make those elements move in eye-catching, smooth ways. Transformations in these animations involve scaling, switching colors, controlling letter spacing or complex actions like moving, rotating or morphing each character. The advanced timeline and easing capabilities of GSAP mean developers can arrange complex sequences that react well to users. Adding this feature makes the text more engaging and attractive for site visitors, increasing how well people enjoy and interact with the site. The smooth animation on all devices thanks to GSAP which makes it a top choice for current web design.

‍

‍

Install GSAP Text Hover Scripts

Before installing GSAP text hover scripts, add the GSAP library by using CDN or npm. After that, use JavaScript to address text elements, adding GSAP animations for hover events. Give your text some lively hovers by relying on GSAP’s to(), from() or timeline() methods.

‍

‍

Text Hover Attributes (Default)

Text Hover Attributes (Default) are the common settings given to text during text-hovering. Such properties are color change, scale, letter spacing and opacity. Defaults bring about steady, gentle effects that add to how easy and engaging a site is. These come before you make more intricate animations.

‍

‍

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 explain 

Text Stagger Flow animates letters sequentially with a smooth delay, creating a flowing text effect.

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

‍

‍

Effect #2: Typewriter Blink Cursor 

Typewriter Blink Cursor mimics typing with blinking cursor, revealing text character-by-character dynamically.

‍

• 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 

Typewriter Background Fill animates text typing while simultaneously filling each character’s background, highlighting letters as they appear sequentially.

‍

• 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

Random Character Color changes each letter’s color unpredictably on hover, creating a vibrant, dynamic, and playful text animation effect.

‍

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

‍

‍

Effect #5: Background Fill

Background Fill animates a smooth color or gradient overlay behind text, gradually filling the background area to highlight and emphasize the text during hover or interaction.

‍

• 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 

GSAP Text Reveal Effects show words or letters one by one by using methods such as masking, clipping or changing the transparency level. Because of these effects, transitions between slides are fluid and eye-catching for the text. Because of the precise timing achieved with GSAP, the web experiences using it look very polished.

‍

‍

GSAP Reveal Scripts

With GSAP Reveal Scripts, text or elements are animated using the powerful GreenSock Animation Platform. Using opacity, position and clipping, these scripts can make revealing something in the video visually exciting. They are activated on scroll or when the user brings the cursor over an element, helping websites look updated and interative.

‍

‍

Text Reveal Attributes (Default)

Text Reveal Attributes (Default) is the name for the default animation styles used by GSAP during text reveals. Usually, these effects feature changing opacity, moving objects above or beside one another, differences in timing and easing movements. Defaults include gentle transitions and help make reading easier by letting users create more advanced changes.

‍

‍

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  

Blur Reveal gradually transitions text from a blurred state to clear, creating a smooth, eye-catching reveal effect for enhanced visual interest.

‍

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

‍

‍

Effect #2: Soft Blur Reveal

Soft Blur Reveal gently fades in text from a subtle blur, combining opacity and clarity transitions. This creates a smooth, elegant effect ideal for modern, minimal designs that emphasize readability.

‍

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

‍

‍

Effect #3: Line Divider Reveal 

Line Divider Reveal uses an animated line that moves across or beneath text to unveil it. The effect combines motion and masking, adding visual separation and emphasis during the text reveal.

‍

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

‍

‍

Effect #4: Slanted Blur Reveal

Slanted Blur Reveal unveils text with a diagonal motion combined with a blur-to-clear transition. This dynamic, angled effect adds energy and visual depth, making text reveals feel more engaging and modern.

‍

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

‍

‍

Effect #5: Color Text Reveal 

Color Text Reveal gradually uncovers text while transitioning from a base color to a vibrant one. This effect highlights content with visual flair, combining movement, color shift, and timing for impact.

‍

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

‍

‍

Conclusion

All in all, using GSAP in your Webflow website in 2025 will not only raise the user experience but will also bring outstanding visual elements to your websites. Thanks to a strong animation engine, GSAP helps produce transition effects and interactive features that go over and above what you can do with Webflow alone. No matter if you want to show text, create hover actions or build complex scroll effects into your site, GSAP works great with Webflow’s Designer and the custom CSS/JS areas. Because it is flexible, allows precise control of timing and uses detailed documentation, web developers and designers like it a lot. If you add GSAP to your Webflow projects, you can design user paths that captivate people and consistently represent your brand’s story. As web design becomes more visual, having GSAP skills helps you get ahead and show off your interactive ideas.