FLIP with ScrollTrigger

[Trapti]

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

[GreenSock]

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.