GSAP Horizontal scroll

[codeSanjay]

I have horizontal slider initiated using GSAP. But the problem is when horizontally scrolled it triggers other section too. What I wanted is that the sections below horizontal scroll to be only triggered when come to the original position. Also I want the whole document to be pinned. Is it possible to do with GSAP? As always I am very hopeful to you guys. Thanks in advance.

See the Pen BarqbaY?editors=1111 by devSanjay (@devSanjay) on CodePen

[Cassie]

Hi there!

 

Thanks for the clear demo - appreciated.

How about something like this. Using the previous scrollTriggers end point as the starting point for the next one?

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

[codeSanjay]

Thankyou @Cassie for your reply. But the solution that you provided won't work if there comes another section in between those two sections.

[GreenSock]

Hi  @codeSanjay. You just forgot to set the pinnedContainer value: 

See the Pen jOzQqRK?editors=1010 by GreenSock (@GreenSock) on CodePen

 

The ScrollTrigger needs to know that you're pinning the container so that it can offset the start/end values accordingly. 

 

Does that clear things up? 

[codeSanjay]

Thankyou @GreenSock . Your solution perfectly fits for my problem.  But the container of horizontal sliders behave weirdly on enterBack condition. It doesn't fire as soon as it meets the condition but fires later on. Is there a way to fix it?

See the Pen wvmYOvm?editors=1010 by devSanjay (@devSanjay) on CodePen

[GreenSock]

I don't understand what you mean. You set the trigger to ".horizontal-sliders" and you didn't set an "end", so it uses the default of "right left", meaning when that trigger's right side hits the left side of the screen (or the equivalent distance). Sorry, I'm just not clear on what you're expecting or what you think is wrong. 

[codeSanjay]

@GreenSockI just wanted my horizontal sliders bg color to be changed on enter back. But as you can see it only changes at first slide. Like you said I also kept the end value. But still not working.

See the Pen BarGZNm?editors=0010 by devSanjay (@devSanjay) on CodePen

[Cassie]

If you only want the color to change on enter back you can use a callback?
 

onEnterBack: () => {
  gsap.to('.horizontal-sliders', {
    backgroundColor: "red",
  })
}

 

[codeSanjay]

Thanks @Cassie, running gsap tween inside onEnterBack solved it.