Multiple Horizontal Scroll Triggers

[Devin Ross]

 

Hi,

 

I'm having a problem with scrollTrigger. I have two sections that I want to do a horizontal scroll. I've got both individually working great. But when I mix the two in together on the same page. There are issues. Notably on Safari you can see after one horizontal section is done, it's taken over by the next horizontal scroll even though the second horizontal scroll area is not the next section on the page. Can you anyone point me in the right direction to fix this?

 

 

See the Pen BaKXwPG by devinross-the-decoder (@devinross-the-decoder) on CodePen

[ZachSaucier]

Hey Devin and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

The biggest issue that I see is your end positions are exact values. And they're the same value. So when you have both on the same page the first ScrollTrigger adds a bunch of space due to the pinning. Then when the second ScrollTrigger is reached it finishes immediately.

 

I think you probably want to do something like end: "+=" + (innerWidth * 3) instead which makes the end relative to the starting position:

See the Pen oNxKoqa?editors=0010 by GreenSock (@GreenSock) on CodePen

I commented out your other tweens because they're superfluous to what you're asking about (as is good to do when making a minimal demo).

 

Side notes:

• You don't need to load the old TweenMax file.
• const timeline = gsap.timeline; doesn't make much sense. You should remove it  
• You don't need pinSpacing: true.

[Devin Ross]

Hi Zach,

 

Thanks for the tip. You are a super hero indeed.

It looks like I still have a problem where my block to fade in full width photos also seems to fade in all other divs that have that same class. Can't seem to figure this out either.

 

 

gsap.fromTo(
  ".photo-block-full-width",
  { opacity: 0 },
  {
    opacity: 1,
    duration: 1,
    scrollTrigger: {
      trigger: ".photo-block-full-width",
      pin: false, // pin the trigger element while active
      start: "top 50%", // when the top of the trigger hits the top of the viewport
      end: () => "+=500", // end after scrolling 500px beyond the start
    },
  }
);

 

[ZachSaucier]

On 10/4/2020 at 2:15 AM, Devin Ross said:

I still have a problem where my block to fade in full width photos also seems to fade in all other divs that have that same class.

You're making one of the most common ScrollTrigger mistakes: using a general target when you should be using a specific one. As the article covers, you should use a loop to create a different tween and ScrollTrigger for each element instead