GSAP Stagger X/Y axis cause z-index problem on hover element , please help

[MaverickChan]

like the codepen shows

y:  '+=500'

if you hover the user icon , the tooltip will cause collision on next child element.

 

But , , if I remove the line, all works fine.

I really like this moving to top effect of stagger , can someone help me bypass it ?

See the Pen ZEXGzzX by maverickchangithub (@maverickchangithub) on CodePen

[GreenSock]

That actually has nothing to do with GSAP - it's just how stacking contexts work in browsers. If an element has a transform, it creates a new stacking context. You can remove GSAP from the equation altogether and even add a transform: translateX(0px) to all your .card elements and you'll see exactly the same issue. 

 

You can have GSAP remove the transform at the end of the animation by using clearProps: "transform" or clearProps: "y" (it does the same thing). Or you could adjust your markup so that you stack things properly (don't have nested things that are supposed to sit on top of ancestors). 

 

Good luck!

[OSUblake]

27 minutes ago, GreenSock said:

Or you could adjust your markup so that you stack things properly (don't have nested things that are supposed to sit on top of ancestors). 

 

If you look at how most tooltip libraries work, like tippy.js, the tooltip is usually appended to the body or the main container of your app, and then absolutely positioned over the target.

 

 

[MaverickChan]

3 hours ago, GreenSock said:

That actually has nothing to do with GSAP - it's just how stacking contexts work in browsers. If an element has a transform, it creates a new stacking context. You can remove GSAP from the equation altogether and even add a transform: translateX(0px) to all your .card elements and you'll see exactly the same issue. 

 

You can have GSAP remove the transform at the end of the animation by using clearProps: "transform" or clearProps: "y" (it does the same thing). Or you could adjust your markup so that you stack things properly (don't have nested things that are supposed to sit on top of ancestors). 

 

Good luck!

Thank you for your reply , I will give it a try. 

update: WORKS!!!!!

[MaverickChan]

2 hours ago, OSUblake said:

 

If you look at how most tooltip libraries work, like tippy.js, the tooltip is usually appended to the body or the main container of your app, and then absolutely positioned over the target.

 

 

Thanks for the reply.

I understand , normally , tooltip is not a problem. But if i have Vue instance mounted  in the  Dom, things are complicated. And , i am little confused how to move an element to another position. Looks like normal Dom works fine , but virtual DOM... I haven't figure it out yet.

Thanks again for your explanation.

[OSUblake]

I made some tooltip components several years ago and I used these for inspiration...

https://josephuspaye.github.io/Keen-UI/#/ui-tooltip

https://josephuspaye.github.io/Keen-UI/#/ui-popover

 

The tooltip code isn't too complicated...

https://github.com/JosephusPaye/Keen-UI/blob/master/src/UiTooltip.vue

 

It does use tippy.js, and tippy sets up the listeners, positions it, and appends it, but of course you could do that yourself if you wanted to.