Is it possible to create an infinite scroll carousel like the one in Ran Segall's case study using Webflow?
TL;DR
- Create a horizontal flex container with two identical sets of content inside to enable seamless looping.
- Use Webflow “Move” interactions for horizontal scrolling and enhance smoothness with custom JavaScript if needed.
Yes, it’s possible to create an infinite scroll carousel like the one Ran Segall uses in his case study using Webflow, but it requires a combination of native Webflow interactions and some custom code for true seamless looping.
1. Understand the Effect from Ran Segall's Site
- Ran’s carousel features logos or images scrolling in an infinite horizontal loop, usually autoplaying smoothly.
- The content repeats seamlessly, often with identical copies of the same content trailing the original.
2. Build a Static Scroll Strip in Webflow
- Create a horizontal flex container (set to overflow: hidden).
- Inside it, create a content wrapper (a div set to display: flex, horizontal direction).
- Add two identical sets of content (e.g., logo rows) so that when the first exits, the second continues seamlessly.
3. Apply Webflow Interactions for Scrolling
- Use a Webflow “Move” animation to move the content wrapper leftward along the X-axis.
- Set it to a looped animation so it continuously scrolls.
- Make sure the animation ends exactly where the loop can start over without visible jumps.
4. Add Custom Code for Seamlessness (If Needed)
- For truly smooth infinite loops (without breaks or restart jumps), you may need a bit of custom JavaScript.
- Typical solution: use
requestAnimationFrame()for purely smooth motion and reset the transform position once the first loop completes. - Attach this script in the Page Settings > Footer Code or via Custom Code Embed in Webflow.
5. Test and Optimize
- Check different screen sizes and mobile behavior.
- Ensure images are optimized and use Webflow’s native loading="lazy" attribute to boost performance.
Summary
You can replicate Ran Segall’s infinite scroll carousel by duplicating your content inside a flex container and using Webflow interactions or lightweight custom code for smooth continuous scrolling. For a professional result, custom JavaScript often improves the smoothness and removes any visible jump.