Is it possible to create an infinite scroll carousel like the one in Ran Segall's case study using Webflow?

Yes, you can create an infinite scroll carousel similar to Ran Segall’s case study in Webflow, but it requires a combination of Webflow’s native animations and custom JavaScript for truly seamless infinite looping.

1. Build the Carousel Structure

• Use a horizontal flexbox or set the Slider/Div to display: flex and overflow: hidden.
• Add a container (carousel-wrapper) with a row of items (carousel-item), all inside a masking div.

2. Duplicate Carousel Items for Seamless Looping

• Duplicate the content inside the carousel once or twice to simulate infinite scrolling.
• This provides a buffer that can scroll past the original set of items, creating the illusion of continuous motion.

3. Apply Webflow Interactions (Optional)

• Use Webflow’s Scroll-based or timed animations to move the container on a continuous loop if desired.
• For smoother control, Webflow’s native tools alone aren’t enough—you’ll need custom code.

4. Add Custom JavaScript for True Infinite Loop

• You will need to insert a custom JavaScript script in the Page Settings > Footer Code or via an Embed element.
• Key functionality: once the scroll reaches a certain point (like the end of the duplicated items), the scroll position should jump (without transition) back to the starting position.
• This creates the “seamless” loop effect people associate with infinite carousels.

5. Add CSS for Smooth Scrolling (Optional)

• Add custom styles (via custom code) like scroll-behavior: smooth; or use requestAnimationFrame() to manage consistent motion if animating with JS.

Summary

A truly infinite scroll carousel like Ran Segall’s requires a combination of duplicated content, custom JavaScript, and Webflow animations. Webflow alone cannot create a seamless loop, but it provides the structure and animation you can enhance with code.