Webflow Interactions Cheat Sheet: Page Load, Hover, Scroll, Parallax

💡Key ideas

Four real animations on Chai Corner: a page-load text reveal, a hover card lift, a scroll reveal with stagger and a scroll parallax, plus accessibility and performance tips.

Trigger → Action

What the visitor does (click, hover, mouse move, page load, scroll, custom event) and the animation that plays.

From → To, duration, ease

Where the animation starts and ends, how long it takes, and how it moves. Ease out = fast start, soft stop.

Stagger

The same animation on many elements, one after another, with a small delay.

Scrub vs Trigger actions

Scrub ties motion to the scroll bar (forward and backward). Trigger actions plays once when the element enters the screen.

🔔

REAL-WORLD EXAMPLEA doorbell: pressing the button is the trigger, the ring is the action. Stagger is a stadium wave: people stand up one after another, not all together.

⏱️Chapters

Click a chapter to jump to that moment in the video.

📋Step-by-step

Tick each step as you build it in your own site. Your ticks are saved.

1. Hero intro (page load)

Select the heading → Interactions → + → Page load, name Hero intro. Add an action → Animate → target Class: hero-heading. Opacity from 0, Move Y from 40px, duration 0.8s. Tick Split text → by Word. Stagger → Offset time 0.12s (total 1.28s). Ease → Ease out · Power 3.

2. Card lift (hover)

Select a menu card → Hover, name Card lift. Target stays Trigger element. Move Y -10px, scale 1.03, duration 0.3s, + border colour chai orange. Add a second hover trigger → type Mouse leave → control Reverse.

3. Cards reveal (scroll)

Select the menu list → Scroll, name Cards reveal, control Trigger actions, Enter → Play. Target menu-card (Webflow adds the filter within trigger element). Opacity from 0, Move Y from 60, duration 0.7s, Power 3 out, stagger 0.15s.

4. Hero parallax (scrub)

Select the hero → Scroll → keep Scrub on scroll, Smooth 0.8. Manual trigger points: Start = top of element meets top of screen; End = bottom meets top. Target hero-heading → opacity 0, Move Y -80, scale 0.9. Conditional playback → Prefers reduced motion → No animation. Breakpoint condition → mobile → No animation.

⚙️Settings reference

Animation	Trigger	Target	Values	Ease / timing
Hero intro	Page load	.hero-heading	opacity 0→1 · Y 40→0 · split by word	Power 3 out · 0.8s · stagger 0.12
Card lift	Hover / Mouse leave (reverse)	Trigger element	Y −10px · scale 1.03 · border orange	0.3s
Cards reveal	Scroll · Trigger actions	.menu-card within trigger	opacity 0 · Y 60	Power 3 out · 0.7s · stagger 0.15
Hero parallax	Scroll · Scrub	.hero-heading	opacity 0 · Y −80 · scale 0.9	Smooth 0.8 · manual points

The same reveal in GSAP code (needs a paid site plan to add)

gsap.from(".menu-card", {
  y: 60,
  opacity: 0,
  duration: 0.7,
  stagger: 0.15,
  ease: "power3.out"
});

⚠️Common mistakes

✕Hover never goes back: add a second hover trigger with type Mouse leave and control Reverse.

✕All cards animate on every section: keep the filter 'within trigger element' on the target.

✕Animating width and height. Animate opacity, move, scale and rotate; they are smooth and cheap.

✕Too much motion. Motion is like salt: a little makes it tasty, too much spoils the dish.

🧠Recap & quiz

First the recap question from the video, then the quiz. Your best score is saved.

Recap: What is the difference between Scrub on scroll and Trigger actions?

Scrub ties the animation to the scroll bar, forward and backward. Trigger actions simply plays the animation when the element enters the screen.

Q1 of 5 · The menu cards should appear one after another as you scroll. Which setting?

Stagger delays each card a little, like a stadium wave.

Q2 of 5 · You want the heading to move with the scroll bar, forward and backward.

Scrub ties motion to scrolling.

Q3 of 5 · How do you make a hover animation return when the mouse leaves?

Like a spring: press, release, it goes back.

Q4 of 5 · Which properties are smooth and cheap to animate?

Transforms and opacity do not re-layout the page.

Q5 of 5 · Which condition turns off motion for sensitive visitors?

Some people feel dizzy with motion; respect the OS setting.

Your score 0 / 5 Answer all questions to save your score

🏠Homework

Do this on your own site before the next lesson.

Add a page-load text reveal with split text.Add a hover lift with mouse-leave reverse.Add a scroll reveal with stagger.Add a reduced-motion condition to any parallax.

Next lesson →

← PREVIOUS

Figma to Webflow

NEXT LESSON →

Complete website

❓FAQ & key terms

What is stagger in Webflow?

It plays the same animation on many elements one after another with a small delay between them.

How do I make Webflow animations accessible?

Open Conditional playback and add Prefers reduced motion with No animation. Turn off heavy effects on mobile with a breakpoint condition.

Are Webflow Interactions GSAP?

Yes. The new Interactions are powered by GSAP (Lesson 10 goes deeper).

TriggerEaseSplit textParallax

Webflow Animations & Interactions (GSAP Powered)

💡Key ideas

Trigger → Action

From → To, duration, ease

Stagger

Scrub vs Trigger actions

⏱️Chapters

📋Step-by-step

1. Hero intro (page load)

2. Card lift (hover)

3. Cards reveal (scroll)

4. Hero parallax (scrub)

⚙️Settings reference

⚠️Common mistakes

🧠Recap & quiz

Recap: What is the difference between Scrub on scroll and Trigger actions?

Q1 of 5 · The menu cards should appear one after another as you scroll. Which setting?

Q2 of 5 · You want the heading to move with the scroll bar, forward and backward.

Q3 of 5 · How do you make a hover animation return when the mouse leaves?

Q4 of 5 · Which properties are smooth and cheap to animate?

Q5 of 5 · Which condition turns off motion for sensitive visitors?

🏠Homework

Figma to Webflow

Complete website

❓FAQ & key terms

Get new tutorials in your inbox 📬

Thank you for subscribing! 🎉

Webflow Animations & Interactions (GSAP Powered)

💡Key ideas

Trigger → Action

From → To, duration, ease

Stagger

Scrub vs Trigger actions

⏱️Chapters

📋Step-by-step

1. Hero intro (page load)

2. Card lift (hover)

3. Cards reveal (scroll)

4. Hero parallax (scrub)

⚙️Settings reference

⚠️Common mistakes

🧠Recap & quiz

Recap: What is the difference between Scrub on scroll and Trigger actions?

Q1 of 5 · The menu cards should appear one after another as you scroll. Which setting?

Q2 of 5 · You want the heading to move with the scroll bar, forward and backward.

Q3 of 5 · How do you make a hover animation return when the mouse leaves?

Q4 of 5 · Which properties are smooth and cheap to animate?

Q5 of 5 · Which condition turns off motion for sensitive visitors?

🏠Homework

Figma to Webflow

Complete website

❓FAQ & key terms

We value your privacy 🍪

Cookie preferences