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!