Horizontal Scrolling
Horizontal Scrolling creates a memorable and engaging experience for those who visit your website.
When scrolling up and down on your site, the content will scroll left to right (or) right to left depending on your settings.
Here's how it's done.
To create this effect you will need a least two or more Squarespace Sections to group together.
- Select the Squarespace Section you want to be at the beginning of the Horizontal Scroll.
- Click the SquareKicker icon
- Head to the Advanced tab
- Select Horizontal Scrolling from the menu.
- Toggle Enable
- Select the number of sections you want to include. SquareKicker will group together the current section and include the following section to your new Horizontal Scrolling track. Add more sections to your track by dragging the slider or type in a desired number of sections to the input field.
- Click Apply to save your design changes.
Additional settings
Reverse toggle
- Default settings scroll left to right as you scrolling up and down your site. You can reverse this scroll interaction so your section scroll right to left instead.
Fluid toggle
- Makes the first and last section of your track flow in and out of screen view. When you enable fluid, you are also presented the option to create a custom color to the background of any empty space created by this effect.
Fixed background option
- This assigns the background image of your 1st section to the entire track while your content scrolls horizontally.
Section width
- Use the Layout tool to customize the width of individual sections from 25% to 100%, or set a custom width
- Combine narrow and wide sections to highlight key information or create patterns
Section stacking
- Enable sections to stack at the edge of the screen instead of sliding completely off
- Creates layered effects and visual interest as sections accumulate
- Maintains visibility of previous content while introducing new sections
Adjustable speed
- Control the scroll speed using a slider from 10% to 100%
- 10% creates a slow-motion effect for immersive storytelling
- 100% provides quicker transitions for faster-paced navigation
- Match the speed to your content and design goals
Mobile and tablet settings
Choose from three options on mobile and tablet devices:
- Show sections with horizontal scrolling enabled
- Show sections with standard vertical scrolling
- Hide the sections entirely
Horizontal scrolling is disabled by default on mobile devices but can be enabled
Section visibility
- Works with the Visibility tool to hide individual sections based on device type
- Hidden sections don't create gaps or empty spaces in your design
- A placeholder appears in Edit mode to track your design changes
Advanced designs
- Combine horizontal scrolling with other tools for enhanced effects
- Works with transparent backgrounds and scrolling effects
TIP: Horizontal Scrolling can be applied in a Preset so if you are using this often throughout your site, you can share these settings, along with all your design changes for this section elsewhere on your site.
🦀 Get your crab on and try some Horizontal Scrolling today 🦀