switch/replace/update trigger when scrolling back up

[pixelarchitect 17 Likes (Newbie)]

I build a pinned element that pins when the bottom of its container reaches the bottom, and continues scrolling when the next section arrives in the viewport. When you scroll back up it (of course) does the same same thing the other way around: it first pins the bottom of the left column for a while and then starts scrolling again. What I am looking for is that on the way back up the bottom of the left column is not pinned anymore and just scrolls all the way till the top arrives in the viewport and then pins until the right column is done scrolling.

Scrolling down (this works):
- Both left and right columns scroll
- Left column ends so it pins because right column is still scrolling
- Right column ends so left column starts scrolling again

Scrolling up:
- Both left and right columns scroll
- Left column ends (top enters viewport) and pins because right column is still scrolling
- Right column ends so both left and right stop scrolling because the top of the screen is reached

See the Pen yLXXOrZ by pixelarchitect (@pixelarchitect) on CodePen

[akapowl 5,134 Likes (Superhero)]

That behaviour sounds to me like the one discussed in another thread, where @GreenSock mentioned that this is not exactly the type of behaviour, ScrollTrigger was built for, but where he also whipped together a helper function for a scenario like that. Give it a shot and see if it fits your needs, too  

 

 

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

 

[pixelarchitect 17 Likes (Newbie)]

That is exactly it, I'm gonna take a look at it, thank you!