Webflow Interactions 101

Live Preview

DEMO COMMING SOON

Video Tutorial YouTube

Setup & Installation Guide

01 Understand Webflow trigger types

Webflow has four main trigger categories: Mouse (hover, click), Scroll (page scroll, scroll into view), Page Load, and Navbar/Tab/Slider events.

02 Map interactions to CSS equivalents

Most simple hover interactions are better handled by pure CSS transitions. Reserve Webflow Interactions for multi-step sequences, scroll-based triggers, and anything involving multiple elements responding to one trigger.

03 Know when to use custom code

Reach for GSAP when you need physics-based easing, complex timelines, scroll-scrubbed animations, or anything that Webflow's easing presets can't produce.

<!-- Example: Card with hover interaction -->
<div class="wf-card" data-wf-hover>
  <div class="wf-card__inner">
    <h3 class="wf-card__title">Component Title</h3>
    <p class="wf-card__body">
      Short description of this component or feature goes here.
    </p>
  </div>
  <div class="wf-card__arrow" aria-hidden="true">→</div>
</div>

.wf-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.wf-card:hover {
  border-color: rgba(255, 77, 28, 0.4);
  background: rgba(255, 77, 28, 0.02);
}

.wf-card__arrow {
  font-size: 1.25rem;
  color: #ff4d1c;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.wf-card:hover .wf-card__arrow {
  transform: translateX(6px);
}

.wf-card__title {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.wf-card__body {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
}

// No JS required for this CSS-only hover interaction.
//
// For more complex Webflow-style interactions in vanilla JS,
// use Intersection Observer or GSAP ScrollTrigger — see the
// Scroll Reveal and Magnetic Button tutorials for examples.

// Example: toggle an is-active class on click (Webflow-style)
document.querySelectorAll('[data-wf-hover]').forEach((card) => {
  card.addEventListener('click', () => {
    card.classList.toggle('is-active');
  });
});

Explore More

Custom Cursor

Build a two-part custom cursor — a sharp inner dot and a lagging outer ring — using GSAP quickTo for silky 60fps tracking.

GSAP Interactions Animation

Magnetic Button

Build a cursor-following magnetic button using GSAP quickTo. Drop in a single data attribute and the effect works on any button — no class name changes needed.

GSAP Interactions Animation