Expanding grid boxes "fighting" each other for size when expanding and shrinking

[darkus]

I've setup a grid of 3 content boxes that should expand when hovered over and then shrink again.   When one of the boxes expands, the others will have a compensatory shrink thanks to CSS grids

 

Currently, the expansion and shrink effect works perfectly if you enter or leave any single box from outside the grid area.

 

However, a problem arises when you try to move from one hovered box to another hovered box, lets say "Box content 1" directly to "Box content 2".  In this case, then the box you are leaving correctly shrinks, but the box that expands, has a little 'hiccup' or a pause and then snaps slightly then continues to grow as normal.

 

I've put an image as a background into the 3 boxes, to really highlight the jarring effect, but you can just delete the image and will see red boxes and also be able to see the problem in its purest form.

 

I'm imaging the animations between enter and leave are "fighting" one another and thats why thats happening, but thats just a simplistic explanation.

 

Anyone have ideas on how to smooth this transition out?

 

 

Of course, a codepen is better then my description:

 

See the Pen LYXZxXd by darkuss (@darkuss) on CodePen

[Rodrigo]

Hi,

 

Maybe you're looking for something like this:

See the Pen jOQrwvE by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[darkus]

30 minutes ago, Rodrigo said:

Hi,

 

Maybe you're looking for something like this:

 

 

 

Hopefully this helps.

Happy Tweening!

 

 

In your modification the other boxes are not shrinking, so the overall width of the container will expand off the screen

 

I'm wondering if this is a limitation with use of grids with 'auto' width, and I need to do some more complex code to explicitly set the width for each box

[Rodrigo]

Yeah, pretty much shrinking one while at the same time expanding another will cause this, especially if you're animating the width property. You can play and make the negative timeScale value event lower (like -3 or -4) in order to reduce that.

 

I'm not that familiar with grid layouts so I couldn't offer you a definitive answer on the subject. Another option would be to use Flex.

 

A final alternative is to select the remaining elements (the other two) and animate their width to a smaller value so they all fit their container.

 

Happy Tweening!