Reveal elements on scroll

In this example, we'll cover how to create a trigger which fades and moves elements in as we scroll down the page. In addition to configuring the trigger and animation, we'll also cover how to apply the same animation to other elements.

Video details

Duration

4:38

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": "Reveal elements on scroll",
  "description": "In this example, we&#39;ll cover how to create a trigger which fades and moves elements in as we scroll down the page. In addition to configuring the trigger and animation, we&#39;ll also cover how to apply the same animation to other elements.",
  "url": "https://university.webflow.com/videos/reveal-elements-on-scroll",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b944bcf45bef3d329e1a28_maxresdefault.webp",
  "duration": "4:38",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=aoGMFbWJ2aU",
  "embedUrl": "https://www.youtube.com/embed/aoGMFbWJ2aU",
  "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": ""
  }
}