ScrollTrigger Horizational Scroll Pinning: Animation within a Panel

[HumbleB]

I'm still new to GSAP and trying to using ScrollTriggers. In my demo I have a Carousel with Slides. As you scroll down, the Carousel should pin in place and you should see the slides scrolling horizontally into view. When the slides moves into place it should pin in place and run its animation ie. the black box  should moves all the way to the right -> until it's off screen. Then the next slide slides into view and repeat. Right now I can see the box is moving but then the whole carousel flashes and starting scrolling really fast. 

See the Pen ZEaMyXY by HumbleB (@HumbleB) on CodePen

Edited February 26, 2022 by HumbleB
Added CodePen

[OSUblake]

Hi Humble,

 

That's a lot of React code to go through. It would be better if your demo was just vanilla JS so we could clearly focus on the issue at hand. 

 

I'm not entirely sure what you're going for here, but it sounds like you might want to use a containerAnimation if the animation is dependent on another ScrollTrigger.

 

 

 

[HumbleB]

Thank! I converted it to the CodePen and used the containerAnimation. It's almost doing what I want it to do but there's two problem is that I want the slides to pin and stop in place until the box's animation is done and the last slide in goes by too fast.  It seems that last slide goes too fast because the carousel has unpinning before it finished. And the slides aren't pinning because their movements are being controlled by scrolling the carousel. I'm stuck on how to achieve what I want. 

[akapowl]

6 hours ago, HumbleB said:

It seems that last slide goes too fast because the carousel has unpinning before it finished.

 

That is because you are using a scrub with a value of 1 - so you are telling the animation to take 1 second to catch up with the position of the scrollbar, which means that the scrollbar can be past the point of unpinning, while the animation has not finished yet. If you want it to end exactly at the time/position of unpinning but still to be smooth, I guess your best option would be to add smooth-scrolling to the whole page and use a scrub: true for the fake-horizontal scrolling instead, as to be seen in the example below (I added the smoothScroll() ScrollTrigger native smooth-scrolling helper function to that, which is to be found in the .scrollerProxy() documentation).

 

I also changed the tweens in your forEach loop to single .to() tweens instead of tweens that are added to the tl that you are creating at the beginning, because technically you are nesting multiple ScrollTriggers in different tweens of a timeline there, and that is one of the most common ScrollTrigger mistakes to be avoided.

 

See the Pen MWOqQmX by akapowl (@akapowl) on CodePen

 

 

With regard to the pinning of individual sections in such a fake-horizontal-scrolling scenario:

As the docs say, it isn't available - that is because you are not actually scrolling horizontally, but only tweening the sections while scrolling vertically.

 

Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers.

 

 

Sidenote:

You are missing the quotation marks on your carousel section - might want to change that

 

<section class=carousel>

 

[HumbleB]

Thanks for your help!