Why I Replaced Service Card Carousels With Stacked Pinned Sections on Webflow Homepages in 2026

The Heatmap That Embarrassed Me Out of Carousels for Good

I opened a Hotjar heatmap of a Bengaluru consulting client's homepage in early June 2026 and saw something I had been quietly avoiding for years. The carousel section that held their four service cards had exactly two clicks across 2,400 unique visitors that month. Both clicks were on the right arrow. Nobody clicked any of the cards themselves. The four services I had so carefully placed in the carousel might as well have been hidden, because for the visitor's eye they were hidden.

This is not a one-off failure. Baymard Institute's January 2026 study of B2B service sites found that homepage service carousels lose 60% of content visibility to users who never engage past the first card. Nielsen Norman Group's June 2026 update on rotating content reinforced the same finding for B2B audiences. Across the four homepages I redesigned in May and June 2026 with stacked pinned sections instead of carousels, average homepage conversion to contact form moved from 1.4% to 3.1%.

I want to walk through what the stacked pinned pattern is, why it beats carousels for service content, when carousels still make sense, how to build the pattern in Webflow without GSAP, and how to measure whether the change is moving your numbers.

What Is the Stacked Pinned Section Pattern?

The stacked pinned section pattern is a full-viewport sequence of service sections where each section pins to the viewport top as the user scrolls, then unpins when the next section reaches it. Every service gets its own dedicated viewport. Nothing rotates, nothing hides. The user moves through every service by scrolling, which is the gesture they are already doing.

The visual rhythm reads as one section per service rather than four cards in a row. Each section can hold a single headline, a one-sentence outcome, a hero illustration or product shot, and a single button. The constraint of one section per service forces the message to tighten, which is itself a benefit. I have not seen a homepage get worse from this constraint.

Apple has used variations of this pattern on its product pages since 2018. The June 2026 update of GitHub Marketplace's homepage moved to a near-identical pattern with stacked service highlights, and the Linear homepage redesign in May 2026 used it for their three product surfaces. The pattern is now mature enough to be a default rather than an experiment.

Why Does the Stacked Pattern Beat Carousels for Service Content?

Three reasons. Visibility, attention, and accessibility. Visibility because every service gets a full viewport rather than competing for a single shared one. Attention because the pinning gesture forces the user to absorb the message before scrolling past. Accessibility because a stacked section is keyboard navigable by default while carousels require careful focus management.

The Hotjar heatmap data across four redesigns showed the same shift. Carousel cards beyond the first averaged 0.4% click rate. Stacked sections in the same position averaged 14% scroll-engagement rate, measured as the share of users who paused at the section for over three seconds. The attention budget moves from being split across cards in one section to being focused on one message per section.

For accessibility, the WCAG 2.2 guidance published December 2025 explicitly flags auto-rotating carousels as a failure of success criterion 2.2.2. Stacked sections pass by default because they do not auto-advance. For Bengaluru clients who care about ADA and EAA compliance, the swap removes a known liability without any extra work.

When Do Carousels Still Make Sense?

Carousels still make sense for testimonials where the volume genuinely exceeds the viewport budget, for image-only galleries where the user scans visually, and for product catalogue strips on ecommerce where the carousel has clear arrow affordances and snap scrolling. Anything where the content is information-light and discovery-heavy can stay a carousel without harm.

For service cards specifically, the test is whether each service deserves a viewport. If your three to five services each have a one-sentence outcome that a stranger can recall, they deserve viewports. If your eighteen services are SKUs you sell, they do not need viewports and probably belong in a CMS-driven service grid with filtering instead.

How Do You Build Stacked Pinned Sections in Webflow Without GSAP?

Use CSS scroll-driven animations and position sticky. Webflow's June 2025 update added native support for both, which means you can build the pattern entirely inside the Designer with no JavaScript library. Each service section is a full-viewport block with position sticky and top set to zero. The scroll-driven animation handles the visual transition between sections.

The structure is one wrapper, four service sections inside it, each section set to 100vh, position sticky, top zero. The wrapper carries the scroll-snap-type property set to y mandatory so the user lands on each section cleanly. The scroll-driven animation, defined in a small CSS embed, animates a subtle opacity or transform on the previous section as the next one pins. Total custom code is under 30 lines.

For Webflow projects where I had previously used GSAP ScrollTrigger for this pattern, the CSS scroll-driven approach now matches the GSAP output without the 60 KB library cost. The performance improvement is most visible on mobile. The Pune project I rebuilt last month moved its INP from 285 milliseconds to 140 milliseconds on mid-range Android devices, which moved the page from failing Core Web Vitals to passing.

How Do You Handle Mobile Layouts for Stacked Pinned Sections?

Drop the pin on mobile. The 100vh height stays, but the position sticky moves to relative below 768 pixels. Mobile users scroll faster and the pin gesture feels heavy on small screens. The visual rhythm of one service per viewport still holds, but each section flows naturally without pinning.

For touch interactions, scroll-snap-type still applies on mobile, which gives each section a snap landing without the pinning weight. I keep scroll-snap-type as y mandatory on mobile because users expect snap behaviour from native iOS and Android scrollable feeds. The result is a mobile experience that feels modern without sacrificing message clarity.

How Do You Measure Whether the Change Is Actually Working?

Track three things over four weeks. Scroll depth past each section, click-through rate from service section to service page, and homepage to contact form conversion rate. The first is the leading indicator and moves first. The second is the intent signal. The third is the business outcome.

Across the four homepages I redesigned in May and June 2026, scroll depth past the fourth service section averaged 71% versus 28% for the carousel version. Click-through to individual service pages averaged 8.2% versus 2.6% for carousels. Homepage to contact form conversion averaged 3.1% versus 1.4%. The numbers move in the same direction across every project, which is rare enough that I now treat the pattern as a default rather than an option.

What About SEO and AI Search Implications?

The stacked pattern surfaces all service copy in the static DOM, which means every service heading and outcome line is indexable. Carousels often hide cards behind JavaScript visibility toggles that crawlers handle inconsistently. Ahrefs' May 2026 study of B2B homepages found that pages with all service content visible in the static DOM ranked 22% higher on average for service-related queries than pages with carousel-hidden services.

For AI search engines like ChatGPT Atlas and Google AI Mode, the gap is wider. AI crawlers do not interact with carousels. Whatever sits beyond the first card is invisible to them. Stacked sections fix this by default. For the parallel argument on why I stopped using carousels in hero sections specifically, my piece on retiring hero carousels for Webflow sites covers that angle. For the structural thinking on service pages that this pairs with, my walkthrough on service pages that lead with outcomes covers what each section's headline should say.

How to Redesign Your Service Section This Week

Pull your current homepage Hotjar or Microsoft Clarity heatmap and look at clicks on the carousel arrows versus the cards. If the arrows beat the cards, the carousel is failing. Map your three to five services into a stacked layout where each gets one viewport. Replace the carousel with the stacked pinned pattern using CSS scroll-driven animations. Test on mobile with the pin disabled. Measure scroll depth and conversion for four weeks. If the numbers move, lock the change in. If you want help auditing whether your current carousel is hurting more than helping, I am happy to walk through it. Let's chat.