Infinite Horizontal Scroll

Transform Webflow projects with a sleek, infinite horizontal scroll to showcase your work effortlessly.


/* Define a keyframe animation named 'scroll' */  @keyframes scroll {    /* Start of the animation */    from {      transform: translateX(0);    }    /* End of the animation */    to {      transform: translateX(calc(-100% - 2rem));    }  }  /* Apply the 'scroll' animation to elements with class 'scroll' */  .scroll {    animation: scroll 100s linear infinite;  }  /* Reverse the direction of the animation */  .reverse {    animation-direction: reverse;  }  /* Apply a hardware-accelerated 3D transformation*/  .image {    -webkit-transform: translateZ(0);  }  /* Pause the 'scroll' animation. Replace .wrapper with your parent class name*/  .wrapper:hover .scroll {    animation-play-state: paused;  }


Elevate your Webflow design by adding a sleek infinite horizontal scroll effect. This simple CSS solution allows you to effortlessly display your projects, catching the attention of your audience.

Step-by-Step Guide

Follow these easy steps to implement the scroll feature and bring a touch of magic to your website.

1. Create DOM Structure

Begin by placing all your thumbnail images inside a wrapper div block and assign it any class name. Duplicate this wrapper block, maintaining the same set of thumbnail images. Let's name this wrapper div block class as <span class="code">.header_projects-hold</span>.

DOM Structure for creating infinite horizontal scroll

2. Apply Combo Class

Add a combo class to the wrapper class, calling it <span class="code">.scroll</span>.

3. Insert CSS Code

Insert the CSS code just before the closing <span class="code">body</span> tag in your Webflow project.

It's essential to match the <span class="code">-2rem</span> value in the style with the actual spacing between the items. This ensures a smooth scrolling experience without glitches at certain points.

If you prefer the thumbnails to move in reverse, apply the <span class="code">.reverse</span> combo class instead of <span class="code">.scroll</span>.


Embrace the charm of an infinite horizontal scroll in your Webflow projects effortlessly. Whether you want to captivate your audience with a continuous showcase or add a unique touch to your portfolio, this straightforward solution promises to enhance your website's visual appeal. Enjoy the magic of seamless scrolling!

Need a Custom Webflow Solution?

If you're in search of a solution, we're more than happy to offer our consultation services for free. We can provide you with a roadmap that shows you how you can achieve the desired results. If you want us to proceed with building the solution, we would be delighted to do it for you.