ScrollTrigger Pin - Fade in and out

[HumbleB]

I would like 'Headinggg" and "1" to be visible at the start of the pinning of  ".head" and as you scroll the other headings fade in and out into view. 

Right now, It's working except for "Headinggg" isn't fading out even though '1' is. When I changed it  opacity: i === 0 ? 0 : 1 it create a big backspace between "heading 2" and "headingg 1".  How would I fix this?

See the Pen MWrZWjW by HumbleB (@HumbleB) on CodePen

[Cassie]

Heya!

 

It's not actually fading out. You just have a background color on the number divs - see

See the Pen QWazWBW?editors=0110 by GreenSock (@GreenSock) on CodePen

[Cassie]

You could approach it like this?

See the Pen XWVoWBp?editors=1011 by GreenSock (@GreenSock) on CodePen

[HumbleB]

Thank you! 

[Jenny]

Hi - this seems to break on screen refresh? Any suggestions?

[GreenSock]

1 hour ago, Jenny said:

Hi - this seems to break on screen refresh? Any suggestions?

@Jenny can you please be more specific? Maybe start a new thread and provide a minimal demo that clearly illustrates the issue and explain the steps involved in reproducing it. I looked at Cassie's latest version and it seemed to work fine, so I must be missing something.