Is it possible to automatically load a new page and remove the previous one when the user reaches the bottom of the page on a Webflow site, like in this example?

To automatically load a new page and replace the current one when the user scrolls to the bottom, similar to seamless transitions seen on some advanced websites, Webflow doesn’t support this natively—but it can be accomplished using custom JavaScript and Webflow’s CMS/API.

1. Understand the Goal

• You’re aiming for automatic page transitions where reaching the bottom of a page dynamically loads new content and replaces the existing content, mimicking a single-page app experience.
• This is not native behavior in Webflow, so it requires custom code and CMS structure.

2. Requirements & Limitations

• Webflow doesn’t support client-side routing (like React, Vue, etc.), so you need to fetch and inject content manually or pre-load it.
• Must use Webflow CMS Collections for consistent structure.
• Requires JavaScript to handle scroll detection and AJAX-like content replacement.
• You cannot use this reliably with static pages without a backend/API.

3. Scroll Detection

• Use JavaScript to detect when the user reaches the bottom of the page:
• Example logic: window.innerHeight + window.scrollY >= document.body.offsetHeight

4. Load and Replace Content

• When bottom is reached:
• Fetch CMS content dynamically via:
  • Pre-loaded hidden sections in the DOM using Webflow CMS Pagination (less dynamic, but Webflow-supported)
  • Or custom JavaScript fetch() calls if you export your site and connect to Webflow’s CMS API (requires self-hosting)
• Use JS to replace the existing page's main content with the new content.
• Optionally update the browser history using history.pushState().

5. Page Setup in Webflow

• Use a CMS Collection Page or Collection List page with a consistent structure.
• Structure content inside a container div (e.g., #pageContent) so you can easily replace that div’s content via JavaScript.
• If you're keeping users on the same domain/page, dynamically update the URL and page title as needed.

6. Add Custom Code

• In Page Settings → Before tag, insert custom JS to:
• Detect scroll.
• Fetch next page’s HTML or content section.
• Replace current page’s section.
• Optionally animate the transition.

Summary

Webflow doesn’t natively support dynamic page replacement on scroll like in headless or SPA-friendly platforms. However, you can simulate this effect using JavaScript, CMS Collection Pages, and either DOM swapping or API-driven content injection. It takes custom coding, strategic CMS setup, and potentially external hosting for full flexibility.