Asked this question in a different way before but rephrasing it might be better for me to find a solution to the issue I am having.
I would like to have one grid element expand to full screen when clicked on and fill the viewport. It doesn’t matter for me if the grid is made with Flexbox or Webflow Grid.
Here are two images very simply explaining what I mean:
The transition in between the two layouts should be smooth. And that is basically why I am struggling since when something expands or shrinks through its size property, the transition is very abrupt due to elements pushing each other in a grid layout. When the interaction is made through the transform properties like move and scale (while the 4. element is with a higher Z-index), I do not know how to achieve the right placement and how to make it expand to fill the viewport.
I am not sharing a read-only link since any alternative method of making this work would be okay for me.
Her is one ide. I have not tried but it might work. Do it it’s flex box.
Start with minimizing or hide the divs before expanding the last box. Then it will not struggle with the other boxes
Thanks for your answer. The problem is when the size gets smaller on the first three boxes inside a Flexbox, the transition is super weird and not smooth at all — also the fourth box gets adjusted when the other ones get smaller since the empty space pulls the 4. box.
Sorry, it is working now. Will try to understand how it works but gravitationally the first box can stay where it is since when the other ones disappear there is no space on the left to pull it inwards. Do you think there would be a way to make the same thing to the bottom right box for instance and also have it expand horizontally in a very smooth way as well (similar to how it expands vertically now)?
Thanks again Janne, this looks really good! Will try to understand how it works now.
I also made a small animation to explain what I had in mind (it is below) — sorry for not being more clear at the start. Do you think this can be done as well?
Ok, I see what you want to do now. I think it would be possible. Needs a lite bit more thinking and interactions. Will se if a can find some time… take a look at my interactions for box 1 and 4. You might solve it. Will keep you updated when i have some more time
Hey, @devdo, any progress on implementing the codepen?
My idea is to have the full-size image animation also work as a transition between different pages, which I guess makes it even more difficult, so if you have any tips on that, it would be helpful.
