HumbleB

Thank you!

I would like 'Headinggg" and "1" to be visible at the start of the pinning of ".head" and as you scroll the other headings fade in and out into view. Right now, It's working except for "Headinggg" isn't fading out even though '1' is. When I changed it opacity: i === 0 ? 0 : 1 it create a big backspace between "heading 2" and "headingg 1". How would I fix this?

I noticed that the "heading" and the "num" do not transition at the same time. You can see this when you scroll slowly. I'm not sure what it's causing this problem and how to fix it. I tried using a gsap.timeline() to get the transition to start the same time but I ended up with the same result. I also tried added scrub to '.head' gsap.to('.head', { scrollTrigger: { pin: '.head', scrub: true, end: '+=5000s', pinSpacing: true, } }); and removing toggleActions headings and nums but the result wasn't right

Thanks for your help!

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.

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. https://codepen.io/HumbleB/pen/ZEaMyXY

I'm very new to GSAP and I tried to follow a tutorial and some demos however I couldn't get the results I wanted. I wanted as the user scrolls down for '.container' to be pin when it hits the top of the screen. So I set start to "top top". And when the user scrolls to the '.container' for the first '.panel' to already be displayed. I believe that part is working as I wanted. When '.container' is pinned, as the user scrolls, for each ".panel" moves into view and snaps into place. I think this works correct. However, It's not working the way I want it to look. I want the text inside '.panel" to be displayed in the center of screen / '.container'. But the only way I could get this scroll effect to work was to make the height of '.container' greater than 100% like 600vh. Oh and because I made it 600vh. There's extra whitespace at bottom. And I want to make sure everything is dynamic as possible. I also want it to snap to be more smooth or instant. There's a bounce there that I don't know what is causing it. How can I fix these problems. Is there a better way for me to set up animations.