Jump to content
GreenSock

NickWoodward

Overwriting onComplete?

Recommended Posts

Quick question if anyone minds sparing some of their knowledge :)

Like the overwrite property prevents previous animations effecting an element once another has started, is it possible to prevent an onComplete from a previous animation running?

 

I've basically got a click event listener that fires off an animation, and onComplete deletes an element. But the element may or may not be there once the event handler runs again. I'd post a codepen, but to replicate some of the (awkward) design choices I'm working with it would be massive and probably just complicate things, so I was wondering if there was anything obvious I should be looking to do, or if there were any useful approaches I should think about when dealing with overlapping animations like this?

Thanks!

Link to comment
Share on other sites

In the onComplete check if the element exists before deleting it.

 

const el = document.querySelector(".selector");
el?.remove()

 

  • Like 1
Link to comment
Share on other sites

Hi Steve - yeah that's the approach I first went for, but it didn't seem to work.

Your answer reminded me to check whether I was actually selecting the element in the onComplete... I wasn't, I was passing it, which was why it wasn't actually there. So thanks!

 

Link to comment
Share on other sites

If your goal to ensure that the onComplete callback function can only run once there are several options too, if it' only purpose is to remove an element StevesS' solution should do to prevent (usually harmless) error.

Somehow it sounds to me as if your setup would be better of with two different Tweens (or Timelines) one that only runs the first time and one that runs after that, but it's hard to guess without more detailed knowledge of you project. Even if making two near identical Tweens (one with the callback and one without) seems unelegant, using only one tween and adding a lot of complexity isn't always the better design choice in the long run. as far as my experience goes. 

  • Like 1
Link to comment
Share on other sites

5 hours ago, NickWoodward said:

Your answer reminded me to check whether I was actually selecting the element in the onComplete... I wasn't, I was passing it, which was why it wasn't actually there. So thanks!

Yeah, you could still use the reference if you want:

onComplete: () => element.parentNode && element.remove()

And like @iDad5 said, there are other ways you could kill an onComplete (like tween.eventCallback("onComplete", null)) but it's always tough to advise without seeing the issue in context. I suspect the simple solution from @SteveS is the best choice. 👍

Link to comment
Share on other sites

9 hours ago, GreenSock said:

Yeah, you could still use the reference if you want:

onComplete: () => element.parentNode && element.remove()

And like @iDad5 said, there are other ways you could kill an onComplete (like tween.eventCallback("onComplete", null)) but it's always tough to advise without seeing the issue in context. I suspect the simple solution from @SteveS is the best choice. 👍

Hi Jack - yeah I was using functions to return tweens to the main timeline, and the reference was created in the function, so I think it referred to an element that existed when the tween was created, but not when it was run. I make a habit of that mistake, but at least I spot it slightly better now!

 

15 hours ago, iDad5 said:

If your goal to ensure that the onComplete callback function can only run once there are several options too, if it' only purpose is to remove an element StevesS' solution should do to prevent (usually harmless) error.

Somehow it sounds to me as if your setup would be better of with two different Tweens (or Timelines) one that only runs the first time and one that runs after that, but it's hard to guess without more detailed knowledge of you project. Even if making two near identical Tweens (one with the callback and one without) seems unelegant, using only one tween and adding a lot of complexity isn't always the better design choice in the long run. as far as my experience goes. 

+1 on the harmless error. I'm just a massive pedant - I knew the error wasn't doing anything, but I'm going to be using this in my portfolio, and the occassional error in the console doesn't look great (and the first thing I'd do if I saw a menu animate something is click it fast :D)

Thanks for the advice though, appreciated!

  • Like 1
Link to comment
Share on other sites

2 minutes ago, NickWoodward said:

Hi Jack - yeah I was using functions to return tweens to the main timeline, and the reference was created in the function, so I think it referred to an element that existed when the tween was created, but not when it was run. I make a habit of that mistake, but at least I spot it slightly better now!

 

+1 on the harmless error. I'm just a massive pedant - I knew the error wasn't doing anything, but I'm going to be using this in my portfolio, and the occassional error in the console doesn't look great (and the first thing I'd do if I saw a menu animate something is click it fast :D)

Thanks for the advice though, appreciated!

I hear, you. I just thought, that with anything else being in kind of limbo-state probably that one wouldn't be the thing I'd have focused on first.

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