Performance issue with scrollTo plugin & tween.to className

[DMIND]

Hello Carl, Jonathan & all GSAP crew. First of all I wanna tell you HUGE THANKS for your awesome library. GSAP is the best one for web animation. W3C should add it for standarts of HTML5 or HTML6 =)

 

Now about my strange issue.

 

For my project i used scrollTo plugin & TweenMax.to className. Animation works fine when you click once or twice on image. But if you click a few more times animation starts glitching. And few more times & browser hangs off. I have 10 images on page & when you click on every image to expand it animation starts glitching too. Maybe it's problem with logic of my code or something else.

 

I created a small codepen demo to show you my problem.

 

Please help me to solve it.

See the Pen WwdYKy by dmind (@dmind) on CodePen

[GreenSock]

I'm about to run out the door, so I don't have time to give a lot of details, but it looks like the problem is that you're creating a bunch of redundant click handlers that are exponentially stacking on top of each other. The first time your function runs, it's assigning a click() to an element. onComplete, it's assigning another, then each click thereafter is spawning new click handlers, so your functions are getting called exponentially more and more times. First click creates 1 handler. 2nd creates an additional one. Now the next click fires both of those handlers which each assign another (now we have 4), etc. So yeah, it looks like a logic issue in your code. I'd recommend just assigning the click handler(s) once, not inside your functions that are getting called often. 

[DMIND]

Ok. Now i see what's wrong in my code logic. But i don't know how to write my functions for proper work. Should i use IF conditions or pass parameters into my functions or something else to animate worklmgContainer to className "expanded" & then select this className & animate back to original class? Any ideas? 

[Carl]

I'm not entirely sure what to suggest, but if you want a very simple way of managing  open and closed states maybe something like this will work:

http://codepen.io/GreenSock/pen/LNQENb

 

I'm pretty sure using a similar approach you could also figure out the values to scrollTo on each click. 

[DMIND]

This is exactly right solution which i try to find. Really simple way! Now animation works awesome & superfast! Thank you very very much Carl!