[GSAP dynamic animation on click]

2 minutes ago, ZachSaucier said:

Yep. As I said, you'd have to change the selectors some. 

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 ! ?

 

See the Pen povbxLb by Jean-Loic (@Jean-Loic) on CodePen

[GSAP dynamic animation on click]

On 12/11/2019 at 7:29 PM, ZachSaucier said:

Thanks for clarifying what you're wanting. There are a few ways to handle this sort of thing. One would be to call the "out" animation/timeline then in its onComplete you do the "in" animation. That way when the other button is clicked, you overwrite the onComplete with the new animation. Any other method of waiting for the "out" animation to complete and then calling the correct animation would work.

 

The selectors of this are a bit off but it shows the gist: 

 

 

@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 ?

 

[GSAP dynamic animation on click]

25 minutes ago, ZachSaucier said:

Hey Jean. It's behaving as it you told it to. You'll have to describe what you're hoping that'd it'd do for us to give you guidance on how to get there. 

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.

See the Pen KKwzjgy by Jean-Loic (@Jean-Loic) on CodePen

 

 

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 :

 

See the Pen abzNrpV by Jean-Loic (@Jean-Loic) on CodePen

 

I don't know if I'm very clear again in my explication, I think it because writing in English ! ??

 

 

[GSAP dynamic animation on click]

@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

 

See the Pen abzNrpV by Jean-Loic (@Jean-Loic) on CodePen

[GSAP dynamic animation on click]

1 hour ago, ZachSaucier said:

It's definitely possible with a timeline - the solution is more or less the same as what I posted above. If you're having trouble, post a demo  

I tempt to do a version with timeline, but it doesn't work, I think because  I don't use "kill" well ?

 

The exemple : 

See the Pen qBEZGdp by Jean-Loic (@Jean-Loic) on CodePen

 

[GSAP dynamic animation on click]

12 hours ago, ZachSaucier said:

One way to do it would be to kill the old animation if it exists. Not sure exactly how you want it to behave:

 

 

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

[GSAP dynamic animation on click]

5 hours ago, OSUblake said:

 

We don't check previous posts for updated demos. You should always make changes to a fork, and post that fork in a new reply.

 

Okay, sorry I didn't know ?

[GSAP dynamic animation on click]

8 hours ago, ZachSaucier said:

One way to do it would be to kill the old animation if it exists. Not sure exactly how you want it to behave:

 

Yes that look perfect ! Thank you !!! 

 

[GSAP dynamic animation on click]

@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.

 

See the Pen povyNeR by Jean-Loic (@Jean-Loic) on CodePen

[GSAP dynamic animation on click]

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 

[GSAP dynamic animation on click]

@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  

 

 

[GSAP dynamic animation on click]

Finally is it better to do that only with css transitions and setTimeout  ? ?

See the Pen jOEqVem?editors=1111 by Jean-Loic (@Jean-Loic) on CodePen

[GSAP dynamic animation on click]

1 hour ago, ZachSaucier said:

GSAP has event listeners where you can set those properties:

gsap.to(target, {onComplete: () => {
  // or whatever you need
  gsap.set(target, {display: "flex"});
});

 

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 : 

See the Pen povyNeR by Jean-Loic (@Jean-Loic) on CodePen

 

It have some problems when I click rapidly on each button.

Is it because I click before the "onComplete" finish ? 

[GSAP dynamic animation on click]

 

20 minutes ago, ZachSaucier said:

Sure you can. Just create the timelines beforehand and play the relevant one on button click. What exactly is your end goal?

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.

 

 

8 minutes ago, elegantseagulls said:

@Jean-Loïc

 

A single preset timeline, won't be able to determine what the dynamic targets are, so I think you'd need to set something up for each scenario.

 

I could be misunderstanding the question/goal. If so, you may find this useful: https://greensock.com/docs/v3/GSAP/gsap.effects

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.

[GSAP dynamic animation on click]

Hi @elegantseagulls thank you for your response ! 

So, that means we can't enqueu animations in this type of situation ? 

[GSAP dynamic animation on click]

Hello, 

How can I animate an element that is dynamically activated with JS ?  

On the codepen example, for the moment the activated items change just their colors, instead of that I would like to make a timeline animation.

 

Thanks 

See the Pen yLyOYRZ by Jean-Loic (@Jean-Loic) on CodePen