My pseudo element is not reversing when using the variable for the pseudo elements

[Faith Akakpo]

I tried to make a swipe in on hover effect for my button, I found out you can't directly manipulate pseudo elements in gasp and I found out about the variable way.

 

When I hover over the link it slides in but when I hover out it does nothing; it just stays there, it does not reverse back to its original position.

 

It worked for rotate, skew and scale but not for transform translateX.  

 

I also tried using left property, but it had the same exact results.

 

My example:

using variables with gsap (codepen.io)

See the Pen KKLXwqW by faisy227 (@faisy227) on CodePen.

[Rodrigo]

Hi,

 

Just an issue with how you were using CSS variables and the fact that you are adding CSS transitions to it as well. Is a bad idea to add CSS transitions to the same properties GSAP is animating as Jack explains in this thread:

 

Here is a fork of your demo:

See the Pen bGyoddr by GreenSock (@GreenSock) on CodePen.

 

Hopefully  this helps.

Happy Tweening!

[Faith Akakpo]

Thank you!