Smooth scroll images are umpy

[BlackTulipCreations]

WEBSITE: https://litwixco.com/

The scrolling images in the background of the  Homepage at the URL above are jumpy on both desktop and mobile. the jumps seem bigger an more apparent on mobile although it doesn't happen every scroll.  Please help

See the Pen mdgrrbr by rtwoods88 (@rtwoods88) on CodePen

[mvaneijgen]

Hi @BlackTulipCreations welcome to the forum and thanks for being a club member!

 

We normally don't debug live website, there is just no way to modify the code to gleam any meaning full insight from it, but I did my best and I can't seem anything weird. The codepen you've shared works perfectly, no matter how fast I scroll. 

 

The only thing I can think of is that something is lazy loading the images, which is conflicting with the ScrollSmoother here. Is that something you can loop in to? Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

I tested on my desktop and laptop, an iPad on iOS 17 and an android device without much issues. The only suggestion I can give you is to add will-change: transform; to the elements with the images on the styles:

.img-wrapper {
  direction: grid;
  margin-top: 300px;
  width: 100%;
  padding: 3rem;
  will-change: transform;
}

 

Hopefully this helps.

Happy Tweening!