Jump to content
Search Community

ScrollTrigger on Fixed Header

Mike790 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi All!

 

I have a quick question about your fixed header in CodePen that uses ScrollTrigger to show/hide it.

 

I've tried/failed numerous times to prevent the header from immediately animating on reverse (scroll up), but instead require a scroll threshold to first be met before the animation begins.  In other words, I'd like the animation to begin only after a specific number of pixels, such as 30px.  Is this possible using the onUpdate: (self) function or should a different approach be used to accomplish this?

 

Thanks in advance for any suggestions and as always, thanks for such an awesome feature!

 

Michael

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

Link to comment
Share on other sites

Hey there, Mike! 

 

You could definitely do something like that within the onUpdate callback and the right logic.

Something like this could work - not saying it is the idealest of solutions, but maybe it fits your needs decently enough:

 

Get the scroll-position when scrolling down in one variable and compare it to the scroll-position when scrolling up in another variable. If the difference between those two variables is bigger/smaller (depending on how you organize the math) than a certain amount, trigger the animation.

 

I set the distance to be covered to 1000 here, so it becomes more obvious. Hope it helps.

 

See the Pen 5ba91c3ddc7ee9efd3719edca725f201 by akapowl (@akapowl) on CodePen

  • Like 2
Link to comment
Share on other sites

33 minutes ago, akapowl said:

Hey there, Mike! 

 

You could definitely do something like that within the onUpdate callback and the right logic.

Something like this could work - not saying it is the idealest of solutions, but maybe it fits your needs decently enough:

 

Get the scroll-position when scrolling down in one variable and compare it to the scroll-position when scrolling up in another variable. If the difference between those two variables is bigger/smaller (depending on how you organize the math) than a certain amount, trigger the animation.

 

I set the distance to be covered to 1000 here, so it becomes more obvious. Hope it helps.

 

 

Hey akapowl!

Interesting approach!  One conflict I notice the difference between start: "top top" and the self.scroll().  This causes the header to remain hidden if scrolling from the top doesn't exceed the self.scroll() distance.

 

I'm wondering if a timeline tween would be more suitable for this type of animation.  

  • Like 1
Link to comment
Share on other sites

  • Solution

Well, you can extend the logic to whatever you like.

There would actually be quite an easy fix to that issue.

 

// extend this...
if( param - checkParam >= 1000 ) { 
  ...
}
  
// ...to this
if( param - checkParam >= 1000 || self.scroll() === 0 ) { 
  ...
}

 

See the Pen 9e2493513fa4691c0640a56ee3f36527?editors=1010 by akapowl (@akapowl) on CodePen

  • Like 4
Link to comment
Share on other sites

38 minutes ago, akapowl said:

Well, you can extend the logic to whatever you like.

There would actually be quite an easy fix to that issue.

 

// extend this...
if( param - checkParam >= 1000 ) { 
  ...
}
  
// ...to this
if( param - checkParam >= 1000 || self.scroll() === 0 ) { 
  ...
}

 

 

 

Amazing!  Thank you for your help and quick replies to my questions!  You're the man!  I added a finishing touch and now I think it's ready for production.

See the Pen abwqWjy by agaisab (@agaisab) on CodePen

  • Like 1
  • Haha 1
Link to comment
Share on other sites

Sorry to bother, but I ran into the same issue of the header remaining hidden if scrolling from the top doesn't exceed the self.scroll() distance when I applied 100% width and height to the body.  Any quick thoughts?  Thank you again; I really appreciate it!!

Link to comment
Share on other sites

17 minutes ago, akapowl said:

 

Nothing off the top of my head.

It doesn't seem to happen within my demo, when I set the height and width of the body to 100% 

Could put together a minimal demo to look at?

Thanks!  Turns out it's not the width/height of the body that's causing the issue.  It happens when I add multiple paragraphs to fill the scrollable area, regardless if the height style is removed from scrollable-area class.  Thank you again! 

See the Pen oNwEGYe?editors=0110 by agaisab (@agaisab) on CodePen

Link to comment
Share on other sites

 

Okay, it was kind of tricky to get to reproduce it, as most of the time it did work for me, but I think now I've got it.

 

I got to reproduce it more 'consistently' (although not all the time) when dragging the scrollbar instead of scrolling with the mousewheel.

 

Sometimes, when you scroll back up, the self.scroll() will not return 0 at the top of the page.

 

Unbenannt.thumb.png.69cf87a42831998d1f34d7c42d62469f.png

 

 

Not sure if this is just related to the fact that the scrolling is handled on a seperate thread or this might indeed be a bug - maybe @GreenSock or @OSUblake can say more about that.

 

But I found that the self.progress will return to 0 even if the self.scroll() will not, so you could just swap that out in the conditional check and you should be good to go. Give it a shot and see if it works for you.

 

// change this...
if( param - checkParam >= 1000 || self.scroll() === 0 ) { 
	...
}
  
// ...to this
if( param - checkParam >= 1000 || self.progress === 0 ) { 
	...
}

 

See the Pen 84bf0d20cf5bac0d39196faa40a1dffe by akapowl (@akapowl) on CodePen

 

  • Like 1
Link to comment
Share on other sites

15 minutes ago, akapowl said:

Not sure if this is just related to the fact that the scrolling is handled on a seperate thread or this might indeed be a bug - maybe @GreenSock or @OSUblake can say more about that.

No, I don't think it's a bug. You set the start to "top top" but you never defined a trigger element, so it defaults to <body> but since the contents have a margin on the first element, the getClientBoundingRect() is about 16px from the top of the viewport, thus the ScrollTrigger's "start" value is 16 (because that's when the top of its content hits the top of the viewport). Your code is assuming it's 0. You could just set start: 0, end: "max"

 

Does that clear things up? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

5 minutes ago, GreenSock said:

Does that clear things up? 

 

🤦‍♂️ I Did not even think about the default margins on the paragraphs. Yes, that makes total sense, thanks for the clarification.

 

And I wasn't able to reproduce it anymore with the changes you suggested. Thanks for chiming in 🙌

  • Like 2
Link to comment
Share on other sites

Thank you both for helping me with this!  My first thought was padding on the p tags, but obviously I didn't apply any styles to them.

 

Works perfectly on my side, too!  

 

Again, thanks for taking the time to help Paul, and thanks for your additional guidance Jack.  I learn something new every time I visit the forum and often do just to see what's cooking.  GSAP is and has always been the best.  Been enjoying it since the days of Flash!

 

  • Like 2
Link to comment
Share on other sites

7 minutes ago, Mike790 said:

I learn something new every time I visit the forum and often do just to see what's cooking.  GSAP is and has always been the best.  Been enjoying it since the days of Flash!

Ha, that's great! I love hearing from folks who have been around so long, happily using the tools. Thanks for being a "Business Green" member, Mike! 🙌

  • Thanks 1
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...