GSAP dynamic animation on click

[Jean-Loïc]

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.

[elegantseagulls]

Hi @Jean-Loïc,

 

For something like this, you should just be able to run a tween inside your click event, rather than presetting a timeline, and trying to modify that based on the conditional/scope of which button is clicked.

 

Example:

See the Pen rNaexEy by ryan_labar (@ryan_labar) on CodePen.

[Jean-Loïc]

Hi @elegantseagulls thank you for your response ! 

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

[ZachSaucier]

7 minutes ago, Jean-Loïc said:

we can't enqueu animations in this type of situation ?

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

[elegantseagulls]

@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

[Jean-Loïc]

 

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.

[ZachSaucier]

1 minute ago, Jean-Loïc said:

I need to apply a display flex/none at the start/end of animations

GSAP has event listeners where you can set those properties:

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

 

[Jean-Loïc]

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 ? 

[Jean-Loïc]

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.

[ZachSaucier]

8 minutes ago, Jean-Loïc said:

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

You do realize you're on the GSAP forums, right??  

 

No, it's not better to use CSS transitions and a setTimeout. setTimeouts are not as reliable. If you're using GSAP already you should just use GSAP for this sort of thing. GSAP has a .delayedCall() that can replace setTimeout pretty much exactly. See the thread below for more info

 

With CSS transitions you have a lot less control over your animations. This includes less ease options, staggering being pretty much impossible, and other things. 

[Jean-Loïc]

@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  

 

 

[Jean-Loïc]

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 

[OSUblake]

Make a demo showing the problem, and CLEARLY describe what should happen if you rapidly click on those buttons.

[Jean-Loïc]

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

[ZachSaucier]

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

See the Pen yLyOPoq?editors=0010 by GreenSock (@GreenSock) on CodePen.

[OSUblake]

3 hours ago, Jean-Loïc said:

I posted an code pen on the post before, I post it there again ?

 

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.

 

[Jean-Loïc]

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

 

[Jean-Loïc]

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 ?

[Jean-Loïc]

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 ? 

[ZachSaucier]

20 minutes ago, Jean-Loïc said:

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

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  

[Jean-Loïc]

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.

 

[Jean-Loïc]

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

[ZachSaucier]

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. 

[Jean-Loïc]

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

 

 

[ZachSaucier]

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: 

See the Pen MWYyMmX?editors=0010 by GreenSock (@GreenSock) on CodePen.