ScrollTrigger over top of absolute position elements

[Drexel]

This might be sometime simple that I am missing. I have a couple simple scorllTrigger elements and they work just fine. I also have a simple mobile menu that I built and is using absolute position to sit over the entire viewport when activated. This is also working as intended. What I can't seem to figure out is the elements that I applied scrollTrigger on are sitting on top of my absolute positioned elements. No matter how big I make the z-index for the mobile menu the scorllTrigger elements are always on top. I'm hoping this is a simple thing that I overlooked in the docs. 

 

After a little more digging it seems that this is causing the issue
gsap.set(".yellow-bar", {transformOrigin: "left center"});

When you scroll the codepen you should not be able to see the bars

 

added a codepen to show the issue

See the Pen KKXyYao by icekomo (@icekomo) on CodePen

Edited December 26, 2021 by Drexel
added pen

[OSUblake]

That sounds like normal stacking context behavior, which happens when you use transforms, opacity, and couple other properties.  You'll need to adjust your layout to get things to stack the way you want.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

[Drexel]

@OSUblake Thank you, it was as easy as just adding position: relative to the .bar class. Thanks!