Disabling clickable area immediately after click?

[Creek 13 Likes (Newbie)]

With my site's animation, I'm hoping to solve for a problem where - if a user clicks multiple times, the animation begins again. 

 

I'm hoping there's a simple solution where I can insert code in the animation sequence begun by the click that immediately disables the clickable area? 

 

http://www.tibbee.com

 

If you click multiple times on the catfish, the animation repeats again and again from the beginning of his end animation. 

[Rodrigo 5,908 Likes (Superhero)]

Hi,

 

There are a few different approaches for this.

 

One is to check the animation's progress property. If it's more than 0 (already started) and less than 1 (completed), don't run the code that creates/restarts the animation:

const t = gsap.to(/*...*/);

fish.addEventListener("click", () => {
  const progress = t.progress();
  if (progress > 0 && progress < 1) return;
  // rest of your code
});

Another option is to use the isTweening() method to see if a particular element is being animated:

fish.addEventListener("click", () => {
  if (gsap.isTweening(fish)) return;
  // rest of your code
})

Another one I can think of is create a boolean that is toggled when the user clicks and then toggled back once the animation is completed:

const isActive = false;
const t = gsap.to(fish, {
  /*...*/
  onComplete: () => isActive = false,
});

fish.addEventListener("click", () => {
  if (isActive)return;
  isActive = true;
  // rest of your code
});

I'm pretty sure that there are other options such as using CSS to disable pointer events, etc., but given that the scenario is rather simple, hopefully these ideas should be enough to get you going.

 

Finally congratulations, the animation looks great and the fish illustration is really amazing!

 

Happy Tweening!!!

[GreenSock 18,885 Likes (Superhero)]

Yeah, I'd probably set pointer-events: none in the click handler and then use an onComplete on the animation to set it back to the original value. 

 

Good luck! 👍

[Creek 13 Likes (Newbie)]

Thanks - I'll dig into it this evening. 

 

Given once they finally stop tapping at their phones, the animation continues - I just thought it was kinda funny to watch them tapping away, even getting angry about it. And the fish is already angry and then swallows them, so... 

 

BUT the parent who thought their child might enjoy the fish sees them reacting negatively - which I hadn't thought about until someone was kind enough to relate how it's then an issue