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 Solution?

If you're in search of a solution in Webflow, we're more than happy to offer our consultation services for free.

Schedule Free Consultation