ScrollTrigger Pin - Fade in and out

[HumbleB 2 Likes (Newbie)]

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 5,141 Likes (Superhero)]

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 5,141 Likes (Superhero)]

You could approach it like this?

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

[HumbleB 2 Likes (Newbie)]

Thank you!