Стеклянная кнопка с фильтрами SVG + анимация при наведении GSAP (руководство по Webflow)

В этом уроке мы создадим в Webflow кнопку, похожую на кристалл, используя магию SVG-фильтров и мощь GSAP.

Вы узнаете, как:

✅ Настраивать структуру страницы и стили кнопок
✅ Применять собственный SVG-фильтр с помощью backdrop-filter: url(#glass)
✅ Загружать карту смещения с помощью JavaScript
✅ Разбираться в работе SVG-фильтра и настраивать его параметры
✅ Анимировать эффект при наведении курсора с помощью GSAP (мягкое стекло ➝ ледяной кристалл)
✅ Использовать несколько экземпляров кнопок на одной странице или на разных страницах

📂 Полезные ресурсы:

Supasaito: https://www.supasaito.com?utm_source=...
Ссылка на клонируемый файл: https://webflow.com/made-in-webflow/w...
Плейлист с SVG-фильтрами:    • SVG Filter Effects in Webflow  
Документация по GSAP Easing: https://gsap.com/docs/v3/Eases/

🔥 Если вам понравилось видео, не стесняйтесь оставлять комментарии, ставьте лайки и подписывайтесь на мой канал. 😁

---

Мой публичный профиль Webflow:
https://webflow.com/@francescocastro

Мы можем пообщаться в LinkedIn:
  / francescocastronuovo  

Или мы можем познакомиться в X:
https://x.com/francescoflow

А почему бы и нет? Даже в Instagram:
  / francescocastronuovo  

---

0:00 Вступление
1:47 Анализ структуры страницы
4:16 Создание кнопки
7:37 Добавление SVG-фильтра
8:53 Привязка SVG-фильтра к кнопке
13:10 Объяснение работы SVG-фильтра и его настройки
19:00 Анимация кнопки с помощью GSAP
23:38 Бонусные примеры
24:18 Несколько экземпляров кнопки или разные страницы
26:00 Заключение

#webflow #madeinwebflow #webflowtutorial #gsap