Infinite Horizontal Scroll

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

Style

Copy
/* 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;  }

‍

Documentation

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>.

‍

Conclusion

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.

Schedule Free Consultation