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.

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!!!!!

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