Show and hide absolute positioned texts step by step by scrolling - ScrollTrigger

[jenda]

Hello, I would like to show and hide absolute positioned texts step by step by scrolling. 

 

First, I calculated the height of all text elements to use it for the End setting in ScrollTrigger. But I can see that the animations don't work correctly. On my website where I have the code more complex, it occurs an overlapping effect. 


What shall I improve? 

 

See the Pen RNwmEEd by jankout (@jankout) on CodePen.

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen dPyByvX by GreenSock (@GreenSock) on CodePen.

 

Here is  a variation that shows and hides the texts simultaneously:

See the Pen mydZdWm by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening! 

[jenda]

Thats perfect. Thank you very much. How can I achieve to animate the headlines at the same time as the paragraphs. 

[Rodrigo]

Hi,

 

I updated the demo:

See the Pen dPyByvX by GreenSock (@GreenSock) on CodePen.

 

Is just about using an array for the first animation (since the final value of both elements is the same on the same properties (opacity and Y) and then use the position parameter in order to make the exit animations happen at the same time.

 

https://gsap.com/docs/v3/GSAP/Timeline#positioning-animations-in-a-timeline

 

Hopefully this helps

Happy Tweening!