.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
Pin Spacer causing out of order ScrollTriggers to break
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 be
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 fadedT
