ScrollTrigger not delaying within pinned element

[Caleb V]

I've got a setup basically like the CodePen example. A pinned element with other elements that should animate in once they reach the middle of the screen.

 

The problem is, when I've pinned the parent for a bit, it throws off the child's trigger.

 

Do I need to manually adjust the trigger to compensate for this? Or is there a way to have it trigger when the child element actually reaches the center of the screen?

See the Pen KKWNBzZ by calebvetter (@calebvetter) on CodePen

[GreenSock]

Welcome to the forums, @Caleb V! And more importantly, thanks for providing such a fantastic minimal demo! It makes things so much easier to see and troubleshoot. 🙌

 

Yeah, that's a pretty tricky scenario. Typically it's best to build your page in a way that lets you pin stuff separately (don't pin an element that also has other ScrollTrigger elements nested inside of it) but maybe that's not an option for you. I have two solutions: 

 

1) Use a function-based "start" value that has the adjustment baked in: 

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

 

2) I'll likely add a pinnedContainer special property to the next release that let you specify the pinned container so that ScrollTrigger can offset values accordingly for you. I'm not 100% sure that'll be the final name, but it's the most intuitive one I could come up with. 

 

Here's a demo that uses the beta version:

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

 

Does that help? 

[Caleb V]

Ooooo, I love the pinnedContainer property! Once that's in release, I'll use that. For now, thanks for your suggestion on using a function-based start position!