Jump to content
Search Community

switch/replace/update trigger when scrolling back up

pixelarchitect test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...