ScrollMagic infinite scroll with snap effect

Question

hope I don’t create a double of some tickets… I’m a novice in JS so I hope that someone have already tried to do this.

I’m trying to do an infinite scroll like this example: http://scrollmagic.io/examples/advanced/infinite_scrolling.html

And I try to « snap » the squares at the top of the window when is near, but not to force it like a swipe site, just smooth when user stop scrolling / touching (mobile)…

I'm trying to remove the firsts square when newer are charged for has a maximum of X square in the page…

I try my best and I am sure that my code has no real interest to be shared 😅.

There is an codepen where I reproduce the code : https://codepen.io/Flynmcfly/pen/KKyReLw

<div id="content-wrapper">
  <div id="example-wrapper">
    <section class="scrollContent">
      <section id="titlechart">…</section>
      <section class="demo dynamicContent">
        <div id="content">

          <div class="box1" style="background-color: rgb(235, 210, 33);"></div>
          <div class="box1" style="background-color: rgb(87, 220, 70);"></div>
          <div class="box1" style="background-color: rgb(142, 21, 139);"></div>
          <div class="box1" style="background-color: rgb(105, 109, 37);"></div>
          <div class="box1" style="background-color: rgb(185, 221, 165);"></div>

        </div>
        <div id="loader">
          LOADING...
        </div>
      </section>

      </div>
  </div>
</div>

Hope someone could help me in this exercice…