Can't overwrite another tween properly

[AsKadir]

Hey!

 

I have the same divs with classes called "wrapper" and they both have same elements called "box" inside.

When you mouseenter "wrapper" all boxes inside getting filter:grayscale(1) and autoAlpha:0.5 by tween,

but also I have another tween which is saying that box that you target must be filter:grayscale(0) and autoAlpha:1.

 

So my problem is that I can't overwrite first tween by second properly, if I add overwrite:true inside tween2 my function will not work at all.

 

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

See the Pen ExgaELL by ChicagoJostik (@ChicagoJostik) on CodePen.

[AsKadir]

I found out that it is better to not use reverse(), instead of this I made another codepen,

but I still have issue, when you mouseenter first box will not change, but other will work normally:

See the Pen ZEpYRJE by ChicagoJostik (@ChicagoJostik) on CodePen.

 

I still need help)

[akapowl]

 

Hey @AslanGoi

 

Usually it is best to create tweens beforehand and only change their play-state on events, like you tried to do in your first pen there.

 

In situations like this one, it can become tricky though, when multiple pre-stored tweens are supposed to tween on the same elements and vars on different events that may occur at the same time.

 

So I often tend to work with classes instead. This might not be the most proper solution, but it works.

 

See the Pen 5a2e0dc879f368eaf1e861360c1fbfa3 by akapowl (@akapowl) on CodePen.

 

[akapowl]

 

Sorry, I am targetting all boxes in the pen above, instead only the ones in the respective wrapper, like here

 

See the Pen d0210cd05fc2279c1d591a9a5e5887da by akapowl (@akapowl) on CodePen.

[AsKadir]

@akapowl Thanks a lot!

I tried to add these classes and target them, but didn't go in a right direction.

[mikel]

 

 

... and an 'pure' alternative

 

See the Pen MWjYqwV by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

[AsKadir]

@mikel Thanks, Mikel!

In my opinion,  your alternative is better.