Share Posted July 17, 2020 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 Link to comment Share on other sites More sharing options...
Share Posted July 17, 2020 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 2 Link to comment Share on other sites More sharing options...
Share Posted July 17, 2020 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. 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 22, 2020 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! Link to comment Share on other sites More sharing options...
Author Share Posted July 23, 2020 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? Link to comment Share on other sites More sharing options...
Share Posted July 23, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now