Glassy Button with SVG Filters + GSAP Hover Animation

In this tutorial we’ll build a crystal-like glassy button in Webflow using the magic of SVG filters and the power of GSAP.
🔹 You’ll learn how to:
✅ Set up the page structure and button styling
✅ Apply a custom SVG filter with backdrop-filter: url(#glass)
✅ Load a displacement map with JavaScript
✅ Animate the effect on hover with GSAP (soft glass ➝ icy crystal)
✅ Customize parameters like blur, scale, and duration to make the effect your own
👉 Watch on YouTube: https://youtu.be/jquGkq1cgQI
📂 Helpful Resources:
- SVG filters playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYq0H_TjbEFgbkz1XEzfnll
Powered by Interactions with GSAP
New
This site uses Interactions with GSAP,
Webflow's next-gen interactions engine.
Webflow's next-gen interactions engine.