AsKadir Posted November 29, 2020 Share Posted November 29, 2020 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 More sharing options...
AsKadir Posted November 29, 2020 Author Share Posted November 29, 2020 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 More sharing options...
akapowl Posted November 29, 2020 Share Posted November 29, 2020 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 1 Link to comment Share on other sites More sharing options...
Solution akapowl Posted November 29, 2020 Solution Share Posted November 29, 2020 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 2 1 Link to comment Share on other sites More sharing options...
AsKadir Posted November 29, 2020 Author Share Posted November 29, 2020 @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 More sharing options...
mikel Posted November 29, 2020 Share Posted November 29, 2020 ... and an 'pure' alternative See the Pen MWjYqwV by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 1 Link to comment Share on other sites More sharing options...
AsKadir Posted November 29, 2020 Author Share Posted November 29, 2020 @mikel Thanks, Mikel! In my opinion, your alternative is better. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now