Jump to content
Search Community

Pin Spacer causing out of order ScrollTriggers to break

Marco Rodrigues test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

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) {
  ...
}

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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')
}

 

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...