How to set the position back after the animation is completed

[poudreuse]

Hello everybody,

 

I'm trying to have a underline coming from the left when you hover a text tab and then leaving on the right.

It works the first time only on my Pen and I can't find a way to set the position back to -1OO% after the mouse leave animation is done, what is the correct way of doing it ?

See the Pen bGeExej by poudreuse (@poudreuse) on CodePen

[ZachSaucier]

Hey poudreuse and welcome.

 

Good job creating the animations beforehand and using control methods to try and control it. However I think you're misunderstanding a few things:

• It doesn't make much sense to .play() a .set(). It doesn't have anything to play. Instead you should just create a new .set() call if you need to do something like that.
• Don't use translateX or anything similar. Just use the x property. 
• Your ease is invalid. It should be something like "power1.inOut" if you want an in-out ease. See the ease documentation for more info.

Additionally the way you have your animations setup you will have a visual jump if someone unhovers the text while the in animation is playing. You need to decide what you want to happen in different scenarios. If someone unhovers while the in animation is playing should it jump or should it play the rest of the in animation and then play the out animation afterwards? If someone hovers while the out animation is playing should it jump to the start of the in animation or should it play the rest of the out animation and then the in animation? If someone hovers then unhovers then hovers again before the in animation is complete what should happen? Same thing for while the out animation is happening. Once you decide on what should happen we can help you create that functionality in code.

[poudreuse]

Hello @ZachSaucier and thank you for your quick response.

 

I've changed translateX to x and the ease property as you explained very clearly.

 

If someone unhover, I want the animation to reverse, if I'm not wrong this is the default behaviour

If someone hovers then unhovers then hovers again before the in animation is complete the animation should resume back to where it stopped

As for the out animation, it should always play the rest if someone unhover and play the in animation afterwards

 

I still didn't manage to reset the x position after the animation out is done

 

To better visualize what I'm trying to achieve, you can check the navbar items of this website : https://strapi.io/

[ZachSaucier]

For the functionality of that site I'd set it up this way: 

See the Pen GRqozGb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

A couple of other notes that I didn't notice before:

• Don't use transitions on properties that you're animating with GSAP.
• You should set all of your transforms on elements that you animate with GSAP with GSAP. Not doing so is one of the most common GSAP mistakes.

[poudreuse]

This was very insightful thank you @ZachSaucier !

It works now.

I now wonder how can I apply this animation on multiple .containerTab individually ?

[ZachSaucier]

Just now, poudreuse said:

how can I apply this animation on multiple .containerTab individually ?

Use a loop. More info about how to do that in my article about animating efficiently.