
MaverickChan
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Posts posted by 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"
orclearProps: "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
GSAP Stagger X/Y axis cause z-index problem on hover element , please help
in GSAP
Posted
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.