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

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

[Simple: Timed fade in, scrolltrigger fade out]

Ah, yes. That makes sense now. Thank you so much for getting back to me, that's brilliant.

[Simple: Timed fade in, scrolltrigger fade out]

Hi, 

 

Very new to this. Sorry about what is probably an embarrassingly easy question. 

I am trying to get a div to fade in on a timer then fade out on a scroll. 

The fade in works, but the fade out doesn't scrub, it just disappears.

Can anyone help?

 

Many thanks

T

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