Kutomba Posted August 20, 2020 Share Posted August 20, 2020 Hii Greeen sockers I have created a tex , I would like on click to animate this text with different animations based on animation clicked , so if user clicked button fade it should animate a text with fade animation, if clicked button scale it should animate a text with scale animation, Problem: How to remove the previous addded animation ? eg user clicks scale animation button it animate the text and if user decide to change animation to fade in it should remove the previous added animation etc Here is my codepen : Animating one element with with different animation on clik Here is how I tried to solve the problem based on docs using kill() methods on click to remove tweens (animations) so that I can add new one if(tl !=null){ console.log('Yes') tl.kill(); }else{ console.log('no') } Unfortunatelly this is not working, what do I need to to do make this working as expected? Thanks Kutomba See the Pen LYNRvQr by makumba (@makumba) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted August 20, 2020 Share Posted August 20, 2020 Hey @Kutomba What you could do is, when a button is clicked, first to clear kill all the tweens of that animated element and then clear the values set by GSAP, e.g. like that: gsap.killTweensOf(".textbox"); gsap.set('.textbox', { clearProps: "all" }) See the Pen f8be10acbd221b6022ac130e610ea389 by akapowl (@akapowl) on CodePen Cheers, Paul 3 1 Link to comment Share on other sites More sharing options...
Kutomba Posted August 20, 2020 Author Share Posted August 20, 2020 16 minutes ago, akapowl said: Hey @Kutomba What you could do is, when a button is clicked, first to clear the values set by GSAP, e.g. like that: gsap.set('.textbox', { clearProps: "all" }) Cheers, Paul Paul do I need to include tl.kill() or is not needed in that if? Link to comment Share on other sites More sharing options...
akapowl Posted August 20, 2020 Share Posted August 20, 2020 I edited my original reply to this: gsap.killTweensOf(".textbox"); gsap.set('.textbox', { clearProps: "all" }) With this you probably don't need the tl.kill() since gsap kills of all the tweens on the .textbox. You will notice though, that this way, the split-text animation is not being killed since it is not on the .textbox itself but on the chars set via split-text. So if in your tl you animate anything different than the .textbox you would have to adjust your .killTweensOf too. This probably isn't the best way to get what you want, but I am pretty sure, someone will come around and show a more appropriate way for doing that. 2 Link to comment Share on other sites More sharing options...
akapowl Posted August 20, 2020 Share Posted August 20, 2020 Ouh, now I see that the tl.kill() part that you have in there actually is working well. If you add the gsap.set('.textbox', { clearProps: "all" }) after your if(tl !=null){ console.log('Yes') tl.kill(); }else{ console.log('no') } you should be good to go. The split-text animation still isn't being killed, since it is not declared as that tl - but a single tween instead. So to also kill that of, I adjusted things a bit - see this pen: See the Pen 0e91755398d937f10b79d7573bb3e39f by akapowl (@akapowl) on CodePen I made your split text-animation a timeline here too. It is tlSplit. Also I removed the var before your 'split' for the split-text, so it can be accessed from outside that function. To kill everything of I did this there - first thing on click: if(tl !=null){ console.log('Yes') tl.kill(); }else{ console.log('no') } if(tlSplit !=null){ console.log('Yes') split.revert(); tlSplit.kill(); }else{ console.log('no') } gsap.set('.textbox', { clearProps: "all" }) Again, this works, but I am pretty sure there is a more elaborate way for doing this. Anyways - it works 😁 And sorry for any confusion caused by my multiple answers - next time I'll think more thoroughly before answering. Cheers. 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 20, 2020 Share Posted August 20, 2020 First off, there are a lot of parts of your code that don't make sense. For example loop: true, direction: 'alternate', easing, and "easeInCirc" don't exist. I have no idea where you're getting those from as they've never been a part of GSAP. You also have two durations given: one as the second parameter (1.5) which is not recommended and one in the vars parameter (duration: 1000) which is recommended but it appears that you're trying to use milliseconds while GSAP durations are in seconds. Additionally if all you have is one tween there's not much point in using a timeline. "%color2%" is also an invalid color and it's definitely not a stagger property. You also have invalid HTML and CSS due to errors. In terms of structure, I highly recommend creating the animations beforehand and using control methods to control the state. Not doing so is one of the most common GSAP mistakes. See the Pen BaKLXvy?editors=0010 by GreenSock (@GreenSock) on CodePen However there seems to be some sort of bug when pausing that split animation at 0... We'll look into that. 2 1 Link to comment Share on other sites More sharing options...
Kutomba Posted August 20, 2020 Author Share Posted August 20, 2020 1 hour ago, ZachSaucier said: First off, there are a lot of parts of your code that don't make sense. For example loop: true, direction: 'alternate', easing, and "easeInCirc" don't exist. I have no idea where you're getting those from as they've never been a part of GSAP. You also have two durations given: one as the second parameter (1.5) which is not recommended and one in the vars parameter (duration: 1000) which is recommended but it appears that you're trying to use milliseconds while GSAP durations are in seconds. Additionally if all you have is one tween there's not much point in using a timeline. "%color2%" is also an invalid color and it's definitely not a stagger property. You also have invalid HTML and CSS due to errors. In terms of structure, I highly recommend creating the animations beforehand and using control methods to control the state. Not doing so is one of the most common GSAP mistakes. However there seems to be some sort of bug when pausing that split animation at 0... We'll look into that. Thanks man , exaclty what I was looking for , God bless ya Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2020 Share Posted August 22, 2020 On 8/20/2020 at 8:41 AM, ZachSaucier said: However there seems to be some sort of bug when pausing that split animation at 0... We'll look into that. Unless I'm missing something, it's behaving exactly as expected. The first tween (the "n") is positioned at the exact start of the tween (well, its internal timeline) so when you pause(0) that tween would be at its very start, thus it renders at the "from" values. Sounds like just a misunderstanding or logic issue, right? 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 22, 2020 Share Posted August 22, 2020 9 hours ago, GreenSock said: Sounds like just a misunderstanding or logic issue, right? Ah, yes. I forgot that immediateRender: false still waits for the delay of each individual tween within it (the each in this case). I was thinking that it would set the initial state of all of them right once the tween started (but not before it started). 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