Scroll fade in, pin, scroll fade out - trigger logic problems?

[Coopski]

Hi, I think I'm still missing something conceptually about what is going on and how to plan a ScrollTrigger animation.. please help!

 

I have adapted a GreenSock demo and combined with work from a previous post. I've got the initial fade-in of elements in the first panel working.

 

On the red panel however, I want to scroll/fade into central position, pin, then scroll/fade out. It's kind of close - but I've really stuffed up the logic on the triggers. Could you give me some pointers?

 

Many thanks

 

 

Previous post:

 

See the Pen ExyOZpO by interrogo (@interrogo) on CodePen

[ZachSaucier]

Hey Coopski and welcome. What makes you think you "stuffed up" the logic on the triggers? Other than making your onComplete function a standalone function for cleanliness and removing the unnecessary pin: falses your code looks good to me. 

 

You did stumble upon a minor but in ScrollTrigger though: The margin-top of the h2 is being added the position offset when it's pinned but it's not applied in the original rendering. The work around for now is to add margin-top: 0 on the h2.

See the Pen da9685d8e93d044dc5c980977afc5e24 by GreenSock (@GreenSock) on CodePen