Issue with simple animation on mouseenter and mouseleave

[AsKadir]

Hey!
I have something like a button,

on mouseenter event timeline starts play,

then on mouseleave I want circle to dissapear and appear on starting point.

 

For the first time it works, but then on second mouseenter timeline not working.

 

What am I doing wrong? Can you help me, please?

See the Pen wvWxOmp by ChicagoJostik (@ChicagoJostik) on CodePen

[ZachSaucier]

Hey Aslan. Some notes:

• You should avoid animating width, left, and right properties. Instead try to stick to scale and x. 
• You're calling .play() on a timeline that is already completed. This is the core of your issue. If you want it to restart, use .restart() instead.
• It might be better to use a single timeline with an optional pause instead of a timeline and some tweens. That way you don't have a jump of state if someone hovers then unhovers before the hover animation completes. But it depends on what exactly you're hoping to create.

[AsKadir]

10 hours ago, ZachSaucier said:

You should avoid animating width, left, and right properties. Instead try to stick to scale and x. 

I understand this, but sometimes it can't be done without these properties.

Thanks a lot, Zach! Now everything is working!