[Infinite horizontal scroll (infinite loop)]

@Rodrigo I could get it running, I love you! lol

[Infinite horizontal scroll (infinite loop)]

HI,

 

i've been trying to create a infinite looping image scroller without success. I've been trying to recreate THIS: 

See the Pen WNQmvPK by kdbkapsere (@kdbkapsere) on CodePen

 from the docs. 

 

Can you tell me what I am doing wrong?

See the Pen QWrrpyX by iii999 (@iii999) on CodePen

[Scrolltrigger - Show header when the bottom of page is reached]

Hey just wanted to let you know, that I finally figured out what the issue was. First of all, I loaded the code when the document was ready, which I had completely forgotten about somehow and since the code was executed before even the document was loaded, there were issues with the calculation of the window scroll height.

And secondly, I have a contact form built with a plugin, which loads a js-file, that I had been lazy-loading with the plugin flying scripts and that caused some conditional fields of the form to always show on page-load, since the js-file was lazy-loaded and hide again when the js-file was loaded, which again caused issues with the calculation of the scroll height. 

I have used a document ready function for the gsap-code and set the form fields to display: none; by default. That fixed the problem.

That took my whole day lol.

[Scrolltrigger - Show header when the bottom of page is reached]

Hey GreenSock, 

 

thank you for your answer. I've tried and it didn't work for me. But I think the code should be working usually, so there must be something wrong with my website.

After some googling, I found out it had something to do with my html and body heights set to 100%. Unfortunately I cannot change these values, since then some z-indexed links are not working. When I console logged jQuery("html").scrollTop() though, it seemed to log out the right value or at least a "righty" value. When I logged out console.log(ScrollTrigger.maxScroll(window)), it returned the same value but only after scrolling. It is a little complicated and it is almost midnight here, can I pm you my website and you inspect it? 

[Scrolltrigger - Show header when the bottom of page is reached]

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"
});