Скачать или смотреть Mastering GSAP Interactions in Webflow – Part 1: Terminology & Core Concepts

In this first lesson of Mastering GSAP Interactions in Webflow, we lay the groundwork for the whole course. You’ll learn what an interaction really is, how triggers, actions, and targets work, and how the classic and new GSAP-based systems compare — by rebuilding the same animation with both methods.

We’ll cover:

✅ Classic vs GSAP interactions — what’s changed and why it matters
✅ Naming conventions for clarity (and team sanity)
✅ Page Load triggers and timing strategies
✅ Building a staggered text reveal (classic)
✅ Recreating it with Split Text + Stagger (GSAP)
✅ Image reveal: wrapper growth, blur cleanup, and smooth easing
✅ Making both systems coexist (mouse-move reaction after the reveal)
✅ A preview of the flickering fix we’ll fully solve in the next lesson

📂 Helpful Resources:

Supasaito: https://www.supasaito.com?utm_source=...
Link to the cloneable: https://webflow.com/made-in-webflow/w...
GSAP Split Text tutorial:    • Webflow Staggered Animation Tutorial (No C...  
Text Reveal Animation tutorial:    • Redefine Text Reveal Animations With Webfl...  

🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁

---

My Webflow public profile:
https://webflow.com/@francescocastro

We can talk on LinkedIn:
  / francescocastronuovo  

Or we can get to know each other on X:
https://x.com/francescoflow

Or why not? Even on Instagram:
  / francescocastronuovo  

---

00:00 Intro
01:37 What is an interaction? + lesson plan
04:14 What is a trigger? (classic overview)
06:43 Naming conventions for interactions
08:12 What is an action? + classic stagger text
13:20 Classic: animating the image
16:42 Section structure breakdown
18:50 Introducing GSAP interactions in Webflow
21:09 GSAP actions explained
22:59 GSAP image animation (targets, type, properties)
28:45 GSAP text animation (Split Text + Stagger)
32:19 Teaser: removing page-load flicker
33:02 Combining classic + GSAP: mouse-move effect
40:14 Outro

#webflow #madeinwebflow #webflowtutorial #nocode #gsap