Jean-Loïc Posted December 10, 2019 Share Posted December 10, 2019 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 Link to comment Share on other sites More sharing options...
elegantseagulls Posted December 10, 2019 Share Posted December 10, 2019 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 1 Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 10, 2019 Author Share Posted December 10, 2019 Hi @elegantseagulls thank you for your response ! So, that means we can't enqueu animations in this type of situation ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 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? Link to comment Share on other sites More sharing options...
elegantseagulls Posted December 10, 2019 Share Posted December 10, 2019 @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 Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 10, 2019 Author Share Posted December 10, 2019 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 More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 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"}); }); 2 Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 10, 2019 Author Share Posted December 10, 2019 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 More sharing options...
Jean-Loïc Posted December 10, 2019 Author Share Posted December 10, 2019 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 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. 1 Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 10, 2019 Author Share Posted December 10, 2019 @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 More sharing options...
Jean-Loïc Posted December 11, 2019 Author Share Posted December 11, 2019 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 Link to comment Share on other sites More sharing options...
OSUblake Posted December 11, 2019 Share Posted December 11, 2019 Make a demo showing the problem, and CLEARLY describe what should happen if you rapidly click on those buttons. 1 Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 11, 2019 Author Share Posted December 11, 2019 @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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 11, 2019 Share Posted December 11, 2019 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 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 11, 2019 Share Posted December 11, 2019 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. Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 11, 2019 Author Share Posted December 11, 2019 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 !!! Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 11, 2019 Author Share Posted December 11, 2019 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 ? 1 Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 11, 2019 Author Share Posted December 11, 2019 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 ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 11, 2019 Share Posted December 11, 2019 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 Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 11, 2019 Author Share Posted December 11, 2019 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 More sharing options...
Jean-Loïc Posted December 11, 2019 Author Share Posted December 11, 2019 @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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 11, 2019 Share Posted December 11, 2019 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. Link to comment Share on other sites More sharing options...
Jean-Loïc Posted December 11, 2019 Author Share Posted December 11, 2019 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 More sharing options...
ZachSaucier Posted December 11, 2019 Share Posted December 11, 2019 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 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