What's a possible way to animate positioning of CSS grid element?

[sadmansh]

Hi all.

 

After some digging I found that CSS grid elements cannot have animation when they are moved around within the grid, so I was wondering if there could be a JS solution to this. I posted this on Reddit first and someone directed me here.

 

Basically what I want is, on a class change on the parent that has display: grid, the child elements will change position using grid-column-start and grid-row-start. I figured out this part, but not quite sure how to animate that change in position.

 

What could be a JS way to achieve this since this is most likely not possible with CSS? Please correct me if I am wrong.

 

My implementation minus the animation: https://codepen.io/sadmansh/full/VweEZqL The dots will move when you click the button up top.

See the Pen VweEZqL by sadmansh (@sadmansh) on CodePen

[ZachSaucier]

Hey sadmansh and welcome.

 

Grid properties are not directly animatable. To animate between them, you must save their visual state before the change (width, height, absolute position with regards to the viewport), make the change to the properties, then animate from the saved values to the new values. This sort of transition commonly is called the FLIP technique.

 

GSAP has a handy helper function for FLIP which might be able to help: https://greensock.com/docs/v3/HelperFunctions#FLIP

[twinstream]

You can also stack grid layouts on top of grid layouts. If each element is duplicated alone on its own grid layout then you can animate the position of the grid itself creating the "illusion" of the items animating to another grid area.

[sadmansh]

On 7/18/2020 at 3:53 AM, twinstream said:

You can also stack grid layouts on top of grid layouts. If each element is duplicated alone on its own grid layout then you can animate the position of the grid itself creating the "illusion" of the items animating to another grid area.

Hi, thank you so much. Would you be able to point me to the direction how GSAP would work in this case? Thanks in advance!

[sadmansh]

On 7/18/2020 at 1:04 AM, ZachSaucier said:

Hey sadmansh and welcome.

 

Grid properties are not directly animatable. To animate between them, you must save their visual state before the change (width, height, absolute position with regards to the viewport), make the change to the properties, then animate from the saved values to the new values. This sort of transition commonly is called the FLIP technique.

 

GSAP has a handy helper function for FLIP which might be able to help: https://greensock.com/docs/v3/HelperFunctions#FLIP

Hi Zach, thank you so much for your response. Will you be able to tell me how I can use this with React?

[ZachSaucier]

25 minutes ago, sadmansh said:

Will you be able to tell me how I can use this with React?

React is just a framework. The approach is the same. Your targets may need to be refs.