Animating with "from" causes div to switch behind its :after element

[mlikaon 4 Likes (Newbie)]

Hi there !

 

I'm testing out different border animation cases, and I just figured out a strange behaviour I can't get rid of.

Without animation, my main #box is in foreground, and its child element :after is behind thanks to the z-index set to -1 (that's all the trick in this border animation technique)

But at the moment I add a gsap.from() to my #box, it gets behind the :after element.

 

Is there something I'm doing wrong, do you know any workaround ?

 

Edit : same behaviour occurs with gsap.to(). It seems that the transform: translate(0px) gsap adds to style is part of the issue.

 

Thank you in advance !

See the Pen xxdogxm by florian-trang (@florian-trang) on CodePen

[nico fonseca 518 Likes (Leader)]

Hi @mlikaon, the issue is because you used negative z-index + transform property. You can see more here. 

I updated your demo with some changes. 

See the Pen b80cc306613c11d0c5fb07c3c891c756 by nicofonseca (@nicofonseca) on CodePen

Cheers.
 

[mlikaon 4 Likes (Newbie)]

Thank you @nicofonseca, that's a subtlety I didn't know yet.

It makes sense and works perfectly now !