HypoLast

It seems like using x/y/scale has fixed the performance issue we we're experiencing. Thanks guys! However, it doesn't seem like using x/y works with the Bezier plugin. You can actually see the difference in my codepen vs Carl's, in the one using left/right the boxes curve nicely across and down, in the one using x/y the boxes go straight on a downward angle, not respecting the curve. On the site this causes the particles to travel directly through a block of text that they're supposed to curve around. I did some Googling but wasn't able to figure out why this might be.

No problem, I know what that's like. Thanks for the thoughts, I'll try your suggestions when I get the chance and report back.

When you say we're adding infinitely more and more elements to the DOM do you mean in the codepen link or on the website? In codepen there are exactly 60 elements being created and added, they get recycled by having the animation repeat forever. I don't have the exact count for the website but we avoided dynamically creating elements exactly so that wouldn't be an issue, I can assure you it's finite. If it were an infinite loop I would expect it to crash any browser but I can leave the codepen or our website open all day on any browser other than Firefox for Mac and it runs fine, but on Firefox on a Mac both crash almost instantly. On the website I tried shimming the TweenMax and TimelineMax methods to empty functions and then the site ran fine on Firefox for Mac. If it was an issue of an infinite loop in our code I would expect to see performance issues crop up at some point even with the shims. I can see if I can reproduce the issue using GSAP with canvas as well. I don't have easy access to a Macbook though, so it may take me a couple days to have an example that I can verify reproduces the issue using canvas.

A while ago we built a website using GSAP, which can be seen here for reference: www.mikutech.com We use TimelineMax and TweenMax to power all of the animations on the site. It recently came to our attention that the site sometimes crashes the browser, but only specifically on Firefox for Mac. We've had two separate Macbooks running different versions of Firefox crash on the site now. Chrome and Safari run the site fine, and all three run fine on Windows. I tossed together a sample using the same kind of transformations and similar amounts of animations in the the codepen link attached. It runs fine in all of my browsers on Windows but again, in Firefox on Mac, if you try to scroll around it freezes and eventually crashes. The website is kind of old at this point and has an older version of GSAP on it, but we have a local version of the site with all the libraries updated which exhibits the same behavior. If we disable the animations the site is smooth, so it's definitely not any of the other scripts on the site causing the issue. Any help or insight into how to avoid these crashes would be greatly appreciated.