Trapti Posted December 7, 2022 Share Posted December 7, 2022 Hi, In the Codepen the animation is working fine. That is how I want it to be. Problem is Orange color box which is moving on scroll and reaching to the green color section is not visible on the blue color section. I am animating the orange box using Flip plugin. It is not a z-index issue. See the Pen abKXLqJ?editors=0010 by tripti1410 (@tripti1410) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 7, 2022 Solution Share Posted December 7, 2022 If I understand your question correctly, I don't think that's possible given the way you structured your markup. It has nothing to do with GSAP/Flip - it's just how HTML/CSS works. You've got an element nested deeply inside another one, and you want the container to sit behind, but a CHILD of that container to sit on top. Stacking contexts cannot work like that as far as I know, but maybe someone else has an idea. I'd recommend eliminating GSAP/Flip from the equation altogether and just try to set up your HTML/CSS so that things are rendering in the stacking context the way you want. Then work on animating that. You'll probably need to rework the structure of your markup. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now