title: How to know the max `width` in `translateX` animation?
body: <p>I just want to create something similar to a carousel. (The carousel is just for desktop).</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div class="image-container"&gt;
    &lt;img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg"&gt;
    &lt;img alt="Change" src="https://diey.now.sh/Icons/Clients/CHANGE_LOGO.svg"&gt;
    &lt;img alt="HF" src="https://diey.now.sh/Icons/Clients/H_F_Logo.svg"&gt;
    &lt;img alt="VDM" src="https://diey.now.sh/Icons/Clients/VDM_Logo.svg"&gt;
    &lt;img alt="Reviu" src="https://diey.now.sh/Icons/Clients/Reviu_Logo.svg"&gt;
    &lt;img alt="Total Capital" src="https://diey.now.sh/Icons/Clients/Total_Capital_Logo.svg"&gt;
    &lt;img alt="AdelantaT" src="https://diey.now.sh/Icons/Clients/AdelantaT_Logo.svg"&gt;
    &lt;img alt="Ayssa" src="https://diey.now.sh/Icons/Clients/Ayssa_Logo.svg"&gt;
    &lt;img alt="Carga Logística" src="https://diey.now.sh/Icons/Clients/Carga_Logistica_Logo.svg"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>
  /* These padding is here because the real page use them */
  .wrapper {
    padding: 0 2.5em;
  
    @media (min-width: 1024px) {
      padding: 0 8em;
    }
  
    @media (min-width: 1280px) {
      padding: 0 12em;
    }
  }
  
  .image-container {
    @media (min-width: 768px) {
      display: flex;
      overflow-x: scroll;
      width: 100%;
  
      ::-webkit-scrollbar {
        width: 0px;
        background: transparent;
      }
    }
  }
  
  img {
    @media (min-width: 768px) {
      height: 100px;
      width: 240px;
      flex-shrink: 0;
      animation: moveSlideShow 9s ease-in-out alternate infinite;
      @keyframes moveSlideShow {
        100% {
          transform: translateX(-1440px);
        }
      }
    }
  
    @media (min-width: 1280px) {
      @keyframes moveSlideShow {
        100% {
          transform: translateX(-1200px);
        }
      }
    }
  }
  </code></pre>
  
  <p>If you check the transform, it works well for the correct size of the screen, for example if the screen has EXACTLY a width of 768px, the translateX would be -1440px because:</p>
  
  <p>There are 9 images each one with 240px of width</p>
  
  <p>240 * 9 = 2160px</p>
  
  <p>Now, by default, in this size of the screen it should show 3 images, so, If I want to ignore those images and to do the <code>translateX</code> exactly to the end, I should do:</p>
  
  <p>2160 - (240 * 3) = 1440px</p>
  
  <p>And that's it, but only for that size, if the screen is a little bit bigger or smaller the animation is not the right one, how can I calculate the right width that <code>translateX</code> should use?</p>
  
  <p>This project is using React.js and Styled-components, maybe some javascript can help me, but I don't know what code should I use... :( If you have the solution with React-spring, that would be great because I'm learning it and a solution with this tool would be interesting :)</p>