Mastering GSAP Interactions in Webflow: Build an Accessible Popup with Scroll Lock & Reversible Timeline

In this lesson, we build a fully accessible, production-ready popup using Webflow’s new GSAP-powered interaction system. We start by structuring the popup correctly: - Proper semantic HTML - Essential ARIA attributes - A real HTML <button> for closing the dialog - Clean layering with an interactive overlay From there, we build a smooth slide-and-fade animation using GSAP. Instead of creating separate open and close animations, we use a single timeline and control it with Reverse — keeping the logic clean and scalable. Then we refine the interaction: ✅ Close the popup by clicking outside ✅ Merge multiple triggers using custom HTML attributes ✅ Keep targeting elegant and reusable Finally, we use GSAP’s Set action to: 🔒 Lock page scrolling when the popup opens 🔓 Restore scrolling when it closes 📱 Fix viewport inconsistencies using 100dvh for mobile-safe overlays 👉 Watch on YouTube: https://youtu.be/rTGx3dTl9Es