What is happening, issue with multiple scrolltrigger and one is pinned

[romain.gr]

I've been searching around an answer without success, I thought first it was an issue with the order I create the scrollTrigger but apparently not as creating them in different order doesn't fix the issue.

 

So what I'm trying to achieve is:

 

1: logo animation

then when the animation is finished, and the block unpinned

2: when the logo touch the top of the viewport => do something

 

So I have 2 scrollTrigger created

 

first one that scrub the logo and then the second one that check when the logo is touching the top of the screen, unfortunately the second one starts way too earlier (you can see the markers). 

 

logoAnim = gsap.timeline();

ScrollTrigger.create({
    animation: logoAnim,
		trigger: '.header',
		pin: true,
		start: 'top top',
		end: ()=>{ '+=' + window.innerHeight / 2 },
		scrub: .5
});

logoAnim	.addLabel('letter-dis')
					.to('.letter--is-leaving--severin', {autoAlpha: 0, xPercent: -10, ease: Expo.easeOut, stagger: {
						amount: 1,
						from: 'end'
					}}, 'letter-dis')
					.to('.letter--is-leaving--anja', {autoAlpha: 0, xPercent: 10, ease: Expo.easeOut, stagger: {
						amount: 1,
						from: 'start'
					}}, 'letter-dis')
					.fromTo('.letter--plus', {width: '5em'}, {width: '1em', duration: 1.5}, 'letter-dis');

ScrollTrigger.create({
	trigger: 'h1',
	start: 'top top',
	end: '+=5000000000',
	markers: true,
	onEnter: () => {
		$('.top-bar').addClass('top-bar--visible');
		$('h1').addClass('invisible');
	},
	onLeaveBack: () => {
		$('.top-bar').removeClass('top-bar--visible');
		$('h1').removeClass('invisible');
	}
});

 

What is happening? Thank you

 

The documentation says about the refresh Priority : 

 

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

 

I conclude that if ScrollTrigger are created in the order they appears on the page, the pinning distance of the first is being added to the start/end of subsequent Scrolltriggers, which should be my case. But no pinning distance is added to my second  scroll trigger! Why? I', getting super confused.

See the Pen BamGgBp?editors=1010 by romaingranai (@romaingranai) on CodePen

Edited March 2, 2022 by romain.gr

[romain.gr]

Any clues? What could be the problem? are my ScrollTriggers created in the wrong order? Could anyone redirect me to any post on the forum? It drives me crazy!

[OSUblake]

1 hour ago, romain.gr said:

Any clues? What could be the problem? are my ScrollTriggers created in the wrong order? Could anyone redirect me to any post on the forum? It drives me crazy!

 

We respond to every question on this forum. Bumping your thread isn't going to get you an answer any faster. 

 

Your class toggling ScrollTrigger doesn't know about the pinning. You need to tell it about that with pinnedContainer.

 

Quote

pinnedContainer

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

 

See the Pen eYebdLZ by GreenSock (@GreenSock) on CodePen