What's a possible way to animate positioning of CSS grid element?
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 ch
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/HelperFunct
