Hello GSAP-friends,
I have animated my header to hide when scrolled down and show again when scrolled up. Actually I have just copied the code I found in the demos and modified it just a little bit. I would like the header to be visible again, when the user has scrolled to the very end of the page. I was unsuccesful with determining it with the if condition -- jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height() --.
Is this functionality possible with Scrolltrigger? Here is what I have so far:
gsap.registerPlugin(ScrollTrigger);
let header = jQuery(".header");
let btn = jQuery('.custom-menu-toggle');
const showAnim = gsap.from('.header', {
yPercent: -100,
paused: true,
duration: 0.2,
}).progress(1);
ScrollTrigger.create({
start: "top top",
end: "max",
onUpdate: (self) => {
if(self.direction === -1) {
showAnim.play();
} else if (jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
showAnim.reverse();
} else{
showAnim.reverse();
}
}
});;
ScrollTrigger.config({
autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
});