Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sadmansh

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

Recommended Posts

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 post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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.

  • Like 3
Link to post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites
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.

  • Like 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×