ScrollTrigger endTrigger positions aren't correct

[jimjiminyjimjim]

This is a rough working Codepen of what I wanted to achieve. Basically, a series of pin sections, that have a section marker for the next and prev section at the top and bottom of the screen. As the pinned sections scroll through, they pick up the section black markers and move onwards and upwards with scroll, and get re-pinned multiple times.

 

I can't seem to get any other sections to work as endTriggers though. The only way I got this to work is by always using the first section as the endTrigger, and then kind of guessing the end point using bottom+={some percentage}. Ideally I'd like to reference the #section2 as it comes on the screen and bumps all the markers positions as it becomes visible, the the positions seem completely off.

I'm pretty sure this isn't the right way to go about it, but I haven't found a better way. Any help would be much appreciated.

See the Pen bGqBZpq by jimjiminyjimjim (@jimjiminyjimjim) on CodePen

[OSUblake]

Hi @jimjiminyjimjim

 

I'm not exactly sure what you're going after. Is there anything in the demo section that is close to what you're trying to do?

https://greensock.com/st-demos/

 

[GreenSock]

I'm not quite sure what you're looking for either. Is the main challenge that you want the black boxes to bang into each other and then sorta unpin them and push them along or something? AND you're trying to pin their containers? 

 

I think Blake meant to link here:

https://greensock.com/st-demos

 

[jimjiminyjimjim]

Sorry if my post wasn't particularly clear. The demo is pretty much the effect I'm going for, but a messy version!

 

I'd like the incoming panels to pick up the section marker from the bottom of the screen where its pinned waiting, then push it to the middle where both get pinned for a time, and then the panel pushes the marker to the top of the screen as moves off where it is pinned once the incoming section panel comes into view.

 

The reason it is messy, is that if I reference the incoming section as the endTrigger, the scrollTrigger endpoints are not in the positions I'd expect. You can see in the codepen below (with the debug marker turned on) that the section 2 has no effect on releasing the pinned markers, and that the debug indicator shows that it releases them after section 3 passes through. I've commented out the 3rd markers code just for simplicity

 

See the Pen dyvNPyp by jimjiminyjimjim (@jimjiminyjimjim) on CodePen

 

 

 

 

 

 

 

 

 

[Cassie]

I gave this a pass, using a loop to go through the sections and pin them and then a callback to change the marker from position:fixed at the bottom on the viewport to position:absolute at the bottom of the section.

although - the last marker isn't behaving as I'd expect and I'm not quite sure why....

Here's the workings so far. Let me know if that's helpful at all?

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

I'm going to answer some other questions and come back to this in a bit

[GreenSock]

8 hours ago, Cassie said:

although - the last marker isn't behaving as I'd expect and I'm not quite sure why....

That's because there's padding below the pinned element, and when you set position: absolute, it's positioning it at the bottom of that container (below the padding). You just don't see it on the first 3 sections because it's off-screen and the "4" black box doesn't let you notice where the other black boxes are placed until they move ABOVE it. 

 

Here's what I'd do: 

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

 

Is that what you're looking for? 

[Cassie]

Ahhhhh, Of course. That makes sense.

[jimjiminyjimjim]

Thanks for all the suggestions.  Using a loop is a nice way to use GSAP - I haven't tried that before.

 

I'm still not sure it solves my problem though - because the relationship of the marker to the section needs to change, as I need 3 section markers visible for each pinned section.  The markers are... the current section, the previous section pinned to top, and the next section pinned to bottom. 

 

I can't see how you do that with the loop?  Particularly as the first section needs to have the current marker, and the next marker already visible before scrolling. My original demo does do what I want, but its very messy and not easy to adjust with the relative units. 

I've drawn a diagram that hopefully explains what I'm after a bit more clearly.

 

Thanks for all the help its much appreciated.



 

[GreenSock]

If I understood you correctly this time, here's another crack at it: 

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

 

Better? 

[jimjiminyjimjim]

Thanks @GreenSock - thats almost perfect. The only thing I'd like is for the marker to pin in the middle with the section on its way up. I just tried adding another ScrollTrigger to your codepen for each marker, but it breaks things.

 

 

[GreenSock]

That's entirely possible - you'd have to do the math and figure out how to adjust the marker animation so that it's in a timeline that has the first part of the animation (to the center), then a time gap (while it appears "pinned"), then the final part (animating from center to top). 

 

We've already gone way beyond what we normally provide in these forums - unfortunately we don't have the resources to provide "made-to-order" custom solutions for each person's project requirements but if you'd like some more help we do offer paid consulting services. I'm confident we could help you nail this down. You're always welcome to post in the Jobs & Freelance forum as well if you'd like to try your luck there.

 

Good luck with the project!

[jimjiminyjimjim]

Thanks - that's no problems - wasn't expecting a tailored solution, but its helpful to know that its not the most straightforward thing to achieve just with setting scroll triggers and pinning elements multiple times, and actually my initial attempt wasn't that bad after all!

 

Very much appreciate all the efforts - thank you!