Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DMIND

Performance issue with scrollTo plugin & tween.to className

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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? 
Link to comment
Share on other sites

  • Solution

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. 

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
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.
×