Jump to content
Search Community

GSAP dynamic animation on click

Jean-Loïc test
Moderator Tag

Recommended Posts

 

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.

Link to comment
Share on other sites

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 ? 

Link to comment
Share on other sites

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. 

  • Haha 1
Link to comment
Share on other sites

@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 ;) 

 

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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

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