[Overlapping scrollTrigger sections: how to deal with scrollbar jumping, preserving scroll on reload]

I was able to fix the issues in the original codepen.

 

The way I fixed this is that:

- I completely disabled pinning within ScrollTrigger

- made all overlapping elements fixed to top and with a negative z-index and wrapped by a relative container 300vh wrapping the fixed elements.

- I used then the wrapping container as the scrollTrigger container

- The 4th container receives a top margin of 200vh in order to time when it scrolls over the fixed elements (because the fixed elements have a negative z-index, this relative element scrolls over the fixed elements)

 

I am not sure this is the the best solution, as the content does not stack naturally if JS is disabled and it has limited accessibility, but at least the animation works properly without flickering and a browser reload also keeps the scrollposition/animation state properly, so anchor linking will work properly.

 

Thanks,
T

[Animate sections with the same classes individually]

Hi, currently you are animating everything at the same time and based on the same trigger. As you already guessed you'd have to loop through the different elements and create animations/scrolltriggers for each element.

 

Look at this JS code, particularly at the forEach portion and how the ScrollTrigger uses the element reference as the trigger:

let banners = document.querySelectorAll(".banner")

banners.forEach( (element) => {
	let background = element.querySelector(".background")
	let headings = element.querySelectorAll("h1, h2")
	
	let tl = gsap.timeline()
	   .from(background, {backgroundPosition:"60% 0%", filter:"brightness(0.1)", duration:1})
		.from(headings, {y:200, stagger:0.1}, 0)
	
	ScrollTrigger.create({
		trigger:element,
		start:"top 90%",
		toggleActions:"play none none reverse",
		animation:tl
	})
		
})

I can highly recommend using the  https://www.creativecodingclub.com subscription for a month to learn about these basics. The js code above is from that.

 

My best,
T

[Overlapping scrollTrigger sections: how to deal with scrollbar jumping, preserving scroll on reload]

@OSUblake Thanks so much for your answer. The FOUC documentation has helped me in fixing the content stacking before the JS is initiated. I have integrated the fix in my original codepen.

 

15 hours ago, OSUblake said:

The overflow of the container is messing with it. I would suggest reworking that last panel, like maybe removing if from the panel container, and just have the panel container with position fixed. That's what the site you linked to is doing.

Thank you for your pointers regarding the scrollbar jumping with the last panel. I have tried a bit around with fixed state on the panel-wrapper and shifting the last panel out of the panel-wrapper, but was not successful.

Would you be able to further elaborate the approach you are suggesting? I feel like I am mostly just trying stuf out, as I have no proper concept of what is wrong here and how it would be done right.

 

Thanks again for your help, it is much appreciated!

 

 

[Overlapping scrollTrigger sections: how to deal with scrollbar jumping, preserving scroll on reload]

Thanks for trying to help, it is appreciated! But unfortunately my issue is not to achieve overlapping (that is working in my codepen).

[Overlapping scrollTrigger sections: how to deal with scrollbar jumping, preserving scroll on reload]

Thanks @Trapti, but I fail to see how your solution fixes any of the issues I am asking about. Also there are several flickering issues in your solution and content cannot be scrolled to on smaller screens. I appreciate any help with the stated issues in my original question.

[Overlapping scrollTrigger sections: how to deal with scrollbar jumping, preserving scroll on reload]

I am new to gsap and scrolltrigger and I am trying to work on a scroll based website where panels overlap each other. I am trying to achieve a similar effect as seen on https://www.colabgroup.com (this seems to be a custom coded solution and not gsap based).

 

I am trying to fix the following issues:

• How can I make sure that #panel-1 is shown first before the gsap animation is initiated and the browser window is at the top (as I am positionings other panels absolute, they overlap and only move away with a delay, as gsap loads)
• In general how can I preserve scroll position and timeline position on refresh?
• There seems to be a some scroll bar jumping when #panel-4 comes in, as this panel is taller than 100vh and is entering the viewport overlapping the previous panel from the bottom. How can i control this?

 

Thanks very much for any help on this.

 

My best,

Tomividi

See the Pen vYWjaRP by tvielmetter (@tvielmetter) on CodePen