Pin Spacer causing out of order ScrollTriggers to break

[Marco Rodrigues 5 Likes (Newbie)]

Hello!

 

Going straight to the point with the problem I'm having.

I'm creating multiple pinned sections with the "text-fade-in-out" class that you can see on the codepen provided. I also will have somewhere on the website, other pinned colors sections, which is a different scrolltrigger.

 

Problem is, if I add a fade in and out section below the colors one, the pin breaks in the end and the starting position gets all wrong for the last sections. I think this is caused because of the pin order, and I could use refreshpriority here to help me. The thing is, since I'm using toArray() to create the fade in and out pins, it makes me unable to use refreshpriority (maybe I'm wrong?).

 

I could just duplicate the code multiple times for each fade in and out section and use refreshpriority, but I think that would be a bad practice, since I could just use the toArray() to help me here and simplify the code.

 

Is there a workaround for this? 

 

Sorry if it's a simple answer, but I've looked everywhere and couldn't find much.

See the Pen gOXPXPo by marcorodriguesdev (@marcorodriguesdev) on CodePen

[OSUblake 18,474 Likes (Superhero)]

Hi Marco, 

 

It's important to create your ScrollTriggers in the order they appear in the DOM. You don't need to repeat your code, just structure things a little differently. For example, you could make a function for each different type of ScrollTrigger, give a common class name to everything that is going to be used for ScrollTrigger, and then sort it out. 

 

Pseudo code.

gsap.utils.toArray(".scroll-trigger").forEach(element => {
  if (element.classList.contains("colors")) {
    createColor(element);
  } else {
    createFadeInOut(element);
  }
})

function createColor(element) {
  ...
}

function createFadeInOut(elemenet) {
  ...
}

 

[Marco Rodrigues 5 Likes (Newbie)]

On 1/31/2022 at 5:58 PM, OSUblake said:

Hi Marco, 

 

It's important to create your ScrollTriggers in the order they appear in the DOM. You don't need to repeat your code, just structure things a little differently. For example, you could make a function for each different type of ScrollTrigger, give a common class name to everything that is going to be used for ScrollTrigger, and then sort it out. 

 

Pseudo code.

gsap.utils.toArray(".scroll-trigger").forEach(element => {
  if (element.classList.contains("colors")) {
    createColor(element);
  } else {
    createFadeInOut(element);
  }
})

function createColor(element) {
  ...
}

function createFadeInOut(elemenet) {
  ...
}

 

Hi OSUblake, I updated the pen and created a function for two types of scrolltriggers in the example. Still doing something wrong as it is not giving the expected result.

 

Also, is this the best approach to create every single scrolltrigger instance by DOM order? Or should I just do this for the pinned ones, which are the ones that get "bugged" if they are out of order. Asking this because I will be having multiple (5/10+) types of scrolltriggers on my website, some for text animations, some for columns reveals, etc, and was wondering if I should create a function for each and use the approach above.

[OSUblake 18,474 Likes (Superhero)]

They should be created in the order they appear, and it should work using what I showed above. Notice how I'm passing in the element. The function is supposed to create the trigger for the element being passed in. 

 

gsap.utils.toArray(".scroll-trigger").forEach(element => {
  if (element.classList.contains("colors")) {
    createColor(element);
  } else {
    createFadeInOut(element);
  }
})

function createColor(element) {
  ...
}

function createFadeInOut(element) {
  
  let fadedText = element.querySelectorAll(".faded-text");
  
 		var textFadeInOut = gsap.timeline({
		scrollTrigger: {
			trigger: element,
			start: "top center",
			end: "bottom top",
			scrub: 0.1
		}
	});
	
	textFadeInOut.to(fadedText,{autoAlpha: 1, duration: 1})
	textFadeInOut.to(fadedText,{autoAlpha: 0, duration: 1}, '+=1')
}

 

 

[Marco Rodrigues 5 Likes (Newbie)]

15 hours ago, OSUblake said:

They should be created in the order they appear, and it should work using what I showed above. Notice how I'm passing in the element. The function is supposed to create the trigger for the element being passed in. 

 

gsap.utils.toArray(".scroll-trigger").forEach(element => {
  if (element.classList.contains("colors")) {
    createColor(element);
  } else {
    createFadeInOut(element);
  }
})

function createColor(element) {
  ...
}

function createFadeInOut(element) {
  
  let fadedText = element.querySelectorAll(".faded-text");
  
 		var textFadeInOut = gsap.timeline({
		scrollTrigger: {
			trigger: element,
			start: "top center",
			end: "bottom top",
			scrub: 0.1
		}
	});
	
	textFadeInOut.to(fadedText,{autoAlpha: 1, duration: 1})
	textFadeInOut.to(fadedText,{autoAlpha: 0, duration: 1}, '+=1')
}

 

 

Totally forgot about passing the element in the function. It's now working as it should, thanks a lot!

Also updated the pen with the solution.