Jump to content
GreenSock

MaverickChan

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

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

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.

 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×