Parallax scroll isn't smooth - any ideas?

[FBOMB]

Hi, I am working on some parallax layers for a concert scene as you scroll (crowd, foreground band, background band, stage background) and I am wondering how I can make it more smooth as you scroll? Sometimes it is a bit choppy. Am I not supposed to initially set the top or left margins in css? If not, how would I do it? Where exactly am I going wrong in this example?

 

Thanks!

See the Pen RwYObvK by tnse (@tnse) on CodePen

[Rodrigo]

Hi,

 

Just use a number value for scrub:

gsap.to(".para", {
  scrollTrigger: {
    scrub: 1.5 // <- Here
  }, 
  y: (i, target) => -ScrollTrigger.maxScroll(window) * target.dataset.speed,
  ease: "none"
});

From the docs:
Scrub:   Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following
Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

Hopefully this helps.

Happy Tweening!

[FBOMB]

Thank you for the thorough explanation, it's working much better in Safari and Firefox! It is still a bit laggy in Chrome though, is this a known issue with Chrome? Are there any settings that can fix the Chrome lag? Thanks again!

[Rodrigo]

Hi,

 

I'm not seeing any issues on Chrome in Ubuntu 20 & 22.

 

The one thing you can try is this in your css:

.para {
  will-change: transform;
}

Beyond that I can't offer much advice, sorry. Performance is a deep topic and in over 11 years around GSAP I can guarantee you that 99.99% of the times is a browser rendering/layering/shifting issue than GSAP. Performance bottlenecks are normally related to rendering.

 

Hopefully this helps.

Happy Tweening!