Calculating start position for secondary ScrollTrigger on pinned section

[DouggieO]

Just when I think I have ScrollTrigger mastered...

 

I'm trying to apply a parallax effect to a section (of unpredictable height) that also gets pinned. Thus, I need the parallax tween to pause while the section is pinned. My approach is 3 ScrollTriggers: 1.) for the pin, 2.) for the parallax tween before the pin, and 3.) for the parallax tween after the pin. 

 

The problem I'm running into is with ScrollTrigger 3—how can I calculate the start position? 

 

I came up with a solution in this codepen, adding .5% to the pin ScrollTrigger's start position.  But I'm honestly not quite sure why it's working, or how brittle it is. Is there a better approach to this problem?

 

See the Pen GRzEvXZ by doug-osborne (@doug-osborne) on CodePen

[GreenSock]

It looks like you were creating your ScrollTriggers out of order and using a endTrigger element below a pinned one which is sorta overcomplicating things - I'd do it like this: 

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

 

Notice I'm using:

start: (self) => self.previous().end 

Which just takes the previous ScrollTrigger's end value so that this one start immediately after that one. Makes it super easy to kinda piggy-back on the calculations that are done for the previous one and ensure that they're always back-to-back. 

 

Does this give the result you were after? 

[DouggieO]

You can't see me, but you should know I just stood up and clapped.

 

This is perfect, I was hoping there would be a rock solid solution like this. Thank you!