I want content in a grid child to glide from the page to a modal on click.
The example below almost does what i have in mind, but not getting the sliding transition i want. I believe it’s because the position property is changing from static to fixed, so left and top can’t animate. If there was a way to keep the same position property in both states then we could animate left & top transition.
Some other ideas:
-
grid-column: 1 / -1– Supposed to break out of grid and spread from first to last col. Not working for me. https://www.joshwcomeau.com/css/full-bleed/ -
width: 100%; box-sizing: border-box– I don’t know how this is supposed to work, but not breaking out of the grid. https://stackoverflow.com/a/5219611/209942 - Change the parent of the content. Might require JS, or maybe
:beforeandafterpseudoclasses to wrap it in a different parent?
PaulOB
January 3, 2023, 1:10pm
#2
As I said in the other thread you can’t move from one positioning scheme to another without having something to animate to and from. You can’t animate from an auto position so you can’t animate from where something is sitting in an auto position (or non position) and then say left:200px as there is no from value. All you get is an immediate step to the left:200px;
You can magic number it by giving the element its position in relation to the viewport and then animate from that position but you have to work out all the positions which in a fluid layout would require numerous media queries each time an element wrapped as all the positions would change.
Here’s your demo adapted to a magic number scenario using a fixed width to avoid all the media queries that would be needed.
(View on codepen due to the fixed width)
As you can see that achieves what you want but obviously is too rigid apart form the smallest demo. In a real world you would want to calculate those coordinates with js on the fly.
1 Like
PaulOB
January 3, 2023, 5:08pm
#3
PaulOB:
In a real world you would want to calculate those coordinates with js on the fly.
Here’s a very rough js version so that the page can be fluid. The only caveat is that the modal needs to stay fixed to the top left corner.
(Code needs refactoring as I was in a rush)
Of course that’s only part of the problem as you have made no provision for your extra content to be shown. At the moment you are just moving an image.
1 Like
PaulOB
January 3, 2023, 6:43pm
#5
johnywhy:
- What about using
grid-columnto keep it CSS?- What about going full screen width and height, or using vw? Then we avoid specific positioning math.
You can’t animate from grid properties. An animation has to go from one fixed value to another.
Going full screen makes no difference to the concept. Vw units are just another unit and you would still need values to animate to
1 Like
PaulOB
January 3, 2023, 9:01pm
#7
johnywhy:
Can we exploit grid support for overlapping cells?
Yes you can make cells overlap in grid. You can just used named areas and place two items in the same area or span several areas. You would be better off choosing a cell in the middle of the page and make all the modal images appear in that space.
However if you are not animating it now then there’s nothing wrong with the fixed positioned method that was already being used and will keep the modal fixed in the centre of the viewport. You can size it as you wish.
As I see it you haven’t defined why you want to move this image and what else is supposed to happen. We need to know the other details before you can come to a solution for the image. If it’s just centering an image it seems a bit pointless to me. (Unlike your other demos where we move and show extra content in the modal.)
You need to plan ahead so we need to know about what happens next and what the final is supposed to look like.
I believe you have most of the tools to accomplish this now anyway depending on which way you approach it.
2 Likes
i said “nevermind animation for the moment”, and only in reference to that particular question.
PaulOB:
You would be better off choosing a cell in the middle of the page and make all the modal images appear in that space.
Woah. I can position the content that way without changing it’s position property? Can i use left for that, rather than a grid property?
PaulOB:
if you are not animating it now then there’s nothing wrong with the fixed positioned method
True, that’s my fallback if can’t get desired animation.
PaulOB:
If it’s just centering an image it seems a bit pointless to me. (Unlike your other demos where we move and show extra content in the modal.)
Still planning to move/unhide other content. I restricted this question to image to simplify the question.
PaulOB:
you haven’t defined why you want to move this image and what else is supposed to happen.
i did so in the other thread. The animation is visually appealing, and helps the user understand what’s happening.
Can we use css calc() with vw and known fixed cell-width to calculate to get a negative magic new left property for the modal?
PaulOB
January 4, 2023, 1:33pm
#9
johnywhy:
Can we exploit grid support for overlapping cells?
Here’s a basic example of a grid overlap/
Just click on a box.
I’m not really sure of the use-case yet as this is merely an answer to your query
…and just for fun…
(Unfortunately I am away abroad on holiday for a few weeks now and only have access to a mobile so can offer no more code until I return. Hopefully you have enough examples to make your choice now. My choice would be a basic non animated version and then enhanced with js for the animation.)
1 Like
Beauty! Great work.
It seems your css assumes a fixed number of columns and rows, and it achieves responsiveness by scaling rather than wrapping. Not sure it can work with grid-wrapping.
Also you’re not animating the movement of the content from the grid to the panel. I’m guessing grid-column can’t be animated, right?
I realized for my use-case, i need the panel positioned relative to the viewport, not relative to the grid.
We can assume the clicked row is visible, ie within the viewport. In my scenario, with grid-wrapping, we can assume all columns are within the viewport. Therefor, i believe i want the row-position of the panel to be the same as the clicked row. The column would be grid-center, as you’ve done.
I don’t think we yet have a way to detect clicked-row, or clicked-vh, with CSS only.
For now, i’m going with the first method i posted:
Issue:
- When window size is narrow enough to accommodate only one column of cells, the click behavior gets wonky. The clicked item no longer reserves it’s vacated space in the grid, so the following cells move up to fill the gap. How to fix?
Beauty! Great work.
It seems your css assumes a fixed number of columns and rows, and it achieves responsiveness by scaling rather than wrapping. Not sure it can work with grid-wrapping.
Also you’re not animating the movement of the content from the grid to the panel. I’m guessing grid-column can’t be animated, right?
I realized for my use-case, i need the panel vertical positioned relative to the viewport, not relative to the grid. Therefor, i believe i want:
- panel row: same as the clicked row. Meaning, don’t change row property between states.
- panel column: grid-center, as you’ve done. Thx to wrap, grid-center is guaranteed to be vw center.
PaulOB
January 4, 2023, 8:21pm
#13
johnywhy:
It seems your css assumes a fixed number of columns and rows, and it achieves responsiveness by scaling rather than wrapping. Not sure it can work with grid-wrapping.
That demo was in response to your question about grid cells that can overlap and that is the format you would need to in order to keep the modal in the middle. Otherwise you have no middle cells and you are back to positioning it in the top left corners as in your example. The fixed positioned modal is a much better idea as I mentioned before and won’t scroll away with the page.
johnywhy:
Also you’re not animating the movement of the content from the grid to the panel.
You said forget about that for now/
johnywhy:
I’m guessing
grid-columncan’t be animated, right?
Yes, I have mentioned several times that this is not possible. Only certain properties (and values) can be animated
johnywhy:
I realized for my use-case, i need the panel positioned relative to the viewport, not relative to the grid.
Yes that’s the way the modals in my original demos were placed.
johnywhy:
Therefor, i believe i want the row-position of the panel to be the same as the clicked row. The column would be grid-center, as you’ve done.
You can do that in your exam[le by setting a top auto and the modal will appear at the same vertical position as the element that called it (unless you scroll after selecting).
.linker:focus {
position: fixed;
width: 600px;
max-width: 100vw;
z-index: 1;
height: 300px;
background-color: lightsteelblue;
top:auto;
margin-top:2rem;
left: 100px;
box-shadow: 10px 10px 10px 50px rgba(0, 0, 0, 0.2);
animation: fadeIn 0.7s;
}
.closer{
display: none;
}
.linker:focus + .closer {
display: inline;
position: fixed;
top: auto;
margin-top:2rem;
left: 650px;
z-index: 15;
}
johnywhy:
When window size is narrow enough to accommodate only one column of cells, the click behavior gets wonky. The clicked item no longer reserves it’s vacated space in the grid, so the following cells move up to fill the gap. How to fix?
You were mistaken from the start and the height of the row is controlled by the height of the tallest item in that row thus forcing all others to the same height as that row (this is a default behaviour for flex and grid).
When you have one column the height of a row is zero when you move the content out of it. You would need to apply a min-height to hold the space open but of course that is a magic number fix again and undesirable.
.box{min-height:200px;}
Lastly you also need to reduce the size of the modal when it is too wide for the viewport.
1 Like
PaulOB
January 4, 2023, 8:41pm
#14
I also meant to mention that if you want the modal to follow the row position then it will need to ba absolute rather than fixed otherwise you will never see it if its below the fold.
Here’s your version updated to absolute and centred.
If you want the fixed version centred then its the same code except you will need to place it from the top with a fixed measurement and not auto.
Sorry but that’s it for me for a few days so I suggest you digest all the threads and information and come up with a version that suits you and then post a new thread if you have problems refining it. I will be around on mobile only in a couple of days time.
1 Like