Recreating Headroom.js in GSAP

[JulieAutobots]

For several projects now I've used a JS script called Headroom.js to animate a fixed header element in and out of view as the user scrolls. Now that I'm getting more of a handle on GSAP, I want to try replicating Headroom's functionality in GSAP so that I can easily connect it to other animations and scrolling libraries. 

 

All Headroom.js does, in a nutshell, is add and remove different classes to an element as the user scrolls that tell us how far down the page we've scrolled and whether we're scrolling up or down. Classes like headroom--pinned , headroom--not-top, etc. Then the actual work of hiding/showing the header is done in CSS. 

 

I've put together a Codepen of what I have so far. The website is built in WordPress, which has jQuery loaded by default, so I'm making use of that to handle changing classes.

 

What I have... works? But I'm worried it's way too resource-intensive, since it fires every onUpdate when scrolling the entire page. Once I start adding other scroll animations in there, that's probably going to be a problem. I really only need the classes on the header to update whenever there's a change: When we reach the top of the page or bottom of the page, when the user starts scrolling up, when the user starts scrolling down. But I'm not sure how to go about making this better. If I could get the classes to only update when there's one of the changes listed above, then I could implement event listeners and triggers too.

 

I would appreciate an extra set of eyes on this to point out where I can improve. Thank you!

See the Pen yLJjZOp by julie-barkun (@julie-barkun) on CodePen

[ZachSaucier]

Hey Julie and welcome. 

 

I don't think what you have in your onUpdate is too resource intensive. All it's doing is getting the progress and comparing it to some values. Then possibly toggling some classes if necessary. That's all very fast to do. 

 

With that being said you could make some small adjustments to make it slightly faster. But keep in mind that these improvements probably wouldn't be noticeable in practice I'd guess:

• Use else ifs when appropriate (that way it can skip the if checks when possible).
• Not using jQuery will be ever so slightly faster.
• Not using the .classList functionality of JS but using .className instead would probably be even faster.
• You should be using a strict (===) check for those if statements regardless of performance.

Something like this:

See the Pen LYZmaeW?editors=0010 by GreenSock (@GreenSock) on CodePen

[JulieAutobots]

Thanks for your quick reply Zach! Having a second set of eyes making sure I'm not shooting myself in the foot makes me feel a lot better. I've successfully made the suggested changes in my project, along with an additional velocity check, and it's working great. I've integrated with ASScroll and there's some easing going on, so the velocity check helped prevent it from firing incorrectly right at the end of the scroll (which was making the pinned header pop back into view).

 

Glad to know I can use GSAP instead of an additional script for this functionality!

 

All the best 😁

[ZachSaucier]

Happy to help!