mattdown Posted January 19, 2021 Share Posted January 19, 2021 Hi all, I wondered if anyone could help with a problem I'm trying to solve. In this pen, there is a fixed position grey header at the top of the page that gets pushed off in direct relation to scroll as the user first lands on the page by using a timeline & scrolltrigger. If the user then gets past the point where the header has moved off and they start scrolling back up the page, the header needs to drop down again into view somehow. This doesn't have to be in direct relation to scroll amount. It just needs to be visible. I'm not sure whether I should be controlling this by adding extra classes to the header and then targetting that forcing in CSS or whether I can somehow reverse the timeline? So in summary, if the user is scrolling back up the page, the header needs to be visible but for the first 150px of scroll downwards, it needs to move up in relation to scroll as if the header is in the flow of the markup. This is a good example of what I'm trying to achieve: https://loupemag.com/ See the Pen NWRoZvp by mattdown2478910 (@mattdown2478910) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 19, 2021 Share Posted January 19, 2021 Hey @mattdown, You could use a callback that gets called every time the progress of the ScrollTrigger changes: observing the direction. See the Pen zYBawGa by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 1 Link to comment Share on other sites More sharing options...
mattdown Posted January 19, 2021 Author Share Posted January 19, 2021 Thanks for the suggestions so far Mikel. That has given me a few ideas so far. The only thing that differs in your example is that the header doesn't move off in direct relation to scroll amount though which is the key thing that I need to achieve. It's as if I need the timeline to be attached to scroll position if the user is near the top 150px of the page but then just play forward or back if they're lower on the page as per the example link. Link to comment Share on other sites More sharing options...
mikel Posted January 19, 2021 Share Posted January 19, 2021 44 minutes ago, mattdown said: the header doesn't move off in direct relation to scroll amount If you shorten the duration e.g. to 0.1, the animation runs as in your example. The progress of the animation is not linked directly to the scroll. Happy scrolling ... Mikel 1 Link to comment Share on other sites More sharing options...
mattdown Posted January 19, 2021 Author Share Posted January 19, 2021 @mikel Based on your example and suggestion, I think I'm getting somewhere now with this. It seems to judder a bit on first part of scroll though and seems to rewind the timelime and play it again when it doesn't need to if the user is scrolling back up and the header is already in view. Updated pen: Link to comment Share on other sites More sharing options...
mikel Posted January 19, 2021 Share Posted January 19, 2021 Hey @mattdown, "It seems to judder a bit ...": With the two scroll triggers for the same object, you trigger a classic conflict. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now