How can I make a section in Webflow have horizontal scrolling and ensure that the sticky CSS effect keeps the content centered on the screen?
TL;DR
- Create a section with a sticky wrapper (
position: sticky,top: 0,height: 100vh) and a wide flex container (display: flex,width: e.g., 400vw) inside it. - Use Webflow's scroll animation to move the container on the X-axis based on scroll progress, and center content using flex alignment.
To create a horizontally scrolling section in Webflow with sticky-centered content, follow these structured steps.
1. Set Up the Page Structure
- Create a Section element that will hold your horizontal scrolling content.
- Inside the section, place a div wrapper (e.g.,
horizontal-scroll-wrapper) to manage layout. - Inside the wrapper, insert a scrolling container (e.g.,
scroll-content) that holds your horizontal items (cards, images, etc.).
2. Style the Sticky Section
- Select your section, and set:
- Position:
relative - Height: Equal to or greater than
100vh(depending on how long your horizontal scroll should last)
- Select the wrapper div (
horizontal-scroll-wrapper) and set: - Position:
sticky - Top:
0 - Height:
100vh - This makes the wrapper stay in place during vertical scroll.
3. Create Horizontal Scroll Effect
- Select the scrolling container (
scroll-content) and set: - Display:
flex - Flex direction:
row - Width: A value wider than the viewport (e.g.,
400vwfor 4 panels) - Transform: Add
will-change: transformfor smooth animation.
- Optional: Inside each item, set a consistent width (e.g.,
100vw) and height (100%).
4. Add Scroll Interaction to Animate Horizontally
- Go to Interactions panel > Page Trigger > While Scrolling in View.
- Target the
horizontal-scroll-wrapper. - Add a Scroll animation that adjusts the X-axis movement of
scroll-content. - Example: Scroll progress 0% =
0%X, 100% =-300%X for 4 cards. - Use the Move animation with “transform X” to slide content sideways.
5. Keep Content Centered
- To center content on the screen during scroll:
- Ensure the wrapper (
horizontal-scroll-wrapper) remains atheight: 100vh. - All child elements inside
scroll-contentshould be:- Height:
100% - Display:
flexwithalign-items: centerandjustify-content: centerto vertically and horizontally center contents.
- Height:
Summary
Use a sticky wrapper with position: sticky and top: 0, combined with a wide flex container that uses scroll-based X-axis animations to move content horizontally. Ensure child elements are centered using flex styles, and trigger the horizontal scroll via scroll progress animations in Webflow's Interactions panel.
