Site build: Interactions

In this lesson, we make our site more dynamic and engaging with interactions. With Webflow, you can create awesome interactions — here we’ll show you how to create a button hover interaction using states, and a page load interaction using the Webflow Interactions panel.

Share your progress #Webflow101 on Twitter

00:00 — Introduction 00:23 — Button hover 05:16 — Page load interaction 13:17 — Recap 13:43 — CTA: Thank you

Video transcript

</summary>

This is part of the Freelancer's Journey site build series. It covers building interactions for the Freelancer course site — adding motion and animation to the project site to make it feel more dynamic and polished.

The interactions covered in this section are tied to specific elements in the Freelancer site project — things like hover effects on cards, entrance animations for sections as they scroll into view, and click-triggered animations for interactive elements. The video walks through how these are built using Webflow's Interactions panel as part of the full site build project.

</details>

Video details

Duration

14:07

Topic

Design & build

Continue watching

<h3>Migrate a site to Webflow</h3>1:16:53

<h3>Cursor follow interactions</h3>10:25

<h3>Build a cursor-following 3D button</h3>5:15

<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Site build: Interactions",
  "description": "In this lesson, we make our site more dynamic and engaging with interactions. With Webflow, you can create awesome interactions — here we’ll show you how to create a button hover interaction using states, and a page load interaction using the Webflow Interactions panel.",
  "url": "https://university.webflow.com/videos/site-build-interactions",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b947fb28a796a7b3ea7c90_maxresdefault.webp",
  "duration": "14:07",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=UG9U-G_OK3I",
  "embedUrl": "https://www.youtube.com/embed/UG9U-G_OK3I",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}