search

patrickkunka / mixitup

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
https://www.kunkalabs.com/mixitup/
4.52k stars 734 forks source link

600+ cards: how to apply animation to only 50 first targets? #576

Open dmitri-vlasov opened 3 years ago

dmitri-vlasov commented 3 years ago

Hi and thanks for developing such great library!

We have an issue when 600 cards are filter super slow, and I know that the reason is in how browser processes the animations, when we turned on the animations filtering is happens instantly, when animations are turned ON it looks up to 10 seconds in Safari and 5 seconds in Chrome.

I think that to avoid this issue need to apply animation only for N=50 first cards because there are only 3-9 cards are visible and with overhead for filters it could be assumed to get first 50. All o there cards will never appear in view of the user, so need to disable the animations for the rest of cards.

I would appreciate if you point me to the loop in code where we can limit the animations applying.

Thanks, Dmitry

MichaIng commented 3 years ago

A little tricky is the question how to deal with elements which are out of view first, but move into view due to filtering. So in this case, we'd need to keep animate elements i>50, as long as, after applying the filter, it's j<50.

Generally, I like the idea, even better to check whether an element is in view, before animating it, instead of using a fixed number of animated elements. But it needs to be assured that all elements are animated which are either before or after or during filtering/mixing/sorting in view, which might be complicated, when MixItUp does not know about the size and position of each element in the first place 🤔.