Weird behaviour when using scrolltrigger and a hover transition

[NickWoodward]

So I've a card who's opacity/y position animation is triggered using scrolltrigger. The same card has a basic hover transition using a pseudo element.

The problem I've got, which can be seen in the attached .gif, is that the card image/text remains in front of the pseudo element until the gsap animation has completed. I tried to replicate this in the codepen, with no luck, but it's a very similar set up.

I know it's hard to diagnose problems without a working example, but I was hoping someone had an idea of what could be the issue just by seeing it?

Thanks!

 

 

Wow, that's a big video 😄
 

See the Pen rNwqXXy?editors=1111 by nwoodward (@nwoodward) on CodePen

[nico fonseca]

Hey @NickWoodward.
This seems like a browser render issue.
You can try adding a higher z-index in the pseudo element or adding a translate3d(0,0,0) / translate3d (0,0,1px) 🙂

[NickWoodward]

18 hours ago, nico fonseca said:

Hey @NickWoodward.
This seems like a browser render issue.
You can try adding a higher z-index in the pseudo element or adding a translate3d(0,0,0) / translate3d (0,0,1px) 🙂

Hi Nico. Thanks for the reply.

I'll give that a try, thanks