Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Can't overwrite another tween properly

Go to solution Solved by akapowl,

Recommended Posts



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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites


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


  • Like 1
Link to comment
Share on other sites

@akapowl Thanks a lot!

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

Link to comment
Share on other sites

@mikel Thanks, Mikel!

In my opinion,  your alternative is better.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.