Освоение взаимодействий GSAP в Webflow – Часть 3: Управление, скорость, переход и примеры из реал...
Загружено: 2025-11-21
Просмотров: 599
В этом уроке мы подробно рассмотрим один из самых мощных — и часто неправильно понимаемых — элементов новых взаимодействий Webflow на базе GSAP: панель настроек событий.
Мы подробно разберём, как работают функции «Управление», «Скорость» и «Перейти к», а также как использовать их для создания более понятных и гибких взаимодействий с помощью одной временной шкалы.
Вы научитесь:
✅ Приостанавливать и возобновлять бесконечную анимацию во время ключевых взаимодействий пользователя
✅ Использовать Speed = 0 + Control: No Action для остановки временной шкалы без нарушения логики
✅ Открывать и закрывать всплывающее окно одним взаимодействием (благодаря функции Toggle Play/Reverse)
✅ Объединять несколько событий в одном взаимодействии GSAP с помощью настраиваемых атрибутов
✅ Запускать анимацию загрузки страницы с помощью настраиваемых событий + небольшого фрагмента кода
✅ Более чёткая структура, более целенаправленные настройки, управляемые событиями, во всём вашем проекте
📂 Полезные ресурсы:
🔗 Supasaito: https://www.supasaito.com?utm_source=...
🔗 Ссылка на Клонируемое видео: https://webflow.com/made-in-webflow/w...
🎓 Взаимодействия GSAP – Урок 1: • Mastering GSAP Interactions in Webflow – P...
🧩 Урок по классическим взаимодействиям Webflow (открытие/закрытие всплывающего окна): • How To Deal With Webflow Animations
🔗 Шаблон Awake от WrapPixel: https://webflow.com/templates/html/aw...
🎵 Рекомендация Spotify: «The Drum» – The Siege 👇
• "The Drum" - The Seige
🔥 Если вам понравилось видео, не стесняйтесь оставлять комментарии, ставить лайки и подписываться на мой канал. 😁
---
Мой публичный профиль Webflow:
https://webflow.com/@francescocastro
Мы можем пообщаться в LinkedIn:
/ francescocastronuovo
Или можем познакомиться в X:
https://x.com/francescoflow
А почему бы и нет? Даже в Instagram:
/ francescocastronuovo
---
00:00 Вступление
1:25 Разъяснение настройки и области применения этого урока
3:39 Пример №1: Приостановка и возобновление анимации загрузки страницы при наведении курсора
14:35 Пример №2: Использование параметра «Скорость» для воспроизведения/возобновления и остановки анимации
21:11 Пример №3: Открытие и закрытие всплывающего окна одним взаимодействием (переключение воспроизведения/обратного воспроизведения)
25:39 Что дальше
26:43 Заключение
#webflow #madeinwebflow #webflowtutorial #gsap #nocode
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: