Header Banner Animation, replace the first text with a new

[Burhan.k]

I will replace the first text and show up the second hiding text. But I will pin it and not scroll the blue (demo) section up, so hard

 

Expected behavior: Scroll → opacity off the first-text going down to 0. Scroll more → opacity of the second-text, go to 100 and show up. If the second text is full visible, then scroll the second-text up and scroll down to blue section. Not before.

See the Pen xxjBEdp by digitaltim-de (@digitaltim-de) on CodePen

[GreenSock]

A few notes/suggestions: 

1. A critical piece of any ScrollTrigger page is setup. In this case, I think it makes the most sense to set things up with your text blocks on top of each other and then just animate them to/from while pinning the container. So a fair amount of this is just fixing your CSS/layout. 
2. It's always best to just focus on your animation FIRST and then once you've got that worked out, THEN hook it up to ScrollTrigger. See 
3. Opacity goes from 0 -> 1, not 0 -> 100

Like this:

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

 

Have fun! 

[Burhan.k]

This is awesome and thanks for the tips!