darkus Posted June 19, 2023 Share Posted June 19, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted June 19, 2023 Share Posted June 19, 2023 Hi, Maybe you're looking for something like this: See the Pen jOQrwvE by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
darkus Posted June 19, 2023 Author Share Posted June 19, 2023 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 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted June 19, 2023 Solution Share Posted June 19, 2023 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! 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