[How to set the position back after the animation is completed]

This was very insightful thank you @ZachSaucier !

It works now.

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

[How to set the position back after the animation is completed]

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/

[How to set the position back after the animation is completed]

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

[ScrollTrigger: Trying to have a parallax effect and set a class at the same time]

It does work using CSS variables. Thank you @Visual-Q

[ScrollTrigger: Trying to have a parallax effect and set a class at the same time]

Hello,

 

I've just discovered ScrollTrigger plugin and I have a lot of fun with it.

I'm trying to reduce the brightness of a element with a CSS filter (using toggleClass) and at the same time have a parallax effect (using yPercent).

 

Problem is the class is removed when the end of the#wrapper is reached, which removes the brightness suddently.

It works with once:truebut the animation is not reversed when you scroll back.

I'm not sure what I'm doing wrong ?

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