Sideways Scrolling

However, let me share a little secret — it’s not side-to-side scrolling. It’s actually vertical scrolling accompanied by an interaction that shifts elements within our visible area as we scroll down.

Within this tutorial, you will grasp how to produce a horizontal scrolling effect by carrying out the following steps:

1. Establish the “Track” Segment
2. Arrange the “Camera” Block
3. Construct the “Frame” Block
4. Incorporate elements
5. Adjust the behavior
6. Optimize for mobile devices

Establish the “Track” Segment

Initiate the foundational structure of the sideways scroll segment by introducing a Segment component that encloses all the internal elements:

1. Pluck a Segment component from the Add panel onto the page (the Segment is set to 100% width by default)
2. Access the Selectorfield within the Style panel
3. Assign a class name to the Segment via our Selectorfield (for instance, “Track”, yet we have the liberty to select any name)

For instance, in our demonstration, we intend to traverse through 4 objects horizontally. The volume of items plays a crucial role as it dictates the height of the “Track” Segment.

Adjust the “Track” Segment’s stature

Let’s define a height for our Segment:

1. Unveil the Style panel > Size
2. Specify the height as 400vw

Heed: the utilization of VW (viewport width) is because we’re horizontally scrolling across 4 items. Each item corresponds to 100vw in height (such as, 4 items equates to 400vw).

Arrange the “Camera” Block

Let’s now integrate an element that will serve as our viewport for observing the scrolling items:

1. Place a Block element from the Addpanel into the “Track” Segment
2. Enter the Selectorfield within the Style panel 
3. Attach a class name to the Block element (e.g., “Camera”, yet we retain the flexibility to select any name)

Insider tip: We can expedite access to the Selectorfield of a selected element by employing shortcut keys, namely Command + Enter (on Mac) or Control + Enter (on Windows).

Designing the “Camera”

The “Camera” Block operates as a window through which the scrolling items will be visible. Once you select the “Camera” Block, ensure its dimensions match the viewport precisely, and have it remain fixed to its parent component:

1. Access the Style panel > Size
2. Establish the width as 100vw (equating to 100% of the viewport width)
3. Define the height as 100vh (equating to 100% of the viewport height)
4. Scroll down to the Position settings in the Style panel
5. Alter the position from Static to Sticky
6. Integrate a top position of 0 pixels (the spacing between the top of the “Track” Segment and the top of the “Camera” Block)

By setting an element as sticky, we are automatically defining the parent element as the container that its child element will adhere to.

Construct the “Frame” Block

Let’s establish our “Frame” Block to align the items horizontally:

1. Insert a Block element from the Addpanel into the “Camera” Block
2. Access the Selector field within the Style panel 
3. Name the Block element (e.g., “Frame”, yet we are at liberty to choose any designation)

Insert items

We shall commence by generating an element that will enclose our illustration:

1. Unveil the Include panel and opt for a Section block
2. Drop the Section block within the “Container” Div block in the Navigator
3. Tap into the Selector box in the Design panel
4. Assign a class name to the Section block (e.g., “Artifact”, although it can be any title you prefer)
5. Expand Design panel > Flex item and establish the Dimentions as Do not diminish or expand
6. Access Design panel > Extent and assign a breadth of 100% and an altitude of 100%

You also have the option to append cushioning on all edges to offer the items some space to breathe (e.g., 40 pixels of cushioning on each side). To execute this, launch the Design panel > Spacing and fix the padding.

Presently, we can embed an image within the “Artifact” Section block we have just formed.

Customize the visuals within the items

In this instance, we are employing illustrations that occupy the entire breadth and altitude of the “Artifact”Section block. 

We should likewise append some padding to all edges of the image to offer the images some space to breathe: 

1. Launch Design panel > Extent
2. Assign the breadth as 100%
3. Set the altitude as 100%
4. Adjust Fit to Encompass

Setup the “Viewfinder” for our items

If we scroll left and right using our mouse or trackpad (pressing SHIFT while scrolling on Windows), we can preview all our items exhibited in the “Viewfinder” overview.

Nevertheless, the items overflow from the “Viewfinder” perspective, which is not the anticipated outcome. Our objective is to witness the items solely within that view upon their inclusion by the interplay. To prevent the images from overflowing: 

1. Elect the “Viewfinder” Div block (or as you may have designated it)
2. Expand Design panel > Extent
3. Configure Overflow as Hidden 

By setting the “Viewfinder” overflow to hidden, any attempt to scroll left and right will be hindered. This positions us to adjust our interaction, which will relocate the “Container” from right to left.

Tune the maneuver

In our scenario, our components comprise the “Track” Section > the “Viewfinder” Div block > the “Container” Div block > the “Artifact” Div block > the illustration element.

Our aim with the interaction is to allow the “Track” Div block to instigate the interaction.that shifts the “Frame” Block Div from rightwards to leftwards.

Establish the trigger

Pick the “Track” Segment and open up the Interactions panel:

1. Tap on the addition symbol for Element trigger
2. Choose During scrolling within view
3. Press the dropdown for Action
4. Choose Play scroll animation
5. Tap on the addition symbol for Scroll animations to start a new animation
6. Name the new animation (e.g., “Horizontal scroll animation”)

Displace the “Frame” with the interaction

Now that we have designated the “Track” Segment as our trigger, we must single out the “Frame” Block Div in the Navigator. By choosing the “Frame” Block Div during the creation of the interaction, we can incorporate an animation to the “Frame” Block Div.

Return to the Interactions panel, and let’s craft our interaction on the “Frame” Block Div when the Track Segment comes into view:

1. Tap on the addition symbol
2. Choose Shift
3. Fix the shift on the x-axis from 0% to 0vw (since this is the commencement point of our interaction)

The final step is to adjust the shift on the x-axis from 100% to -300vw.

How do we get -300vw? The Track Segment is 400vw, but we only visualize the complete width of the viewport (100vw) while scrolling.

To slide all 4 items to the left, we must set the shift on the x-axis from 100% to -300vw to shift the Frame 400vw to the left. The 400vw also considers the initial 100vw that we observe before we commence scrolling.

Adjust the offset of the interaction

Hit the eye icon in the Designer for a live preview of your website. When testing our new interaction, we observe that the beginning of the interaction initiates too early, and also advances to the subsequent Segment too swiftly.

We can fine-tune the interaction in 2 methods:

• Modify the commencement of our animation to commence at 20%
• Alter our animation to initiate when the “Track” Segment is entirely visible

To amend the beginning of our animation to commence at 20%:

1. Unfold Interactions panel > “Horizontal scroll animation” interaction
2. Press the Shift action that commences at 0%
3. Adjust the keyframe to 20%

To adjust our animation to start when the “Track” Segment is fully visible:

1. Unfold Interactions panel > Animation boundaries
2. Pick Is entirely visible

Upon previewing our live project, we observe the interaction commences when the initial item is completely visible, but it finishes prematurely. The interaction reaches the termination of the “Track” Segment while our interaction is still in motion.

Personalize the conclusion of the interaction

Revisit the Interactions panel, and Animation boundaries. Let’s adjust the conclusion of the animation by around 15%.

Upon previewing our project, we can scroll to the “Track” Segment and our interaction scrolls our items horizontally until we reach our fourth and final item.

Adjust for mobile devices

While configuring a horizontal scroll animation, one factor to remember is the usability for tablet and mobile users. If a user on a mobile device attempts to move left and right, the horizontal scroll interaction won’t operate as anticipated because it only functions if your user scrolls vertically. Hence, it does not offer a very user-friendly experience for mobile users.

To configure our interaction to transpire solely for desktop users:

1. Pick the “Track” Segment
2. Access the Interactive panel
3. Click on the interaction called Scrolling within view that we previously set up (e.g., “Animation on horizontal scroll”)
4. Uncheck the mobile devices on which we do not wish to enable this interaction (e.g., Tablet, Phone landscape, and Phone portrait breakpoints)

Now, since the interaction is disabled on mobile devices, we must optimize our layout for vertical scrolling on tablets and smaller screens:

Section for Mobile “Tracking”

1. Choose the Tablet breakpoint
2. Select the “Track” Segment on the design board
3. Access the Styling section > Dimensions
4. Modify the height from 400vw to Auto (allowing it to adjust height automatically based on the content inside)

Block for Mobile “Camera”

1. Choose the “Camera” Block
2. Access the Styling panel > Dimensions
3. Set both width and height to Auto (letting the content fill up the available space)
4. Keep Overflow at the Default setting of visible (to display all content on smaller screens)

Block for Mobile “Frame”

1. Select the “Frame” Block
2. Access Layout settings > Flexbox
3. Change the Flexbox direction from Horizontal to Vertical

Subsequently, adjust the styling properties of the “Item” Block to suit the vertical scrolling design as desired.

Please note: Changes made at the Tablet breakpoint will not affect the Desktop view, but will reflect on both Mobile landscape and Mobile portrait breakpoints.

That’s it! Horizontal scrolling in Webflow has been successfully set up.