Flip animation problem growing amount of cards

[ModiFax]

Hi,
I have now tried the animation when wrapping in different situations. Unfortunately I haven't found a solution how to deal with many objects. If I resize at 20 cards then everything is cool. However, as soon as I go to 200, the animation doesn't work as well as at all. What could I optimize here?

to test this you have to open codepen and resize the browser. Did I do something wrong here?

20 elements:

200 elements:

See the Pen jOvBeKY by ModiFax (@ModiFax) on CodePen

 

 

See the Pen jOvBebB by ModiFax (@ModiFax) on CodePen

[Rodrigo]

Hi,

 

Yeah, that's basically a rendering/layout-shifting issue, nothing related to GSAP. If you inspect the example with the 200 elements in it with devtools you'll see it.

 

The only advice I can give you is to look into debouncing your resize handler and check GSAP MatchMedia in order to create your Flip instances there:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Sorry I can't be of more assistance, hopefully other users can chime in and give you better and more useful input.

Happy Tweening!

[GreenSock]

Hi @ModiFax. Yeah, I'm a bit confused because you don't seem to be doing the critical step 2 of Flip animations: 

1. Get the current state
2. Make your DOM/styling changes <-- THIS!
3. Flip.from(state)

const state = Flip.getState(".card-container .card-wrapper");
// ---- state should change here! ---
Flip.from(state, {
  absolute: true,
  duration: 0.3,
  ease: "power1.inOut"
});

Am I missing something? 

 

As for doing a Flip on 200 items, it doesn't shock me that you're seeing a drop in performance. That's a lot of work you're asking it to do. Performance is a very deep topic and there are a lot of factors. If you need to do a deep-dive and discover ways to really boost the performance, you can contact us about paid consulting services (it's just not something we can do for free in these forums because it's time-intensive and these are just for GSAP-specific questions). There are definitely things that could be done to improve performance for your particular case...it's just not a simple fix.