How to create horizontal scrolling sections in Squarespace
When a standard vertical layout isn't enough, Horizontal Scrolling gives you a different way to present content. Instead of moving visitors straight down the page, you can guide them through sections that move left to right or right to left as they scroll.
For portfolio showcases, storytelling layouts, product presentations, and immersive landing pages, Horizontal Scrolling can create a more engaging browsing experience while giving you greater control over how content is revealed.
With SquareKicker's Horizontal Scrolling tool, you can create these interactions visually inside the Squarespace workflow, then customize the experience with flexible layouts, adjustable speeds, section stacking, and responsive controls.
How Horizontal Scrolling works
Horizontal Scrolling is an Advanced tool that groups multiple sections into a single scrolling track. It is available on all plans.
As visitors scroll vertically through your page, the grouped sections move horizontally across the screen. By default, content scrolls from left to right, but you can reverse the direction if it better suits your design.
To create a scrolling track:
Select the first section you want to include.
Open the SquareKicker section Tools.
Navigate to the Advanced tab.
Enable Horizontal Scrolling.
Choose how many sections you want to include in the track.
The selected section and following sections become part of the same scrolling experience, creating a continuous horizontal journey through your content.
Use Fluid mode for smoother transitions
Fluid mode changes how the first and last sections enter and leave the viewport.
When enabled, content flows more naturally into and out of view, helping the scrolling track feel less abrupt. You can also apply a custom background color to the empty space created by the effect, allowing it to blend more intentionally with the rest of your design.
Create layered compositions with section stacking
Stack introduces another way to shape the scrolling experience.
Instead of allowing sections to completely exit the screen, sections can stack at the edge of the viewport as new content moves into view. This creates layered compositions that feel more deliberate and visually connected.
Section stacking can help you:
Add depth to your layouts
Keep important content visible longer
Create stronger visual anchors
Build more polished transitions between sections
The effect becomes particularly interesting when combined with transparent backgrounds and layered content.
Adjust the scrolling speed
The speed of your horizontal track has a significant impact on how visitors experience your content.
SquareKicker allows you to adjust the scrolling speed from 10% to 100%, with 100% matching the standard scroll speed.
Slower speeds can help create a more immersive experience for:
Portfolios
Visual storytelling
Product showcases
Featured case studies
Faster speeds can work well when presenting supporting information or creating a more dynamic browsing experience.
The right setting depends on the content and the overall feel you're trying to create.
Extend backgrounds across the entire track
Another useful option is Fixed Background.
This setting applies the background image from the first section across the entire scrolling track while the content moves horizontally over the top.
The result can help create stronger visual continuity throughout the experience, particularly when working with large imagery, branded backgrounds, or storytelling layouts.
Responsive controls for mobile and tablet
Horizontal interactions can feel very different across devices, which is why SquareKicker includes dedicated controls for smaller screens. The following settings affect the entire track.
For mobile and tablet layouts, you can choose to:
Keep Horizontal Scrolling enabled
Maintain the same interaction across devices for a consistent experience.
Switch back to vertical scrolling
Display the same content in a traditional vertical layout while preserving the content structure.
Hide sections entirely
Remove selected sections from mobile or tablet layouts when they aren't essential to the experience.
These controls allow you to create layouts that feel intentional on every screen size instead of forcing a single approach across all devices.
Combine with section visibility controls
For even greater flexibility, Horizontal Scrolling works well alongside the Visibility tool.
This allows you to:
Show or hide individual sections based on device size
Create different experiences for desktop, tablet, and mobile visitors
Maintain cleaner responsive layouts
Avoid unnecessary spacing issues when content changes between devices
Placeholder content remains visible in Edit mode, making it easier to manage responsive layouts during the design process.
Flexible section widths for more creative layouts
By combining Horizontal Scrolling with the Layout tool, you can create sections ranging from 25% to 100% width and mix different sizes throughout the same track.
This gives you more control over visual rhythm and content hierarchy. You might:
Use wider sections for key messaging or featured content
Introduce narrower sections to create pacing and variety
Combine multiple widths for a more editorial or magazine-inspired layout
Create repeating patterns with consistent section sizes
Rather than treating every section equally, you can intentionally guide attention through the scrolling experience.
Combine Horizontal Scrolling with other design tools
Some of the most interesting results come from combining Horizontal Scrolling with other SquareKicker tools and design features.
Consider experimenting with:
Scroll effects
Transparent section backgrounds
Layered content
Device-specific visibility settings
Small combinations often create the most memorable interactions, helping sections feel more intentional without overwhelming the overall design.
