Flip chain transitions element

[Oleh Koval]

How to build element transition chains correctly? 

See the Pen NWLOqOq by oleh-koval (@oleh-koval) on CodePen

[mvaneijgen]

I'm just going to jump in and give my two cents, I'm not a Flip expert, so maybe there is a way of doing this, but seen the docs states, I think it is really for animation between TWO states, not multiple. https://greensock.com/docs/v3/Plugins/Flip/

 

Quote

... transition between two states ...

 

If this is indeed the case I would create a .p-bg element for each block and hide the first one when the second one will animate from p2 -> p3, then hide .p-bg of p2 when animating from p3 -> p4, ect. It will visually work like you expect and for the visitor it will just look like that one element is jumping around the page, while in reality it is a new element each time. Hope it helps and happy tweening! 

[Oleh Koval]

@mvaneijgen I understand that I can create a .p-bg element for each block, but I thought there might be a better solution for this task. But in any case, this will solve my task.