Jump to content
Search Community

animating one element with different animation on click

Kutomba test
Moderator Tag

Recommended Posts

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

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

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

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.

 

 

  • Like 2
Link to comment
Share on other sites

 

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.

  • Like 2
Link to comment
Share on other sites

First off, there are a lot of parts of your code that don't make sense. For example loop: truedirection: '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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

First off, there are a lot of parts of your code that don't make sense. For example loop: truedirection: '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

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? 

  • Like 2
Link to comment
Share on other sites

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

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