ScrollTrigger: Multiple pins in a row with defined 'end' issue.

[Samuel Aaron McGuire]

I'm looking to have two pins in a row using ScrollTrigger. I've tried setting the `refreshPriority` and calling "refresh" at the end of the ScrollTrigger.create calls. Regardless, the second pins "end" collapses to the start of its pin trigger. 

 

Is there something I'm missing? Please halp.  

 

 

See the Pen eYBaZdW by samcreate (@samcreate) on CodePen

[akapowl]

Hey @Samuel Aaron McGuire

 

The problem here, is that for both pinning ScrollTriggers, you are using an absolute value for the end.

Both ScrollTriggers end at the same time the way you have it set up - so here the second ScrollTrigger unpins at the same time it pins.

 

If you want to use values relative to the start (one sentence of mine in the other thread might have been misleading), you would still have to use them with this prefix "+="

 

end: "+=" + 5 * innerHeight,

 

See the Pen 2dddbaff3f971a04e1e5292f2515f838 by akapowl (@akapowl) on CodePen

 

 

Is this what you were looking for?

[Samuel Aaron McGuire]

That makes sense! I really appreciate your time @akapowl and thoughtfulness. Hope this helps anyone as silly as me that couldn't figure this out too.