title: Creating an infinite horizontal scrolling gallery
body: <p>I'm trying to get this gallery of images to scroll from left to right infinitely.
  I'm writing it in Ruby on Rails, and the images come from the admin side, where they're being uploaded.</p>
  
  <p>So the looping works fine with the code below, this means that once the last image has left the screen their position will be reset at -1500 off to the left screen but once I start adding more images, the position needs to increase as well. 
  How can make the images leave and enter the screen at the same position without changing the position in the function everytime?
  Thanks in advance, sorry if I forgot anything it's my first time posting here.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;% @posts.each do |post| %&gt;
      &lt;% if post.photo.attached? %&gt;
        &lt;div class="photo-flow ml-2"&gt;
          &lt;%= cl_image_tag post.photo.key, class: " box", alt: 'photo'%&gt;
        &lt;/div&gt;
      &lt;% end %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>const MAX_POSITION = 1500;
  const boxes = document.querySelectorAll('.box');
  let position = 0;
  
  function animate() {
    position += 2;
  
    if (Math.abs(position) &gt;= (
      window.innerWidth || document.documentElement.clientWidth
    )) {
      position = -1500;
    } 
  
    boxes.forEach(box =&gt; {
      box.style.transform = `translateX(${position}px)`
    });
  }
  </code></pre>