Mastering GSAP Interactions in Webflow – Part 13: Build a Growing Border Hover Animation

In this lesson of the Mastering GSAP Interactions in Webflow series, we’re building a super smooth growing border hover animation in Webflow using GSAP Interactions, modern CSS properties, conic gradients, and custom attributes. We’ll create a reusable interaction where a circular border smoothly grows around a social link while the icon color transitions in sync — all powered by an incredibly lightweight setup. And the coolest part? GSAP itself won’t directly animate the border. Instead, we’ll use a simple Set Action to toggle a class on and off, while custom CSS handles the entire visual transformation behind the scenes. Along the way, we’ll explore: ✔ How to create animated circular borders using conic gradients ✔ How to use modern CSS @property definitions for smooth animations ✔ The difference between CSS properties and regular CSS variables ✔ How to synchronize multiple hover effects using shared transitions ✔ How to build reusable GSAP interactions with custom attributes ✔ How to target only the hovered element using parent filters ✔ How to create scalable hover systems without relying on class-based triggers This project is also a great example of how GSAP Interactions and modern CSS can work together to create polished animation systems in Webflow without overly complicated logic. --- 📂 Helpful Resources: 🔗 Supasaito: https://www.supasaito.com?utm_source=... 💻 Link to the cloneable: https://webflow.com/made-in-webflow/w... 🎵 Spotify recommendation: “Lividi sui gomiti” – Måneskin👇    • Måneskin - LIVIDI SUI GOMITI (Audio)   --- 🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁 Or you can gently press the “Thank You” button! ♥️ My Webflow public profile: https://webflow.com/@francescocastro We can talk on LinkedIn:   / francescocastronuovo   Or we can get to know each other on X: https://x.com/francescoflow Or why not? Even on Instagram:   / francescocastronuovo   --- 00:00 Intro 01:00 Setting up the structure 03:54 Creating the icon color hover effect 05:39 HTML setup for the growing border animation 07:18 CSS setup for the growing border animation 11:31 GSAP setup for the growing border animation 15:26 Outro & Music Recommendation #webflow #gsap #madeinwebflow #webflowtutorial