ScrollTrigger Issue

[Akash_rathore]

Hey I tried using scrollTrigger by creating a simple navigation bar and three sections. I added animations to the text and image in the sections. But the issue I am facing here is that when I scroll the page, that text and image scrolls over the navigation bar. Does the scrollTrigger adds z-index to the element on which it is used?

And second issue is that, it adds a horizontal scroll bar in the bottom and it goes away once the animation is over. Why's that happening.

Both the issues can be solved by adding z-index to the navigation and adding overflow: hidden to the section, but these issues shouldn't arise in the first case. Can someone explain why's that happening.

See the Pen zYrPoxd by Akash_rathore (@Akash_rathore) on CodePen

[ZachSaucier]

Hey Akash and welcome to the GreenSock forums!

 

This is because adding a transform creates a new stacking context. The fix is simple: just add a z-index to the header so that it creates its own stacking context  

[Akash_rathore]

Thanks Zach. Can you explain why a scroll bar appears at the bottom when the page loads and goes away once the animation is over. What can be done to avoid that?

[ZachSaucier]

That's because the element is outside of the parent's bounds for a bit. Include overflow-x: hidden on its container to prevent it from happening.