How to Create Growing Borders in Webflow

This instructional video provides a comprehensive guide to building a sophisticated, dynamic growing border animation for social links using Webflow and GSAP. By combining native Webflow features with modern custom CSS and lightweight GSAP class toggling, developers can craft high-end hover interactions that are visually striking yet powered by an incredibly small footprint of code. The tutorial empowers viewers to push the boundaries of standard Webflow interactions without relying on overly complicated animation logic.

The core mechanism of this effect relies on strategic delegation: rather than using GSAP to animate the border directly, GSAP is solely responsible for toggling an "on-hover" class. The heavy lifting is smoothly handled behind the scenes by CSS. By utilizing a custom @property definition, the browser is instructed to treat a --fill percentage as a truly animatable property. This interacts with a conic gradient background to progressively reveal a visual "fake border" seamlessly wrapped around a circular element. Simultaneously, native Webflow transitions effortlessly shift the SVG icon colors by leveraging the currentColor inheritance.

Ultimately, the viewer achieves a fully scalable and highly reusable component architecture. By structuring the interaction logic around custom data attributes (such as data-animate-link-border) instead of tightly coupling it to specific CSS class names, the resulting animation can be effortlessly replicated across multiple elements. This approach ensures that the sophisticated visual output remains modular, maintainable, and aligned with premium development standards.

• Native SVG Color Inheritance: By setting the fill attribute of an SVG path to currentColor, you can dynamically control and transition the icon's color directly through the text color properties of its parent element in Webflow.
• The Illusion of CSS Borders: The "growing border" effect is achieved without standard border properties; it uses a slightly larger wrapper div placed behind the main link, revealing a visually precise edge as a "fake border".
• Animatable Custom Properties: Registering a custom CSS property using @property --fill strictly types it as a percentage, enabling the browser to smoothly animate the value from 0% to 100%.
• Conic Gradients for Radial Reveals: Combining the animated --fill property with a conic gradient allows a color to progressively wrap around a circular shape, creating the fluid, circular growing border effect.‍
• Attribute-Based Scalability: Binding GSAP interaction triggers and targets to custom data attributes (e.g., data-animate-link) rather than standard CSS classes thoroughly decouples animation logic from styling, ensuring seamless reusability and scalability across the project.

• 01:40 - Add a link block, assign it the class section_link, and set its display property to flex to center elements both horizontally and vertically.
• 02:02 - Define the circular shape of the link by setting its width and height (e.g., 7rem), applying a dark background color, and setting the border radius to 100%.
• 02:45 - Add an HTML embed element inside the link to paste the custom SVG icon code.
• 03:05 - Update the SVG path tag by setting the fill attribute to currentColor, enabling the icon to inherit text colors from its parent.
• 04:16 - Add a native font color transition (800ms, ease out expo) to the link and configure the hover state to change the color.
• 05:01 - Reset the text color property on the embedded SVG class so it successfully inherits the new hover color from the parent link block.
• 05:60 - Wrap the link inside a new div block (section_link-wrapper) which will serve as the structural "fake border" for the animation.
• 07:19 - Add the custom attribute data-animate-link-border to the wrapper element to allow scalable targeting without relying on CSS classes.
• 07:57 - Add a new embed element directly to the body to host the custom CSS code.
• 08:18 - Define a custom animatable CSS property using @property --fill, specifying its syntax as a percentage and setting its initial value to 0%.
• 09:40 - Apply a conic-gradient background in the CSS, linking it to the --fill property to radially spread the color around the circular element.
• 10:23 - Create the CSS rule for an on-hover class that forces the --fill value to 100%.
• 12:06 - Add a dummy div with the on-hover class at the bottom of the Webflow designer page so the platform does not automatically clean it up as an unused class.
• 12:27 - Add the custom attribute data-animate-link to the main link element, which will act as the interaction trigger.
• 12:49 - Create a new hover interaction in the interactions panel, setting the trigger to fire on mouse enter and leave using the data-animate-link attribute.
• 13:15 - Create the actual interaction step by targeting the data-animate-link-border attribute and filtering it to the "direct parent of trigger element".‍
• 13:59 - Add a class toggle action to apply and remove the on-hover class, which triggers the CSS-powered border animation.

Building a Dynamic Growing Border Animation in Webflow

This guide outlines how to create a sophisticated, scalable growing border hover effect using native Webflow transitions, custom CSS properties, and an interactions panel class-toggle setup.

1. Setting up the Link Block [01:40 - 02:24]

• How: Add a link block, assign it the class section_link, and set its display property to Flex (centering elements horizontally and vertically). Set both the width and height to 7rem, apply a dark gray background color, and set the border radius to 100%.
• Why: This establishes a perfectly centered, circular base element that is ready to host your social icon.

2. Integrating and Configuring the SVG Icon [02:45 - 03:50]

• How: Place an HTML embed inside the link block and paste your SVG icon code. Crucially, find the <path> tag inside the SVG and set the fill attribute to currentColor. Finally, give the embed the class section_link-icon and set its display to Flex.
• Why: Setting the fill to currentColor is essential because it allows the SVG to dynamically inherit text color changes from its parent link block. Using Flexbox on the embed removes unwanted default spacing below the icon.

3. Creating the Native Color Transition [04:16 - 05:21]

• How: Select the parent section_link and add a native Webflow font-color transition (duration: 800ms, easing: ease-out expo). Switch to the hover state and change the text color to green-yellow. To ensure the icon inherits this, select the section_link-icon, remove any applied text color, and set your base gray text color on the parent section_link instead.
• Why: This approach utilizes Webflow's lightweight native transitions. By resetting the child element's color, you prevent it from overriding the parent's hover state, allowing the icon to smoothly change color upon interaction.

4. Building the "Fake Border" Wrapper [05:60 - 07:07]

• How: Right-click the section_link and wrap it in a new Div block with the class section_link-wrapper. Set its width and height to 7.5rem, set it to Flex center, and apply a 100% border radius.
• Why: This wrapper creates the actual animation canvas. Because it is slightly larger than the inner dark circle, it effectively acts as a "fake border" background layer waiting to be revealed.

5. Adding Custom Attributes for Targeting [07:19 - 07:38]

• How: Select the section_link-wrapper and add a custom attribute named data-animate-link-border.
• Why: Targeting custom attributes instead of CSS class names entirely decouples the interaction logic from your styling. This ensures the component is highly reusable and scalable across the project without class conflicts.

6. Writing the Custom CSS & @property [07:57 - 10:23]

• How: Add a custom code embed to the body. Define an animatable CSS property using @property --fill (syntax set to <percentage>, initial value 0%). Next, target the data-animate-link-border attribute, add a transition to the --fill property (800ms, expo easing), and apply a conic-gradient background tied to the --fill variable. Finally, create a CSS rule for .on-hover that sets --fill to 100%.
• Why: Standard CSS variables cannot be smoothly animated. Registering --fill as a specific percentage type forces the browser to calculate the animation frames. The conic gradient then utilizes this 0-100% transition to progressively wrap the color around the circular wrapper radially.

7. Preserving the Utility Class [11:48 - 12:06]

• How: Add a dummy div element to the bottom of your page and manually assign it the class on-hover.
• Why: If a class is only referenced in custom CSS and interactions, Webflow may deem it unused and delete it during a style cleanup. Leaving it physically on the page prevents this issue.

8. Configuring the Hover Interaction Trigger [12:27 - 13:15]

• How: Select the main section_link and add a custom attribute named data-animate-link. Open the interactions panel, create a new Hover interaction (Mouse Enter and Mouse Leave), and set the trigger to target this new attribute instead of a class.
• Why: This attribute defines the exact bounds of the user's hover area and acts as the explicit trigger for your animation logic.

9. Building the Class Toggle Action [13:15 - 13:59]

• How: Inside the interaction, create a set action targeting the wrapper's attribute: data-animate-link-border. Critically, apply the filter: "Direct parent of trigger element". Add a class toggle action to add the on-hover class on hover-in, and remove it on hover-out.‍
• Why: Toggling the class allows CSS to handle all the heavy lifting of the gradient animation seamlessly. Filtering to the direct parent ensures that if you have multiple links on the page, only the specific border of the link you are hovering over will animate.

Create the illusion of a border by placing your element inside a slightly larger wrapper div with a 100% border radius. Then, apply a conic gradient background to this wrapper and animate its custom fill property to seamlessly reveal a "fake" growing border.

Set the fill attribute inside your SVG's path tag to currentColor so it inherits the text color of its parent element. You can then apply native Webflow font color transitions to the parent container's hover state to smoothly change the icon's color.

Instead of animating style properties directly through GSAP, use GSAP exclusively to toggle a custom class (e.g., on-hover) on your target element. This highly scalable approach lets CSS handle the heavy lifting of the transition behind the scenes while keeping the JavaScript logic lightweight.

Standard CSS variables are treated as text and cannot animate smoothly, so you must register a custom animatable value using @property defined with a percentage syntax. By linking this property to a conic gradient and applying a transition, the browser can perfectly animate the gradient from 0% to 100%.