ScrollTrigger marker drifts with Lenis Smooth Scroll on fixed main element

[Kopp001]

Hi everyone,

 

I'm in the middle of a bit of a pickle on a web project I'm working on and could really use your expertise.

 

I've got this website where I'm using SWUP for page transitions, which necessitated me to have my main element position fixed and apply the scrolling behavior directly to it. It works well for the most part, except I'm running into a hiccup with GSAP's ScrollTrigger.

 

 

Here's the nub of it: the ScrollTrigger's start marker, which I need to stick to the top of the viewport, has a mind of its own. It seems to be taking a leisurely stroll up the screen whenever I scroll, thanks to the inertia from Lenis, before snapping back into place. This isn't quite the behavior I was hoping for—I need that marker to be steadfast at the top, come what may with the scrolling.

 

For a clearer picture, I've whipped up a CodePen to showcase what's happening...

 

I've tried to outsmart it by dynamically recalculating the start position and even attempting to offset it based on Lenis' scroll position, but no dice so far.

Does anyone have experience taming this kind of behavior? How can I anchor the ScrollTrigger start marker to the top of the viewport so that it's immune to the whims of Lenis-induced inertia?

 

Any nudge in the right direction would be a lifesaver!

 

Cheers!

See the Pen YzgqLKm by saiykoh (@saiykoh) on CodePen

[Cassie]

Hey there,

 

The markers are just a visual guide, so it shouldn't really matter, I think the shift you're seeing is more down to the fact that you're scrolling in a fixed child div instead of the body. Was this affecting animations or just bugging you from an operational perspective?

If you scroll the body it's fine - just incase that's an option. I assume you're scrolling the child for a reason though.

See the Pen ExMKLvr by GreenSock (@GreenSock) on CodePen

There's bound to be some little inconsistencies when you use third party libraries, that's why we have ScrollSmoother!

 

Hope this helps a little.