Flexbox tiles animation with flex wrap

[Daniel Matt]

I used flexbox to build 3 column layout (now it contains 9 tiles).

Each tile has 33.3333% width. When you click on the tile, then it will be extended to 66.666%.

So we have the grid as in the example below:

(A) In the beginning, all tiles are closed. Each tile has 33.3% width.
 

Quote

1 2 3
4 5 6
7 8 9

(B) After click 4th element (an also another elements from column 1), the 4th element will be animated from left to right (width: 66.6%). All elements after clicked item moves right 1 column.
 

Quote

1 2 3
4 4 5
6 7 8
9

(C) After click 5th element (an also another elements from column 2), the 5th element will be animated from left to right (width: 66.6%). All elements after clicked item moves right 1 column.

 

Quote

1 2 3
4 5 5
6 7 8
9

(D) After click 6th element (an also another elements from column 3), the 6th element will be animated from right to left (width: 66.6%). The previous item (in example 5th will go to the next row). All other elements after clicked item moves right.
 

Quote

1 2 3
4 6 6
5 7 8
9

To summarise, each clicked element stay on the same row (initial position row) and can move elements before/after to the next row.
I suppose that might be connected with the "order" css property row.

I would like to make a nice animation with changing tile width and the effect if we move tiles position. Do you have any idea how I can achieve it?
 

See the Pen abZXodO by Matteokr (@Matteokr) on CodePen

[ZachSaucier]

Hey Matt and welcome to the GreenSock forums.

 

GreenSock is working on a new FLIP plugin which will make this sort of animation incredibly easy! Unfortunately it's still in the works so we can't share a preview of it with you. But keep your eyes peeled for it  

 

Until then you need to do it more manually yourself as this post covers:

 

 

[Daniel Matt]

Thanks for the quick reply. According to the related topics I built the example below.
How can I animate the box width? Is there option that the 3rd, 6th, 9th, etc. width goes animate from right to left?
Also when I click 3rd element, that looks all "jumping" for a second. Any idea how can I make some improvements in my code.

See the Pen jOrdKGX by Matteokr (@Matteokr) on CodePen

[ZachSaucier]

First off, we highly recommend upgrading to GSAP 3. It has a smaller file size, a sleeker API, and a bunch of new features. Upgrading is easy!

 

9 minutes ago, Matt Ge said:

How can I animate the box width?

The same way you animate the other properties: get the before and after state and then animate between the two.

 

10 minutes ago, Matt Ge said:

Is there option that the 3rd, 6th, 9th, etc. width goes animate from right to left?

Not directly, no. But a proper translation and changing of the width at the same time is equivalent to it visually.

 

11 minutes ago, Matt Ge said:

when I click 3rd element, that looks all "jumping" for a second.

Do you mean the background's height shifts? Again, you'll need to calculate the height before and after the transition and animate between the two if you want it to be smooth visually.

[Daniel Matt]

Hi, Thanks for the tips. Could you tell me what I'm doing wrong with width animation:

See the Pen RwRdway by Matteokr (@Matteokr) on CodePen

I would like to change width 33.3% to 66.6% when open/close (click) item. Only 1 item might be open. I think something wrong goes with the gasp.set() width and height.
Also is there way to use CSS properties: flex: 0 0 33.3%; max-width: 33.3% instead width property (see CSS comment lines)?

[ZachSaucier]

As much as I'd like to spend my time helping you out with this animation (seriously, this seems like fun thing to do) it's a bit out of scope for the help we're able to give for free here. If you have a specific question related to GSAP feel free to ask and we'll do our best to help!

 

I assure you that our upcoming FLIP plugin will make this type of animation a breeze. Sorry I can't share it now! I really wish I could do that as well.