Pinned Vertical Gallery, with a specific height less than 100vh, with indicators

[Freehand Sam]

I'm struggling with a couple things on what I'm sure is a really simple  (for someone else) scrolltrigger. I've read the documentation and reviewed examples, but I can't seem to wrap my head around what's creating my issue here. 

 

I want to explicitly set my gallery to be 420px tall. And so I'd like it to pin at center center, scroll up the three slides, then continue. But I can't seem to figure out how you keep the pinned area to just be 420px with no whitespace above and below. When I've used pinning before, it was always 100vh, and this wasn't an issue. I'm guessing it has to do with my "end:" parameter, but reducing that to "+=420" (height of one slide) just makes the scroll duration quicker. I like the speed of it, I just don't want any spacing above and below.

 

Then secondly, I need to make the indicators have an active state, or just change background colors as each slide comes into view. I've not spent time on this yet, and my pen doesn't even address it. I wanted to figure out the major issue first. But any examples you could point me to, or advice on the logic to use, would be appreciated. Not sure if I should be thinking of it as "if the scroll travels 1/(number of slides) of the distance, change color" or more like "on enter", "on leave" foreach slide type of thing.

 

Thanks as always for your great help.

See the Pen GRxKgPY by freehand_sam (@freehand_sam) on CodePen

[Freehand Sam]

Funnily enough, the Codepen happens to be at the right height that you don't see the issue. You have to view it on Codepen or change it to 0.5x to see what I mean about the whitespace above and below the gallery section...

[GreenSock]

The main problem is that you're just pinning that particular element, so everything else outside of that keeps scrolling, but it sounds like you actually want to pin EVERYTHING, so just wrap it in a container that you pin like this:

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

 

Since I wanted everything coordinated in one cohesive animation, I put it into a timeline and attached the ScrollTrigger to that instead of a single tween and then I added some staggered .set() calls to handle toggling the indicators to red (active) and then white (inactive). 

 

I hope that helps! And thanks for being a Club GreenSock member. 💚

[Freehand Sam]

Okay, I now realize I was completely misunderstanding pinning and this cleared it up for me so well. And I'll do some reading to understand stagger now too.  Thank you very much.