How to Create a Perfect Horizontal Scrolling Section in Webflow

In this tutorial, we will go through the process of creating a perfect horizontal scrolling section in Webflow. This horizontal scrolling section will be linked to a CMS (Content Management System), so no matter how many items are in the list, it will always calculate the correct distance to move those items across every single breakpoint, using only one Webflow interaction.

Setting up the Horizontal Scrolling Section

To get started, we'll begin by setting up the horizontal scrolling section. Drag a div onto your Webflow canvas and give it a class of horizontal-section. Inside this div, drag a container and give it a combo class of sticky-container. Set the container's minimum height to 100vh so that it takes up 100% of the vertical height of the screen. Apply flexbox to the container to align the content as needed.

The parent of the container should have a greater height than the container itself, for example, 300vh, to allow the container to be positioned sticky and anchor it to the top. The container will stay at the top while scrolling past the horizontal section, thanks to the use of position sticky.

Adding the Collection List

Next, drag a collection list inside the container. The wrapper should have a class of wrapper, while the list should have a class of list. Each item within the list should have a class of horizontal-item. You can customize these class names based on your preferences.

Now, you can design the cards or items to be displayed in the horizontal scrolling section. Ensure that the collection list is set to flexbox, aligning to stretch and justifying to the left. Adjust the width of the items to ensure they align properly within the section.

Resolving Horizontal Scrolling Issue

Initially, you might notice horizontal scrolling within the section. To resolve this issue, you can set the overflow to hidden on the parent of the container. However, when overflow is set to hidden on the parent of a sticky element, the sticky functionality ceases to work. To work around this, add a div inside the horizontal section, give it a class of sticky, and apply position sticky with overflow hidden to this div. Then, place the container inside this sticky div. This configuration will ensure that the horizontal scrolling issue is resolved while retaining the sticky functionality.

Setting Up Interaction

Now, it's time to set up the interaction for the horizontal scrolling. Apply an interaction to the horizontal section, creating an element trigger based on a while-scroll-into-view. Create an animation, and adjust the movement percentage to align the cards as desired within the horizontal section.

However, we encounter a challenge with this approach. When the collection items are added or removed, the animation needs to be adjusted each time to accommodate the change in the number of items. Additionally, the height of the horizontal section affects the scrolling speed of the cards. To address these challenges, we'll use custom code to dynamically calculate the distance to move the items based on the number of cards present and to ensure consistent scrolling speed regardless of the section's height.

Using Custom Code for Dynamic Calculation

To achieve dynamic calculation, remove the explicit height from the horizontal section and insert a div inside the horizontal section with a class of horizontal-trigger. Apply position absolute to this trigger, append the while-scroll-into-view interaction to this trigger, and set it to occur on all breakpoints. Adjust the animation settings as needed.

To achieve dynamic distance calculation and consistent scrolling speed, use custom code to specify the distance to move the items based on the number of cards present. By employing custom code, you can ensure that the scrolling behavior adapts dynamically based on the content within the collection list.

Testing and Mobile Optimization

Once the setup is complete, test the functionality by scrolling through the section. Furthermore, the setup allows for easy optimization on different breakpoints. By simply adjusting the width of the items using percentages, the scrolling behavior can be optimized for various viewport sizes without the need to rebuild the entire interaction. This flexibility ensures that the scrolling behavior is consistent and visually appealing across all devices.

Conclusion

By following the steps outlined in this tutorial, you can create a perfect horizontal scrolling section in Webflow and link it to a CMS. The use of custom code for dynamic calculation ensures that the scrolling behavior seamlessly adapts to changes in the content of the collection list and the section's height, providing a consistent and visually pleasing user experience across different breakpoints.

For further guidance and to explore more advanced interactions, consider checking out the cloneable project in the description or visiting the instructor's Patreon page for additional resources and tutorials. With these tools and techniques, you can enhance your Webflow skills and create engaging horizontal scrolling sections with ease.

In conclusion, utilizing Webflow provides a powerful platform to create dynamic and interactive web designs without the need for extensive manual coding. With its intuitive interface and robust features, Webflow empowers designers to bring their creative visions to life seamlessly.