ScrollTrigger Scrubbed Animation Pin Timeline Help

[nvatland]

Hello!

 

I think I probably set this up wrong, but I've been stuck on it for a few days now. 

 

I'm hoping to pin the image once it reaches the top of the view port and then pin and animate the text and bar once they reach the center. I want the timeline to finish animating before the text and bar start moving again, which is where I'm getting stuck.

 

I tried pinning the image in a different scrolltrigger but then I had to wait until the pin was complete before the timeline would play.

 

Any help would be greatly appreciated.

 

Thanks!

Nicole

See the Pen eYzpJyd by nvatland (@nvatland) on CodePen

[ZachSaucier]

Hey nvatland. To do this I would pin the image in one ScrollTrigger with pinSpacing: false then pin the other content for the duration of the timeline once it's in the center. Something like this:

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