Infinite scroll jumping

[robbyklein]

Hey there,

I recently discovered Lenis from the article here. I was trying to get a basic scroll loop going just like the simple example code in the article. Problem is when I try it it keep's jumping, was wondering what's going wrong.

Here's a codepen demonstrating the issue, and here's the code I'm using:

const repeatItems = (parentEl, total = 0) => {
    const items = [...parentEl.children];
    for (let i = 0; i <= total-1; ++i) {
        var cln = items[i].cloneNode(true);
        parentEl.appendChild(cln);
    }
};

repeatItems(document.querySelector('.loop'), 5);

const lenis = new Lenis({
  smooth: true,
  infinite: true,
});

function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

<div class="loop">
  <div class="section red">1</div>
  <div class="section green">2</div>
  <div class="section yellow">3</div>
  <div class="section blue">4</div>
  <div class="section purple">5</div>
</div>

/* Reset not shown */

.section {
  height: 600px;
  line-height: 600px;
  text-align: center;
  font-weight: 900;
  color: white;
  font-size: 200px;
  
  &.red {
    background: red;
  }
  
  &.green {
    background: green;
  }
  
  &.yellow {
    background: yellow;
  }
  
  &.blue {
    background: blue;
  }
  
  &.purple {
    background: purple;
  }
}

Any help would be appreciated, thanks!

[clementroche]

Your clone element should be 100vh, see the fixed codepen

[robbyklein]

Thanks for the reply @clementroche, this seems to have fixed desktop! It's not working on mobile though (ios safari), is there a way to fix that?

[clementroche]

Right, use v1.0.0-dev.5

[robbyklein]

@clementroche I dropped in this guy https://github.com/studio-freight/lenis/blob/1.0.0-dev.5/bundled/lenis.min.js

But unfortunately it's still not looping :(

[clementroche]

infinite option only works on smooth context, so you can use smoothTouch: true

[robbyklein]

Cool, this didn't work super smooth, but it does make the site loop. Thanks for your help!