Jean-Loïc

Ah okay, it was to help me to keep the logic to follow, I'll explore this way too, thanks Before you sent me this other solution, I did other tests with the old version and finally it can work well if the "scale off" run fast. Thank you for you help ! ? https://codepen.io/Jean-Loic/pen/povbxLb

@ZachSaucier hi, thanks for this new version. The problem on this one it's that we have again animation freezes when we click fast on each button ?

Sorry to not be clear. The version before work well, the only problem was when I click fast on each button the animation (of items scaling off) stop until I stop to click. https://codepen.io/Jean-Loic/pen/KKwzjgy I would like that items finish their animations (scale to 0) during I click fast. But that is a detail, it's not very bad if it's like that, normally user don't will click fast like that. And another solution is to set the scale off faster. Like that : https://codepen.io/Jean-Loic/pen/abzNrpV I don't know if I'm very clear again in my explication, I think it because writing in English ! ??

@ZachSaucier, another one that work better, the only problem is when I click fast, the current animation stop (certainly because killed), maybe have something to do with the reverse function in case of kill https://codepen.io/Jean-Loic/pen/abzNrpV

I tempt to do a version with timeline, but it doesn't work, I think because I don't use "kill" well ? The exemple : https://codepen.io/Jean-Loic/pen/qBEZGdp

@ZachSaucier, is there a solution to do the same with a timeline ? Or we can't declare timeline in "click" event ?

Okay, sorry I didn't know ?

@OSUblake I posted an code pen on the post before, I post it there again ? The problem is if you click fast switching on each buttons, items don't transition well. https://codepen.io/Jean-Loic/pen/povyNeR

I still have problem when I click rapidly on triggers. Have an example in the video. I understood that the problem come from the stagger effect, if I don't activate it, it work well. There is a way to use stagger and avoiding this effect ? Thanks stagger_problem.mp4

@ZachSaucier I realized that I'm on GSAP forum ? Sorry, maybe my question looked I was criticizing gsap quality, but I wasn't I was just asking if in this case, maybe it would be better to use css transitions. But as you said seTimeout is not very reliable, I didn't know the .delayedCall(), I'll look that, thank you

Finally is it better to do that only with css transitions and setTimeout ? ? https://codepen.io/Jean-Loic/pen/jOEqVem?editors=1111

Yes I forgot that function, thank you ! I tested to nest a tween inside the "onComplete", I don't know if it's nice, but that work : gsap.to(".active", { backgroundColor: '#eeeeee', color: "#000000", scale: .3, onComplete: () => { $(".active").removeClass("active"); $(toActive).addClass("active"); gsap.to(toActive, { backgroundColor: '#008000', color: '#fff', scale: 1, stagger: .1 }); } }); Exemple : https://codepen.io/Jean-Loic/pen/povyNeR It have some problems when I click rapidly on each button. Is it because I click before the "onComplete" finish ?

Hello @ZachSaucier, as responded @elegantseagulls, the problem with the timeline is that "won't be able to determine what the dynamic targets are". My end goal is to do a filter system, like isotope.js but with animations more originals. Yes I tempt to set a timeline for each scenario but it's rapidly very complicated. The problem with the first solution using simples tweens is that I need to apply a display flex/none at the start/end of animations.

Hi @elegantseagulls thank you for your response ! So, that means we can't enqueu animations in this type of situation ?