Jump to content
Search Community

Can't overwrite another tween properly

AsKadir test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

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

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.
×
×
  • Create New...