Hey there,
This is not really an issue but rather a way of improving and writing more efficiently.
I am trying to find the best way to animate a fixed header after scrolling passed a specific threshold (i.e. 100px from the top).
I'm currently achieving this by toggling a class, which works fine, although I'd prefer to leverage GSAP to animate it than CSS. You can also see that this is coupled with an animation that plays/reverses depending on the scroll direction.
Effectively I am aiming for:
Scroll down (hide)
Scroll up (show)
Scroll past 100px from top, apply styling such as `background`, `backdropFilter` and `borderColor`.
function fnHeader( oComp ) {
let oHeader = document.querySelector( '.c-header' );
let oHeaderInline = oHeader.querySelector( '.c_inline' );
/**
* Toggle class on threshold
*/
gsap.from( document, {
scrollTrigger: {
start: 'top -100',
end: 99999,
toggleClass: { className: 'has-scrolled', targets: oHeader }
}
});
/**
* Animate on up/down scroll direction
*/
const showInline = gsap.from( oHeaderInline, {
yPercent: -100,
paused: true,
delay: .1,
duration: .8,
ease: Quart.easeInOut
}).progress( 1 );
ScrollTrigger.create({
start: 'top -80%',
end: 99999,
onUpdate: ( self ) => {
self.direction === -1 ? showInline.play() : showInline.reverse()
}
});
}
Would anyone advise on a better approach?
Thank you!