How can I make collection list item cards scroll horizontally like the UI on Instagram?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To make collection list item cards scroll horizontally like the UI on Instagram in Webflow, you can follow these steps:

Create a Collection List: Start by creating a Collection List in the Designer. Add the necessary fields to store the information for each item, such as images, titles, captions, etc.
Design the Collection List Item: Design the layout for each item card within the Collection List. Set the width of each card to fit your desired horizontal scroll area. You can use a combination of Div Blocks, Image elements, and Text elements to create the desired layout. Apply styles and positioning as needed to achieve the desired look for each card.
Enable Overflow: To enable horizontal scrolling, you need to set the overflow property of the Collection List Wrapper to scroll. This will allow the content to exceed the width of the wrapper and create the horizontal scroll effect. You can access the Collection List Wrapper in the Navigator panel.
Set Flexbox Layout: Select the Collection List Wrapper, and in the Styles panel, set the display property to flex. This allows you to control the layout of the collection items within the wrapper. Set the "Flex Direction" property to row to arrange the items horizontally.
Adjust the Collection List Item Width: By default, the Collection List item will try to fill the available space within the wrapper. To ensure that each item card is displayed as a single row, you need to restrict the width of each item. Select the Collection List item in the Designer, go to the Styles panel, and set the width of each card.
Manage Overflow: To make sure the horizontal scroll effect works properly, you may need to adjust the positioning and spacing of the items within the Collection List. Check that there is no unnecessary white space or overlapping elements that may interfere with the scrolling experience.
Preview and Test: Preview your design and ensure that the collection items are displayed horizontally and can be scrolled within the wrapper. You can use the "Preview" button in the Designer to see the horizontal scroll functionality in action.

By following these steps, you can create a collection list with horizontally scrolling item cards like the UI on Instagram. We hope this helps you achieve the desired design and functionality for your Webflow project!

Additional Questions:

How do I create a horizontal scroll effect for a collection list in Webflow?
Can I customize the appearance of the horizontal scroll bar for the collection list?
How can I add interactions or animations to the collection list item cards?

How can I achieve a fade effect in the navigation background using Webflow?

Question: Can I target a class with a combo class for specific steps in a Webflow interaction without affecting other blocks?

Can Webflow be used to create a list with clickable items that close when something else is clicked?

What are the issues with the page load animations in Google Chrome on Windows and with the hover and press effects on the Enter button on the landing page in Webflow?

How can you create a scroll effect in Webflow that fades out one background image while fading in another?

How can I create a horizontal scrolling effect like an Instagram story on desktop using Webflow and a CMS generated Rich text field with multiple images and videos?

Is setting up a contact form that slides out from the right side of the page considered an interaction in Webflow?

How can I create an animation with a loop stop and mouse over interaction, similar to the one on www.revolut.com, using Webflow?

Can anyone help me with changing the color of an SVG icon in Webflow when hovering over it?

How can I prevent a blank space when using autoplay slides in Webflow?