Problem with rapid clicks on multiple elements

[mary92]

Hey. In my project I have few hotspots that change smoothly on click. The problem happens when I quickly click at more then one hotspot - animations don't work well anymore, for example some elements stay visible although I use autoAlpha: 0 for them. Is it possible to improve that with greensock tools or I should just prevent click event until function is done for one element? Thanks in advance!

 

 

See the Pen WJXwgK by anon (@anon) on CodePen

 

[GreenSock]

Hm, it's kinda tough to troubleshoot blind - it'd help a lot if you could post a reduced test case in codepen or something. I did notice, though, that you're adding a click handler to "body" every time a click occurs, thus after a while you're probably gonna get a ton of function calls there that you don't really want. That may be what's causing the weirdness you described. 

[mary92]

6 hours ago, GreenSock said:

Hm, it's kinda tough to troubleshoot blind - it'd help a lot if you could post a reduced test case in codepen or something.

 

Oh yes sure - here it is. Animation for one element is again smooth but when you start clicking at all elements at the same time, it's not good anymore.

[mary92]

anyone?

[Sahil]

Problem is you are using timeline to animate three elements with random sequence. So lets say you click on circle and quickly click on body, then your both timelines start almost at same time.

 

1. The body click event's timeline finishes first tween and sets the alpha of '.copy' to zero but by the time it reaches third tween.

2. Your hotspot click event's timeline reaches third tween which sets alpha of '.copy' back to 1.

 

You can get around that by maintaining two arrays that will hold your timeline at that index so you can kill the animation.

 

See the Pen bMYgqO?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Take a look at following thread with similar idea, it uses same animation to play or reverse but you will find it helpful in future.

 

 

In your demo you were using TweenMax 1.20.3 under javascript settings then you had TweenMax 1.20.4 link added under HTML setting. You don't need TimelineMax when you are using TweenMax, it is bundled with it.

 

Also, in the demo you are mixing jQuery with vanilla js randomly it will lead you to a lot of errors and confusion.