Does Gsap changes fixed position property static on its own?

Question

Am using gsap animation library in my react project, there is particular div which I animate when mouse enter event is fired on its parent element, I have set position of that element to fixed, before I add the gsap animation the div is not moving along with the rest of the Contents but after applying the animation that div is no longer fixed is moving along with rest of the content, please how can I make that element not to move or scroll with rest of the page? I also tried make the position of it to fixed with the gsap but my styles collapse, how can I solve the issue?

Answer 1

If I understand you correctly, that's totally unrelated to GSAP - that's just how CSS/browsers work. If you have position: fixed on an element that's inside a container element that has a transform applied (or one of several other properties), it creates a new stacking context and the position: fixed element is no longer fixed to the viewport.

You can remove GSAP entirely and just apply an inline transform (which is what GSAP does anyway) and you'll see that the same thing happens. That's according to the spec. So if you want that element to be fixed in the viewport, you'll need to either restructure your HTML so that it's not inside a container with a transform applied, or you'd have to counter-animate it the opposite direction of scroll to make it appear to remain fixed.