Using ScrollTrigger w/ fixed position sections

[creativeocean]

I've built a thing that uses a ScrollTrigger to scrub a timeline, which transitions in/out fixed-position page sections. It's working fairly well, however, there's something happening in the snapping's velocity calculation that is causing issues when you click a progress marker button and scrollTo a specific point in the page. If you set the duration on line 315 of the JS to something like 1, it works fine...because that was enough time for the velocity calculation to simmer down. I thought maybe toggling the disable/enable would be the fix, but it seems the velocity is calculated regardless of if the specific ST is enable.

 

Two questions: 1) is there a way to use 'label' snapping without velocity calculations, and just move to the nearest label at the end of the delay, and 2) is it possible to change the snap property after an ST has been created? 

See the Pen b0028a71d7263ff1122245389cb7d721?editors=1010 by creativeocean (@creativeocean) on CodePen

[GreenSock]

Hey @creativeocean! Slick-looking animation! 👏

 

I do see the issue and I already patched the next version of ScrollTrigger to resolve the majority of this issue, but I'm still looking into one other potential anomaly. I'll need some time for that (it's after 2am and my brain is quite foggy). Stand by...

 

[creativeocean]

@GreenSock thanks for the swift reply and compliment  

 

And no need to rush anything on my behalf! This isn't a pressing issue, more just something I noticed and a few questions that popped up while I was working.

[GreenSock]

Alright, fresh brain. After several hours of investigating, I think it's all patched up. Here you go: 

See the Pen 01d18605539557d61e2bb39485fb3b68?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Better? 

 

I changed snapTo: "labels" to snapTo: "labelsDirectional" because I thought it gave a better experience (start scrolling in one direction, and it'll snap that way even if you're technically closer to the previous section). I also got rid of the disable()/enable() stuff. 

[creativeocean]

Woah! That's awesome, Jack! I love the new "labelsDirectional" behavior. Definitely a better experience...feels really polished. Thanks so much for the incredibly fast action on this. Hopefully this'll be a restful weekend for you 🤞