ScrollToPlugin and ScrollTrigger (with scrub) not getting along

[braunsock]

In my pen I have 2 instances of ScrollTrigger that animate a "horizontal scroll" while pinning the whole page before proceeding vertical scrolling again.

 

To this I want to use the ScrollToPlug. The fixed nav's buttons do this. However, there is a problem with scrollTo's vertical travel being "eaten up" by my scrubbed horizontal ScrollTrigger animations (thats what it looks like anyway).

 

None of my scrollTo targets are within the "horizontally scrolled" content. Ideally, we just skip pass them when a scrollTo is happening.

 

So, I tried disabling my 2 ScrollTriggers once a button is clicked, and then re-enabling them once arriving at the destination (onComplete). The problem now is that the page snaps to the top after re-enabling the scroll triggers.

 

Do I need to add something more or am I heading down the wrong road?

See the Pen wvEdMqb by dan_default (@dan_default) on CodePen

[elegantseagulls]

The issue with this is that the horizontal animations are technically part of the scroll. If you try to skip these sections, you'll either have to pass a large blank space (the space the horizontal scrub is actually scrolling when pinned) or you'll have to re-flow the page, which is really difficult to calculate the current/previous/future scroll positions, and browsers don't like to repaint things like this, so there'll likely be some glitchyness.

[braunsock]

So if that's not possible, what about not skipping the horizontal animations then? Here I'm not disabling ScrollTrigger, but you'll see the other problem then:

See the Pen PodGpvj by dan_default (@dan_default) on CodePen

[GreenSock]

Yep, there's a helper function for that: 

https://greensock.com/docs/v3/HelperFunctions#getScrollLookup

 

It basically involves creating a ScrollTrigger for each of those elements so you can just look at its "start" value to know exactly where to scroll: 

See the Pen poOPEpj?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[braunsock]

On 3/2/2023 at 7:31 PM, GreenSock said:

Yep, there's a helper function for that: 

https://greensock.com/docs/v3/HelperFunctions#getScrollLookup

 

 

Does that help? 

Thanks Jack. I do want to make sure I understand. The function you're referencing in docs doesn't exactly match the function you've added to your fork of my codepen. Is this an update that hasn't been documented yet? Or is it a special version just for my situation?

 

In addition to this question, is there a way to use "hash" links (www.example.com/#id) whist I am using ScrollTrigger as above? Currently, it's not working (seems like the same problem) I solved this by using hashes that weren't actually on the page and mapping them to the sections which then allowed me to again use Gsap's scrollTo.

 

...and something else I just noticed: This seems to break after a viewport resize. For example, click on "Stop 4", then resize. Clicking "Stop 1" will only scroll a partial distance there.

 

[GreenSock]

Sorry about the confusion there. I did update it before I posted here, but there was an SSL problem that caused the docs page not to save the update. It's resolved now. And yes, I tweaked the helper function for your use case (to add the ability to specify a pinnedContainer). 

 

Does that clear things up? 

[braunsock]

Thanks for the explanation, that makes sense.

 

However, there exists an issue after the window is resized where target positions seem to get lost. Is this solve-able?

 

Very appreciative of all the the help I've been receiving! Seriously!

[GreenSock]

Ah yes, thanks for pointing that out. It should be resolved in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you'll need to clear your cache)

 

Explanation: pinning is complicated and pinning containers is even more complicated - what ScrollTrigger must do in order to calculate start/end values properly on a refresh() is to revert everything (tear down all pin-spacers, etc.), then go from top to bottom in order and measure things out, factoring in previous pin spacing in subsequent ones. If you pin an element for 500px, for example, that pin spacing will likely push other elements below it 500px further down on the page, etc. And when you pin the container, it must factor in that as well...and if you pin the container multiple times, that's another layer of complexity. I needed to add code to revert any pinnedContainer ScrollTriggers further up. Anyway, you don't need to understand any of that - I'm just trying to offer a little background. Again, it should be resolved in the next release. Sorry about any confusion there. 👍

[braunsock]

On 3/8/2023 at 12:30 AM, GreenSock said:

you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you'll need to clear your cache)

Thanks Jack. I tried this preview on a local project and it works!  🎉 However, I want to note that I was already using a "beta" 3.11.5 version of ScrollTrigger which was slightly different and exhibited the problem I described. That beta was shared by you with me in another post. I wanted to share that in case it's important.

 

Looking forward to the next release

[GreenSock]

2 hours ago, braunsock said:

I want to note that I was already using a "beta" 3.11.5 version of ScrollTrigger which was slightly different and exhibited the problem I described.

Thanks for clarifying and yes, it's because I updated the beta specifically to address this edge case. 👍