Освоение взаимодействия GSAP в Webflow – Часть 1: Терминология и основные понятия

На этом первом уроке курса «Освоение взаимодействий GSAP в Webflow» мы закладываем основу для всего курса. Вы узнаете, что такое взаимодействие на самом деле, как работают триггеры, действия и цели, а также сравните классические и новые системы на основе GSAP, воссоздав одну и ту же анимацию с помощью обоих методов.

Мы рассмотрим:

✅ Взаимодействие Classic и GSAP — что изменилось и почему это важно
✅ Соглашения об именовании для ясности (и эффективности команды)
✅ Триггеры загрузки страницы и стратегии синхронизации
✅ Создание ступенчатого появления текста (Classic)
✅ Воссоздание его с помощью Split Text + Stagger (GSAP)
✅ Появление изображения: рост обёртки, очистка размытия и плавное сглаживание
✅ Сочетание обеих систем (реакция на движение мыши после появления)
✅ Предварительный обзор решения проблемы мерцания, которое мы полностью решим в следующем уроке

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

Supasaito: https://www.supasaito.com?utm_source=...
Ссылка на клон: https://webflow.com/made-in-webflow/w...
Урок по разделению текста в GSAP:    • Webflow Staggered Animation Tutorial (No C...  
Урок по анимации появления текста:    • Redefine Text Reveal Animations With Webfl...  

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

---

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

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

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

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

---

00:00 Вступление
01:37 Что такое взаимодействие? + план урока
04:14 Что такое триггер? (классический обзор)
06:43 Соглашения об именовании взаимодействий
08:12 Что такое действие? + классический текст с разбросом
13:20 Классический: анимация изображения
16:42 Разбивка структуры раздела
18:50 Знакомство с взаимодействием GSAP в Webflow
21:09 Объяснение действий GSAP
22:59 Анимация изображения GSAP (цели, тип, свойства)
28:45 Анимация текста GSAP (Разделение текста + разброс)
32:19 Тизер: устранение мерцания при загрузке страницы
33:02 Сочетание классического и GSAP: эффект перемещения мыши
40:14 Заключение

#webflow #madeinwebflow #webflowtutorial #nocode #gsap