Animation error causing filters to not work in Chrome and Firefox

[danking728]

The error can be seen here: https://elearning.scranton.edu/programs/

On Chrome and Firefox, the first filter a user chooses works fine but any subsequent filters that are chosen do not work and produces the following error in the console.

MixItUp] WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the queue is full or queuing is disabled.

It appears the animation never really finishes and causes the subsequent filter events to never get triggered. This issue has been brought up once before in issue #278. A solution proposed in that issue thread was to decrease the animation duration. I tried that but it did not work. The other solution mentioned would be to increase the throttle duration to a greater value than your mixer animation duration. This did not work. The last solution i tried out was increasing the queueLimit but that did not work either. The only band-aid fix that made the filters work again was to disable the animations completely, which isn't a great fix for UX reasons.

[FrancoisCapon]

Hello,

@danking728

We add the same issue on a project with lot of items. My solution is to replace the MixItUp animations by CSS animations, all is explain in this article (in French), but the code will remain the same 😉

• https://www.linkedin.com/pulse/mixitup-3-et-animations-fran%25C3%25A7ois-capon

@patrickkunka

Maybe you can add it to the official documentation, because it solve animation issues on large number of items ?

Best regards

[wilbertcaba]

@FrancoisCapon this was a very elegant solution and you give control of animations back to a CSS stylesheet. Love it. Merci Beaucoup!!