{"id":5250,"date":"2024-04-14T11:30:58","date_gmt":"2024-04-14T03:30:58","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5250"},"modified":"2024-04-14T11:30:58","modified_gmt":"2024-04-14T03:30:58","slug":"sideways-scrolling","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/sideways-scrolling\/","title":{"rendered":"Sideways Scrolling"},"content":{"rendered":"\n
\n

However, let me share a little secret \u2014 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.<\/p>\n

Within this tutorial, you will grasp how to produce a horizontal scrolling effect by carrying out the following steps:<\/p>\n

    \n
  1. Establish the \u201cTrack\u201d Segment<\/li>\n
  2. Arrange the \u201cCamera\u201d Block<\/li>\n
  3. Construct the \u201cFrame\u201d Block<\/li>\n
  4. Incorporate elements<\/li>\n
  5. Adjust the behavior<\/li>\n
  6. Optimize for mobile devices<\/li>\n<\/ol>\n

    Establish the \u201cTrack\u201d Segment<\/h2>\n

    Initiate the foundational structure of the sideways scroll segment by introducing a Segment<\/strong> component that encloses all the internal elements:<\/p>\n

      \n
    1. Pluck a Segment<\/strong> component from the Add panel<\/strong> onto the page (the Segment<\/strong> is set to 100% width by default)<\/li>\n
    2. Access the Selector<\/strong>field<\/strong> within the Style panel<\/strong><\/li>\n
    3. Assign a class name to the Segment <\/strong>via our Selector<\/strong>field<\/strong> (for instance, \u201cTrack\u201d, yet we have the liberty to select any name)<\/li>\n<\/ol>\n
      \n
      <\/div>\n<\/figure>\n

      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<\/strong>.<\/p>\n

      Adjust the \u201cTrack\u201d Segment\u2019s stature<\/h4>\n

      Let\u2019s define a height for our Segment<\/strong>:<\/p>\n

        \n
      1. Unveil the Style panel<\/strong> > Size<\/strong><\/li>\n
      2. Specify the height<\/strong> as 400vw<\/li>\n<\/ol>\n
        \n
        <\/div>\n<\/figure>\n

        Heed<\/strong>: the utilization of VW (viewport width) is because we\u2019re horizontally scrolling across 4 items. Each item corresponds to 100vw in height (such as, 4 items equates to 400vw).<\/p>\n

        <\/p>\n

        Arrange the \u201cCamera\u201d Block<\/h2>\n

        Let\u2019s now integrate an element that will serve as our viewport for observing the scrolling items:<\/p>\n

          \n
        1. Place a Block element<\/strong> from the Add<\/strong>panel<\/strong> into the \u201cTrack\u201d Segment<\/strong><\/li>\n
        2. Enter the Selector<\/strong>field<\/strong> within the Style panel<\/strong>\u00a0<\/li>\n
        3. Attach a class name to the Block element<\/strong> (e.g., \u201cCamera\u201d, yet we retain the flexibility to select any name)<\/li>\n<\/ol>\n
          \n
          <\/div>\n<\/figure>\n

          Insider tip<\/strong>: We can expedite access to the Selector<\/strong>field<\/strong> of a selected element by employing shortcut keys, namely Command + Enter<\/strong> (on Mac) or Control + Enter<\/strong> (on Windows).<\/p>\n

          Designing the \u201cCamera\u201d<\/h3>\n

          The \u201cCamera\u201d Block<\/strong> operates as a window through which the scrolling items will be visible. Once you select the \u201cCamera\u201d Block<\/strong>, ensure its dimensions match the viewport precisely, and have it remain fixed to its parent component:<\/p>\n

          <\/p>\n

            \n
          1. Access the Style panel<\/strong> > Size<\/strong><\/li>\n
          2. Establish the width<\/strong> as 100vw (equating to 100% of the viewport width)<\/li>\n
          3. Define the height<\/strong> as 100vh (equating to 100% of the viewport height)<\/li>\n
          4. Scroll down to the Position<\/strong> settings in the Style panel<\/strong><\/li>\n
          5. Alter the position from Static<\/strong> to Sticky<\/strong><\/li>\n
          6. Integrate a top position of 0 pixels (the spacing between the top of the \u201cTrack\u201d Segment<\/strong> and the top of the \u201cCamera\u201d Block<\/strong>)<\/li>\n<\/ol>\n
            \n
            <\/div>\n<\/figure>\n

            By setting an element as sticky, we are automatically defining the parent element as the container that its child element will adhere to.<\/p>\n

            Construct the \u201cFrame\u201d Block<\/h2>\n

            Let\u2019s establish our \u201cFrame\u201d Block<\/strong> to align the items horizontally:<\/p>\n

              \n
            1. Insert a Block element<\/strong> from the Add<\/strong>panel<\/strong> into the \u201cCamera\u201d Block<\/strong><\/li>\n
            2. Access the Selector<\/strong> field within the Style panel<\/strong>\u00a0<\/li>\n
            3. Name the Block element<\/strong> (e.g., \u201cFrame\u201d, yet we are at liberty to choose any designation)<\/li>\n<\/ol>\n
              \n
              <\/div>\n<\/figure>\n

              Insert items<\/h2>\n

              We shall commence by generating an element that will enclose our illustration:<\/p>\n

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

                <\/p>\n

                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<\/strong> > Spacing<\/strong> and fix the padding.<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                Presently, we can embed an image within the \u201cArtifact\u201d Section block<\/strong> we have just formed.<\/p>\n

                Customize the visuals within the items<\/h3>\n

                In this instance, we are employing illustrations that occupy the entire breadth and altitude of the \u201cArtifact\u201dSection block<\/strong>.\u00a0<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                We should likewise append some padding to all edges of the image to offer the images some space to breathe:\u00a0<\/p>\n

                  \n
                1. Launch Design panel<\/strong> > Extent<\/strong><\/li>\n
                2. Assign the breadth<\/strong> as 100%<\/li>\n
                3. Set the altitude<\/strong> as 100%<\/li>\n
                4. Adjust Fit<\/strong> to Encompass<\/strong><\/li>\n<\/ol>\n
                  \n
                  <\/div>\n<\/figure>\n

                  Setup the \u201cViewfinder\u201d for our items<\/h3>\n

                  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 \u201cViewfinder\u201d overview.<\/p>\n

                  <\/p>\n

                  Nevertheless, the items overflow from the \u201cViewfinder\u201d 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:\u00a0<\/p>\n

                    \n
                  1. Elect the \u201cViewfinder\u201d Div block<\/strong> (or as you may have designated it)<\/li>\n
                  2. Expand Design panel<\/strong> > Extent<\/strong><\/li>\n
                  3. Configure Overflow<\/strong> as Hidden<\/strong>\u00a0<\/li>\n<\/ol>\n
                    \n
                    <\/div>\n<\/figure>\n

                    By setting the \u201cViewfinder\u201d overflow to hidden, any attempt to scroll left and right will be hindered. This positions us to adjust our interaction, which will relocate the \u201cContainer\u201d from right to left.<\/p>\n

                    Tune the maneuver<\/h2>\n

                    In our scenario, our components comprise the \u201cTrack\u201d Section<\/strong> > the \u201cViewfinder\u201d Div block<\/strong> > the \u201cContainer\u201d Div block<\/strong> > the \u201cArtifact\u201d Div block<\/strong> > the illustration element.<\/p>\n

                    \n
                    <\/div>\n<\/figure>\n

                    Our aim with the interaction is to allow the “Track” Div block<\/strong> to instigate the interaction.that shifts the \u201cFrame\u201d Block Div<\/strong> from rightwards to leftwards.<\/p>\n

                    Establish the trigger<\/h3>\n

                    Pick the \u201cTrack\u201d Segment<\/strong> and open up the Interactions panel<\/strong>: <\/p>\n

                      \n
                    1. Tap on the addition symbol for Element trigger<\/strong><\/li>\n
                    2. Choose During scrolling within view<\/strong><\/li>\n
                    3. Press the dropdown for Action<\/strong><\/li>\n
                    4. Choose Play scroll animation<\/strong><\/li>\n
                    5. Tap on the addition symbol for Scroll animations<\/strong> to start a new animation<\/li>\n
                    6. Name the new animation (e.g., \u201cHorizontal scroll animation\u201d)<\/li>\n<\/ol>\n
                      \n
                      <\/div>\n<\/figure>\n

                      Displace the \u201cFrame\u201d with the interaction<\/h3>\n

                      Now that we have designated the “Track” Segment<\/strong> as our trigger, we must single out the \u201cFrame\u201d Block Div<\/strong> in the Navigator<\/strong>. By choosing the \u201cFrame\u201d Block Div<\/strong> during the creation of the interaction, we can incorporate an animation to the \u201cFrame\u201d Block Div<\/strong>.<\/p>\n

                      <\/p>\n

                      Return to the Interactions panel<\/strong>, and let\u2019s craft our interaction on the \u201cFrame\u201d Block Div<\/strong> when the Track Segment<\/strong> comes into view:<\/p>\n

                        \n
                      1. Tap on the addition symbol<\/li>\n
                      2. Choose Shift<\/strong><\/li>\n
                      3. Fix the shift on the x-axis from 0% to 0vw (since this is the commencement point of our interaction)<\/li>\n<\/ol>\n
                        \n
                        <\/div>\n<\/figure>\n

                        The final step is to adjust the shift on the x-axis from 100% to -300vw.<\/p>\n

                        \n
                        <\/div>\n<\/figure>\n

                        <\/p>\n

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

                        <\/p>\n

                        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.<\/p>\n

                        Adjust the offset of the interaction<\/h4>\n

                        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<\/strong> too swiftly.<\/p>\n

                        <\/p>\n

                        We can fine-tune the interaction in 2 methods:<\/p>\n

                          \n
                        • Modify the commencement of our animation to commence at 20%<\/li>\n
                        • Alter our animation to initiate when the “Track” Segment<\/strong> is entirely visible <\/li>\n<\/ul>\n

                          <\/p>\n

                          To amend the beginning of our animation to commence at 20%:<\/p>\n

                            \n
                          1. Unfold Interactions panel<\/strong> > \u201cHorizontal scroll animation\u201d interaction<\/li>\n
                          2. Press the Shift<\/strong> action that commences at 0%<\/li>\n
                          3. Adjust the keyframe to 20%<\/li>\n<\/ol>\n
                            \n
                            <\/div>\n<\/figure>\n

                            <\/p>\n

                            To adjust our animation to start when the “Track” Segment<\/strong> is fully visible:<\/p>\n

                              \n
                            1. Unfold Interactions panel<\/strong> > Animation boundaries<\/strong><\/li>\n
                            2. Pick Is entirely visible<\/strong><\/li>\n<\/ol>\n
                              \n
                              <\/div>\n<\/figure>\n

                              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<\/strong> while our interaction is still in motion.<\/p>\n

                              Personalize the conclusion of the interaction<\/h3>\n

                              Revisit the Interactions panel<\/strong>, and Animation boundaries<\/strong>. Let\u2019s adjust the conclusion of the animation by around 15%.<\/p>\n

                              \n
                              <\/div>\n<\/figure>\n

                              Upon previewing our project, we can scroll to the \u201cTrack\u201d Segment<\/strong> and our interaction scrolls our items horizontally until we reach our fourth and final item.<\/p>\n

                              Adjust for mobile devices<\/h2>\n

                              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.<\/p>\n

                              <\/p>\n

                              To configure our interaction to transpire solely for desktop users: <\/p>\n

                                \n
                              1. Pick the \u201cTrack\u201d Segment<\/strong><\/strong><\/li>\n
                              2. Access the Interactive panel<\/strong><\/li>\n
                              3. Click on the interaction called Scrolling within view<\/strong> that we previously set up (e.g., \u201cAnimation on horizontal scroll\u201d)<\/li>\n
                              4. Uncheck the mobile devices on which we do not wish to enable this interaction (e.g., Tablet, Phone landscape, and Phone portrait breakpoints)<\/li>\n<\/ol>\n
                                \n
                                \n \n <\/div>\n<\/figure>\n

                                Now, since the interaction is disabled on mobile devices, we must optimize our layout for vertical scrolling on tablets and smaller screens:<\/p>\n

                                Section for Mobile \u201cTracking\u201d<\/h3>\n
                                  \n
                                1. Choose the Tablet<\/strong> breakpoint<\/li>\n
                                2. Select the \u201cTrack\u201d Segment<\/strong> on the design board<\/li>\n
                                3. Access the Styling section<\/strong> > Dimensions<\/strong><\/li>\n
                                4. Modify the height<\/strong> from 400vw to Auto (allowing it to adjust height automatically based on the content inside)<\/li>\n<\/ol>\n

                                  Block for Mobile \u201cCamera\u201d<\/h3>\n
                                    \n
                                  1. Choose the \u201cCamera\u201d Block<\/strong><\/li>\n
                                  2. Access the Styling panel<\/strong> > Dimensions<\/strong><\/li>\n
                                  3. Set both width and height to Auto (letting the content fill up the available space)<\/li>\n
                                  4. Keep Overflow<\/strong> at the Default<\/strong> setting of visible (to display all content on smaller screens)<\/li>\n<\/ol>\n

                                    Block for Mobile \u201cFrame\u201d<\/h3>\n
                                      \n
                                    1. Select the \u201cFrame\u201d Block<\/strong><\/li>\n
                                    2. Access Layout settings<\/strong> > Flexbox<\/strong><\/li>\n
                                    3. Change the Flexbox<\/strong> direction from Horizontal<\/strong> to Vertical<\/strong><\/li>\n<\/ol>\n

                                      <\/p>\n

                                      Subsequently, adjust the styling properties of the \u201cItem\u201d Block<\/strong> to suit the vertical scrolling design as desired.<\/p>\n

                                      <\/p>\n

                                      Please note<\/strong>: Changes made at the Tablet breakpoint will not affect the Desktop view, but will reflect on both Mobile landscape and Mobile portrait breakpoints.<\/p>\n

                                      \n
                                      \n \n <\/div>\n<\/figure>\n

                                      <\/p>\n

                                      That’s it! Horizontal scrolling in Webflow has been successfully set up.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Horizontal scrolling fully engages visitors by using a unique interaction that changes their scrolling experience from vertical to right to left.","protected":false},"author":2,"featured_media":5251,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5250","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5250"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5250\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5251"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}